©
本文檔使用 php中文網手册 發布
$route
is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url()
and tries to map the path to an existing route definition.
Requires the ngRoute
module to be installed.
You can define routes through $routeProvider's API.
The $route
service is typically used in conjunction with the ngView
directive and the $routeParams
service.
$location
$routeParams
reload();
Causes $route
service to reload the current route even if $location hasn't changed.
As a result of that, ngView creates new scope, reinstantiates the controller.
Broadcasted before a route change. At this point the route services starts resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the view template as well as any dependencies defined in resolve
route property. Once all of the dependencies are resolved $routeChangeSuccess
is fired.
Broadcasted after a route dependencies are resolved. ngView listens for the directive to instantiate the controller and render the view.
Broadcasted if any of the resolve promises are rejected.
The reloadOnSearch
property has been set to false, and we are reusing the same instance of the Controller.
current
Object |
Reference to the current route definition. The route definition contains:
|
routes
Object | Object with all route configuration Objects as its properties. |
This example shows how changing the URL hash causes the $route
to match a route against the URL, and the ngView
pulls in the partial.
Note that this example is using inlined templates to get it working on jsfiddle as well.
<div ng-controller="MainController">
Choose:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre></div>
controller: {{名称}}<br />Book Id: {{params.bookId}}<br />
controller: {{名称}}<br />Book Id: {{params.bookId}}<br />Chapter Id: {{params.chapterId}}
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', Function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.controller('BookController', Function($scope, $routeParams) {
$scope.name= "BookController";
$scope.params = $routeParams;
})
.controller('ChapterController', Function($scope, $routeParams) {
$scope.name= "ChapterController";
$scope.params = $routeParams;
})
.config(Function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: Function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);});
it('should load and compile correct template', Function() {
element(by.linkText('Moby: Ch1')).click();
var content = element(by.css('[ng-view]')).getText();
expect(content).toMatch(/controller\: ChapterController/);
expect(content).toMatch(/Book Id\: Moby/);
expect(content).toMatch(/Chapter Id\: 1/);
element(by.partialLinkText('Scarlet')).click();
content = element(by.css('[ng-view]')).getText();
expect(content).toMatch(/controller\: BookController/);
expect(content).toMatch(/Book Id\: Scarlet/);});