route_routeProvider service
- Dependent on ngRoute module

Route can render different views and call different controllers when the path changes. It monitors location.url(), and then matches the corresponding route according to the path.

route is usually used with routeProvider services and ngView instructions

Method:

reload()

When the routing is unchanged, load the current path again.
Rendering ng-view and instantiating a controller

Event:

$routeChangeStart

Triggered before routing changes, at this point in time,
Routing services will resolve all the dependencies required for routing changes (see $routeProvider for details).
And get the view template that needs to be rendered.
All dependencies needed to load the new routing have been resolved.
When all dependencies are resolved, $routeChangeSuccess event is triggered

Type: broadcast
 Target element: root scope (i.e., binding in root scope)



$routeChangeSuccess

Triggered after all routing dependencies have been parsed.
ng-view instantiates the controller according to instructions to render the view

Type: broadcast
 Target element: root scope



$routeChangeError

When parsing routing dependencies, the promise object does not parse properly.
Instead, reject is triggered when an error occurs. (See $q for details)

Type: broadcast
 Target element: root scope



$routeUpdate

The reloadOnSearch property is set to false.
Use the same controller instance again
 This property is in the $route.current.$route object

Type: broadcast
 Target element: root scope

Method

$location.path():
As soon as the routing changes, it changes to get a new url

$route.current.templateUrl:
As soon as the routing changes, the template url for obtaining the new routing changes.

$route.current.params:
As soon as the routing changes, it changes and gets the parameters of the template url for the new routing

$route.current.scope:
When the routing changes, it becomes empty until the routing changes are completed.
Then assign the scope of the new routing to it

$routeParam:
As soon as the routing changes, it will not become empty. It will keep the last routing change.
Wait until the routing change is complete, then assign the new routing url parameter to it

View:
Rendering after routing changes have been completed

Example:

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

(function (angular) {
    'use strict';
    /*Put "use strict" on the first line of the script file, and the entire script will run in "strict mode".
     * Put "use strict" in the first line of the function body, and the whole function runs in "strict mode".
     * The purpose of establishing the "strict model" is mainly as follows:
     　　- Eliminate some unreasonable and imprecise aspects of Javascript grammar and reduce some weird behavior.
     　　- Eliminate some unsafe aspects of code operation to ensure the safety of code operation;
     　　- Improve the efficiency of compiler and speed up its operation.
     　　- Pave the way for a new version of Javascript in the future.*/
    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
                //Use $locationProvider.html5Mode(true);
                /*http://localhost:63342/untitled18/app
                        /Book/Scarlet*/
                /*http://localhost:63342/untitled18/app
                        /Book/Gatsby*/
                /*http://localhost:63342/untitled18/app
                        /Book/Moby*/

                //Do not use $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 second delay
                        delay: function ($q, $timeout) {
                            var delay = $q.defer();
                            $timeout(delay.resolve, 1000);
                            return delay.promise;
                        }
                    }
                })
                //Use $locationProvider.html5Mode(true);
                /*http://localhost:63342/untitled18/app
                        /Book/Gatsby/ch/4?key=value*/
                /*http://localhost:63342/untitled18/app
                        /Book/Moby/ch/1*/

                //Do not use $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>




<!--On the browser url-->
http://localhost:63342/untitled18/
app/index7.html#/Book/Scarlet

<!--The results on the browser-->
controller: BookController
Book Id: Scarlet

//New url(# later parameter)
$location.path() = /Book/Scarlet
//Template url
$route.current.templateUrl = book.html
//The parameters of the template url of the new routing will change as soon as the routing changes.
$route.current.params = {"bookId":"Scarlet"}
//Assign the scope of the new routing to it
$route.current.scope.name = BookController
//As soon as the routing changes, it will not become empty. It will keep the last routing change.
//Wait until the routing change is complete, then assign the new routing url parameter to it
$routeParams = {"bookId":"Scarlet"}

Reference resources:

angular -$route API translation - stray cat nest