$route

1. - $routeProvider
2. - service in module ngRoute

$routeis 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 thengRoutemodule to be installed.

You can define routes through $routeProvider's API.

The$routeservice is typically used in conjunction with thengViewdirective and the$routeParamsservice.

依赖

• $location
• $routeParams

方法

• reload();

  Causes$routeservice to reload the current route even if $location hasn't changed.

  As a result of that, ngView creates new scope, reinstantiates the controller.

事件

• $routeChangeStart

  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 inresolveroute property. Once all of the dependencies are resolved$routeChangeSuccessis fired.

  类型:

  broadcast

  目标:

  root scope

• $routeChangeSuccess

  Broadcasted after a route dependencies are resolved. ngView listens for the directive to instantiate the controller and render the view.

  类型:

  broadcast

  目标:

  root scope

• $routeChangeError

  Broadcasted if any of the resolve promises are rejected.

  类型:

  broadcast

  目标:

  root scope

• $routeUpdate

  ThereloadOnSearchproperty has been set to false, and we are reusing the same instance of the Controller.

  类型:

  broadcast

  目标:

  root scope

属性

• current

  Object

  Reference to the current route definition. The route definition contains: controller: The controller constructor as define in route definition. locals: A map of locals which is used by $controller service for controller instantiation. Thelocalscontain the resolved values of theresolvemap. Additionally thelocalsalso contain: $scope- The current route scope. $template- The current route template HTML.

• routes

  Object

  Object with all route configuration Objects as its properties.

示例

This example shows how changing the URL hash causes the$routeto match a route against the URL, and thengViewpulls in the partial.

Note that this example is using inlined templates to get it working on jsfiddle as well.

ng-controller="MainController">Choose:href="Book/Moby">Moby|href="Book/Moby/ch/1">Moby: Ch1|href="Book/Gatsby">Gatsby|href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4|href="Book/Scarlet">Scarlet Letter
ng-view>

$location.path() = {{$location.path()}}

$route.current.templateUrl = {{$route.current.templateUrl}}

$route.current.params = {{$route.current.params}}

$route.current.scope.name = {{$route.current.scope.name}}

$routeParams = {{$routeParams}}

controller:{{名称}}<br/>BookId:{{params.bookId}}<br/>

controller:{{名称}}<br/>BookId:{{params.bookId}}<br/>ChapterId:{{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 delaydelay:Function($q,$timeout){vardelay=$q.defer();$timeout(delay.resolve,1000);returndelay.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();varcontent=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/);});