AngularJS: API: ngRoute/service/$route

$route

- $routeProvider
- service in module ngRoute

$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.

事件

$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 in resolve route property. Once all of the dependencies are resolved $routeChangeSuccess is 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

The reloadOnSearch property 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. The locals contain the resolved values of the resolve map. Additionally the locals also 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 $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.

index.html

<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>

book.html

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

chapter.html

controller: {{名称}}<br />Book Id: {{params.bookId}}<br />Chapter Id: {{params.chapterId}}

script.js

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);});

protractor.js

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/);});

AngularJS: API: ngRoute/service/$route

$route

依赖

方法

事件

$routeChangeStart

类型:

目标:

$routeChangeSuccess

类型:

目标:

$routeChangeError

类型:

目标:

$routeUpdate

类型:

目标:

属性

current

routes

示例

`current`

`routes`