I am trying to write a small web application: listing user name and number
Those files are in the same folder, for example:
ang8
|---- index.html
|---- list.html
|---- contacts.js
When I am trying to open index.html, it does not load the content in list.html. Any idea?? Thanks!
The index.html code is:
<!DOCTYPE html>
<html ng-app="contacts">
<meta character="utf-8">
<title>Contacts</title>
<style type="text/css">
* { box-sizing: border-box; }
body { font: 14px/1.5 sans-serif; color: #222; margin: 3em;}
</style>
<div ng-controller="Contacts">
<h1>Contacts</h1>
<div ng-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="contacts.js"></script>
</html>
The list.html code:
<h2>List</h2>
<div>
<label>search: </label><input type="search" ng-model="search">
<br>
</div>
<ul>
<li ng-repeat="contact in contacts | filter:search">
<a href="#/contact/{{$index}}">{{contact.name}}</a>
: {{contact.number}}
</li>
</ul>
and the js code:
angular
.module('contacts', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'list.html'
});
})
.controller('Contacts', function($scope){
$scope.contacts = [
{name: 'Tom', number: '1234'},
{name: 'David', number: '4321'},
{name: 'Jason', number: '12345'}
];
})
ngRoute? – Asok Feb 27 '14 at 13:36ngRoute, correct? Just making sure. Actually, if I am correct you needngRouteto access$routeProvider, so you could either reference ngRoute or remove your $routeProvider and you should be fine – Asok Feb 27 '14 at 13:39ngRoutewhy are you injecting$routeProvider? – khellang Feb 27 '14 at 13:40ng-viewand$routeProvideris in thengRoutemodule. So either you have to add the dependency and .js reference, or you have to remove both. – khellang Feb 27 '14 at 13:42