route相关方法

$route -$routeProvider服务
-依赖ngRoute模块

route能够在路径发生改变的时候,渲染不同的视图,调用不同的控制器.它监测了location.url(),然后根据路径来匹配相应的路由。

route通常和routeProvider服务和ngView指令一起使用

方法:

reload()

在路由没有改变的时候,再次加载当前路径的路由,
重新渲染ng-view,实例化一个控制器

事件:

$routeChangeStart

在路由变化之前被触发,在这个时间点上,
路由服务会resolve所有的路由变化所需要的依赖(详见$routeProvider),
以及获取需要被渲染的视图模板,
已经解析所有加载新路由所需要的依赖.
当所有的依赖都被解析以后,$routeChangeSuccess事件就会被触发

类型: broadcast
目标元素: root scope(即在根作用域内绑定)



$routeChangeSuccess

在所有路由依赖被解析完成后触发,
ng-view会根据指令实例化控制器,渲染视图

类型: broadcast
目标元素: root scope



$routeChangeError

当解析路由依赖时,promise对象没有正常解析,
而是reject出错的时候被触发. (详见$q)

类型: broadcast
目标元素: root scope



$routeUpdate

reloadOnSearch属性设置为false,
再次使用相同的控制器实例
这个属性在$route.current.$route对象里

类型: broadcast
目标元素: root scope

方法

$location.path():
路由一变化就随之变化,获取新的url

$route.current.templateUrl:
路由一变化就随之变化,获取新路由的模板url

$route.current.params:
路由一变化就随之变化,获取新路由的模板url的参数

$route.current.scope:
路由一变化,它会成为空,等到路由变化完成,
再把新路由的作用域赋给它

$routeParam:
路由一变化,它不会变为空,会保持上一次路由变化,
等到路由变化完成,再把新路由url参数赋给它

视图:
路由变化完成后进行渲染

示例：

 /**
 * Created by Administrator on 2017/2/27.
 */

(function (angular) {
    'use strict';
    /*将"use strict"放在脚本文件的第一行，则整个脚本都将以"严格模式"运行。
     * 将"use strict"放在函数体的第一行，则整个函数以"严格模式"运行。
     * 设立"严格模式"的目的，主要有以下几个：
     　　- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
     　　- 消除代码运行的一些不安全之处，保证代码运行的安全；
     　　- 提高编译器效率，增加运行速度；
     　　- 为未来新版本的Javascript做好铺垫。*/
    angular.module('ngRouteExample', ['ngRoute'])
        .controller('MainController', function ($scope, $route, $routeParams, $location) {
            $scope.$route = $route;
            $scope.$location = $location;
            $scope.$routeParams = $routeParams;
            //  $scope.$on('$routeChangeSuccess', function(evt, next, previous) {
            //      debugger;
            //  });
        })
        .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
                //使用$locationProvider.html5Mode(true);
                /*http://localhost:63342/untitled18/app
                        /Book/Scarlet*/
                /*http://localhost:63342/untitled18/app
                        /Book/Gatsby*/
                /*http://localhost:63342/untitled18/app
                        /Book/Moby*/

                //不使用$locationProvider.html5Mode(true);
                /*http://localhost:63342/untitled18/app/index7.html
                        #/Book/Scarlet*/
                /*http://localhost:63342/untitled18/app/index7.html
                        #/Book/Gatsby*/
                /*http://localhost:63342/untitled18/app/index7.html#
                        /Book/Moby*/
                .when('/Book/:bookId', {
                    templateUrl: 'book.html',
                    controller: 'BookController',
                    resolve: {
                        // 1秒延迟
                        delay: function ($q, $timeout) {
                            var delay = $q.defer();
                            $timeout(delay.resolve, 1000);
                            return delay.promise;
                        }
                    }
                })
                //使用$locationProvider.html5Mode(true);
                /*http://localhost:63342/untitled18/app
                        /Book/Gatsby/ch/4?key=value*/
                /*http://localhost:63342/untitled18/app
                        /Book/Moby/ch/1*/

                //不使用$locationProvider.html5Mode(true);
                /*http://localhost:63342/untitled18/app/index7.html
                        #/Book/Gatsby/ch/4?key=value*/
                /*http://localhost:63342/untitled18/app/index7.html
                        #/Book/Moby/ch/1*/
                .when('/Book/:bookId/ch/:chapterId', {
                    templateUrl: 'chapter.html',
                    controller: 'ChapterController'
                });

            // configure html5 to get links working on jsfiddle
            // $locationProvider.html5Mode(true);
            /**/
        });
})(window.angular);





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




<!--浏览器上的url-->
http://localhost:63342/untitled18/
app/index7.html#/Book/Scarlet

<!--浏览器上得到的结果-->
controller: BookController
Book Id: Scarlet

//新的url(#后面参数)
$location.path() = /Book/Scarlet
//模板url
$route.current.templateUrl = book.html
//新路由的模板url的参数，路由一变化就随之变化
$route.current.params = {"bookId":"Scarlet"}
//把新路由的作用域赋给它
$route.current.scope.name = BookController
//路由一变化,它不会变为空,会保持上一次路由变化,
//等到路由变化完成,再把新路由url参数赋给它
$routeParams = {"bookId":"Scarlet"}

参考：

angular – $route API翻译 - 流浪猫の窝