I was trying to get the basics of angular.js down by following this video:
http://www.youtube.com/watch?v=i9MHigUZKEM#t=44m52s
The routing in the video is outdated so I tried to fix it with by including the new required arguments like ['ngRoute']. I can't figure out why it isn't working. Am I missing addtional things in the code?
index.html:
<!doctype html>
<html lang="en" ng-app="demoApp">
<head>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
</head>
<body>
<div ng-view=""></div>
<script>
var app = angular.module('demoApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
controller: 'simplecontroller',
templateUrl: 'partials/view1.html'
}).
when('/view2', {
controller: 'simplecontroller',
templateUrl: 'partials/view2.html'
}).
otherwise({
redirectTo: '/'
});
}]);
app.controller('simplecontroller', function($scope) {
$scope.family = [
{name:'bob', city: 'aaaaa'},
{name: 'john', city: 'ababab'}
];
$scope.addFamily = function() {
$scope.family.push(
{
name: $scope.newMember.name,
city: $scope.newMember.city
});
};
)};
</script>
</body>
</html>
view1.html:
<h2>view 1</h2>
Name:
<br/>
<input type="text" ng-model="filter.name"/> {{name1}}
<ul>
<li ng-repeat="family_member in family | filter: filter.name | orderBy: 'name'">{{family_member.name + ', ' + family_member.city | uppercase}}</li>
</ul>
<br/>
Family member: <br/>
<input type="text" ng-model="newMember.name"/>
<br/>
City: <br/>
<input type="text" ng-model="newMember.city"/>
<br/>
<button ng-click="addFamily()"> Add family member</button>
<a href="#/view2">View 2</a>
view2.html:
<h2>view 2</h2>
Name:
<br/>
<input type="text" ng-model="city1"/> {{city1}}
<ul>
<li ng-repeat="family_member in family | filter: city1">{{family_member.name + ', ' + family_member.city | uppercase}}</li>
</ul>