]AngularJS系列中级篇之路由.docxVIP

原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on($locationChangeStart, prepareRoute); $rootScope.$on($locationChangeSuccess, commitRoute); ? 在ui-router中 listener = listener || $rootScope.$on($locationChangeSuccess, update); ... scope.$on($stateChangeSuccess, function() { updateView(false); }); ... ? angular-route Hello World !DOCTYPE html html ng-app=myApp head titleAngularJS/title script src=Scripts/angular.min.js/script script src=Scripts/angular-route.min.js/script /head body a href=#indexindex/a a href=#homehome/a div ng-view/div script angular.module(myApp, [ngRoute], [$routeProvider, function ($route) { $route.when(/index, { template: Index }) .when(/home, { template: Home }) .otherwise(index); }]); /script /body /html 以上为最简单的ngRoute Hello World ? 可参考官方API: /api/ngRoute ? 这里再展示1个稍微完整点的Demo div ng-controller=MainController Choose: a href=#Book/MobyMoby/a | a href=#Book/Moby/ch/1Moby: Ch1/a | a href=#Book/GatsbyGatsby/a | a href=#Book/Gatsby/ch/4?key=valueGatsby: Ch4/a | a href=#Book/ScarletScarlet Letter/abr / div ng-view/div hr / pre$location.path() = {{$location.path()}}/pre pre$route.current.template = {{$route.current.template}}/pre pre$route.current.params = {{$route.current.params}}/pre pre$ = {{$}}/pre pre$routeParams = {{$routeParams}}/pre /div script angular.module(myApp, [ngRoute]) .controller(MainController, function ($scope, $route, $routeParams, $location) { $scope.$route = $route; $scope.$location = $location; $scope.$routeParams = $routeParams; }) .controller(BookController, function ($scope, $routeParams) { $ = BookController; $scope.params = $routeParams; })