The initial setup:
<body ng-app="myApp">
<ng-view></ng-view>
</body>
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
templateUrl: "app.html",
controller: "AppCtrl",
controllerAs: "app"
}
);
})
.controller('AppCtrl', function($routeParams) {
var self = this;
self.message = $routeParams.message;
});
<h1>{{ app.message }}</h1>
New here is $routeParams. Inside config(), $routeProvider will match the route against /:message, and the value of :message can be injected into the controller as $routeParams, and retrieved with a key of the same name.
The route parameters can be stacked and accessed in the same way:
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:firstName/:middleName/:lastName",
{
templateUrl: "app.html",
controller: "AppCtrl",
controllerAs: "app"
}
);
})
.controller('AppCtrl', function($routeParams) {
var self = this;
self.message = $routeParams.firstName + " " + $routeParams.middleName + " " + $routeParams.lastName;
});
There's more to learn!