#### Add Routing Module to App
//Notice change: we are saying that this module has a dependency
//on WellKnown name of ngRoute, which was defined in angular-route.js
var app1 = angular.module('App1', ['ngRoute']);
#### Provision the Routes Table
//Notice change: we are saying that this module has a dependency
//on WellKnown name of ngRoute, which was defined in angular-route.js
var app1 = angular.module('App1', ['ngRoute']);
//Notice change: we are configuring app with a config method:
app1.config(function($routeProvider){
$routeProvider
.when ('/foo',{
//Note:Routes start with no slash
templateUrl:'app/views/foo.html',
controller: 'FooController'
})
.when ('/bar',{
templateUrl:'app/views/bar.html',
controller: 'BarController'
})
.otherwise ({
templateUrl:'app/views/home.html',
controller: 'HomeController'
})
});
#### Create Some Controllers
For now, we'll put the controllers directly in the primary file:
//note how '$scope' is mapped to $sc:
app1.controller('SomeParentCtrl', ['$scope', function ($s) {
$s.someText = "Three";
}]);
app1.controller('HomeController', ['$scope',function($scope){}]);
app1.controller('FooController', ['$scope', function($scope){
$scope.someNumber = 3;
$scope.someObject = {
first : 'John',
last : 'Smith',
full : function(){return this.first + ' ' + this.last;}
};
}]);
app1.controller('BarController', ['$scope', function($scope){}]);
### Create the Views
Foo
Bar
Scalar Binding:
Number:
Text:
First:
Last:
Home!
### All together
Put that all together, and you get: