Routing of 15-angular

Now very popular single-page applications, traditionally through the AJAX request data, the front-end to the data rendering to the page, this non-refreshing view switch is very good! But the fatal disadvantage is that after the refresh cannot maintain the original view, one way to solve this problem is to use hash, listen to the Hashchange event for the view switch, another method is to use the HTML5 history API, through Pushstate () to record the operation histories, Listen for popstate events to switch views, and some call this Pjax technology.

Now, let's introduce angular's $route!.

<! DOCTYPE html>varM1 = Angular.module (' myApp ', ['Ngroute‘]); M1.config ([' $routeProvider ',function($routeProvider) {$routeProvider. When (‘/aaa‘, {Template:' }). When (‘/bbb‘, {Template:' }). When (‘/CCC‘, {Template:' }). Otherwise ({//default hash value, hash value error can also be performedRedirectto: '/aaa‘    });}]); M1.controller (' Aaa ', [' $scope ',function($scope) {}]);</script></body>
The above example is very simple, in addition to using templates can also be used to introduce HTML template file Templateurl.
When the point of the incoming controller is reached, different pages are implemented to display different data.
<! DOCTYPE html>varM1 = Angular.module (' myApp ', [' Ngroute ']); M1.config ([' $routeProvider ',function($routeProvider) {$routeProvider. When ('/aaa ', {Template:' , Controller:' Aaa '//Controller Point}). When ('/bbb ', {Template:' , Controller:' Bbb '}). When ('/CCC ', {Template:' , Controller:' CCC '}). Otherwise ({Redirectto: '/aaa '    });}]); M1.controller (' Aaa ', [' $scope ',function($scope) {$scope. Name= ' XIECG-AAA ';}]); M1.controller (' Bbb ', [' $scope ',function($scope) {$scope. Name= ' XIECG-BBB ';}]); M1.controller (' CCC ', [' $scope ',function($scope) {$scope. Name= ' XIECG-CCC ';}]);</script></body>
Maps the routing page in an event way.
<! DOCTYPE html>ng-click= "$location. Path (' aaa ')"> Home </a> <a href= "javascript:void (0);"ng-click= "$location. Path (' BBB ')"> Content </a> <a href= "javascript:void (0);"ng-click= "$location. Path (' CCC ')"> Title </a> <div ng-view></div></div><script type= "Text/javascript" >varM1 = Angular.module (' myApp ', [' Ngroute ']); M1.config ([' $routeProvider ',function($routeProvider) {$routeProvider. When ('/aaa ', {Template:' , Controller:' Aaa '//Controller Point}). When ('/bbb ', {Template:' , Controller:' Bbb '}). When ('/CCC ', {Template:' , Controller:' CCC '}). Otherwise ({redirectto:'/aaa '    });}]); M1.controller (' Aaa ', [' $scope ', ' $location ',function($scope, $location) {$scope. Name= ' XIECG-AAA '; $scope. $location = $location;}]); M1.controller (' Bbb ', [' $scope ',function($scope) {$scope. Name= ' XIECG-BBB ';}]); M1.controller (' CCC ', [' $scope ',function($scope) {$scope. Name= ' XIECG-CCC ';}]);</script></body>
The project is more complex, the page is the same (homepage &index), the data is different, the URL needs to be passed.
<! DOCTYPE html>123') > Home </a> <a href= "javascript:void (0);" ng-click= "$location. Path (' BBB ')" > Content </a> <a href= "J Avascript:void (0); "ng-click=" $location. Path (' CCC ') ' > title </a> <a href= "javascript:void (0);" ng-click= "$ Location.path (' aaa/456') ">index</a> <div ng-view></div></div><script type=" Text/javascript ">varM1 = Angular.module (' myApp ', [' Ngroute ']); M1.config ([' $routeProvider ',function($routeProvider) {$routeProvider. When ('/aaa/:Num‘, {Template:' , Controller:' Aaa '}). When ('/BBB ', {Template:' , Controller:' Bbb '}). When ('/CCC ', {Template:' , Controller:' CCC '}). Otherwise ({redirectto:'/aaa/:num '    });}]); M1.controller (' Aaa ', [' $scope ', ' $location ', ' $routeParams ',function($scope, $location, $routeParams) {$scope. Name= ' XIECG-AAA '; $scope. $location=$location;    Console.log ($routeParams); //different Data}]); M1.controller (' Bbb ', [' $scope ',function($scope) {$scope. Name= ' XIECG-BBB ';}]); M1.controller (' CCC ', [' $scope ',function($scope) {$scope. Name= ' XIECG-CCC ';}]);</script></body>
Routed event snooping.
<! DOCTYPE html>varM1 = Angular.module (' myApp ', [' Ngroute ']); M1.run ([' $rootScope ',function($rootScope) {//events triggered before a route switch$rootScope. $on (' $routeChangeStart ',function(event,current,pre) {Console.log (event); //Event ObjectConsole.log (current);//data values for the pathConsole.log (pre);//Previous Path    });}]); M1.config ([' $routeProvider ',function($routeProvider) {$routeProvider. When ('/aaa ', {Template:' //templateurl: ' temp.html '}). When ('/bbb ', {Template:' }). When ('/CCC ', {Template:' }). Otherwise ({//default hash value, hash value error can also be performedRedirectto: '/aaa '    });}]); M1.controller (' Aaa ', [' $scope ',function($scope) {}]);</script></body>
Supplement: the dissemination mechanism of the angular event.
<div ng-controller= "Aaa" >{{count}}<div ng-controller= "Aaa" ng-click= "$emit (' MyEvent ')" >{{count}}<div ng-controller= "Aaa" >{{count}}</div> </div></div><script type= "Text/javascript" >varM1 = Angular.module (' myApp '), []); M1.controller (' Aaa ', [' $scope ',function($scope) {$scope. Count= 0;$scope. $on (' MyEvent ',function(e) {//Console.log (E.targetscope); The current        //Console.log (E.currentscope); of the target        //Console.log (e.name); Event name        //e.stoppropagation (); Stop bubbling$scope. count++; });}]);</script>
With three controllers nested in front, we bind the click event to the controller in the middle, and the controller above will trigger the event when the $emit is clicked.
If it is $broadcast click is spread down.
Learn notes, if there is insufficient, please correct me! Reproduced please keep the original link, thank you.
Finally, the micro-Bo powder, thank you.
Routing of 15-angular