Angular路由簡單學(xué)習(xí)

2019-11-19 18:15:32

字體：大中小

供稿：網(wǎng)友

現(xiàn)在非常流行單頁面應(yīng)用，傳統(tǒng)都是通過ajax請求數(shù)據(jù)，前端拿到數(shù)據(jù)渲染到頁面，這種無刷新的視圖切換非常棒！但是致命的缺點(diǎn)就是刷新後無法保持原來的視圖，解決此問題的一個(gè)方法是使用 hash，監(jiān)聽hashchange事件來進(jìn)行視圖切換，另一個(gè)方法是用HTML5的history API，通過pushState()記錄操作歷史，監(jiān)聽popstate事件來進(jìn)行視圖切換，也有人把這叫pjax技術(shù)。

現(xiàn)在開始介紹angular的$route！

 <!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>$route</title><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script></head><body><div ng-controller="Aaa"> <a href="#aaa">首頁</a> <a href="#bbb">內(nèi)容</a> <a href="#ccc">標(biāo)題</a> <div ng-view></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngRoute']);m1.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/aaa',{  template : '<h1>AAA</h1>' }).when('/bbb',{  template : '<h1>BBB</h1>' }).when('/ccc',{  template : '<h1>CCC</h1>' }).otherwise({ //默認(rèn)哈希值，哈希值出現(xiàn)錯(cuò)誤也可以執(zhí)行  redirectTo : '/aaa' });}]);m1.controller('Aaa',['$scope',function($scope){}]);</script></body></html>

上面的例子很簡單，除了用template之外還可以用templateUrl引入html的模板文件。

在when傳入控制器的指向，實(shí)現(xiàn)不同的頁面顯示不同的數(shù)據(jù)。

<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>$route</title><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script></head><body><div ng-controller="Aaa"> <a href="#aaa">首頁</a> <a href="#bbb">內(nèi)容</a> <a href="#ccc">標(biāo)題</a> <div ng-view></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngRoute']);m1.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/aaa',{  template : '<h1>AAA</h1>{{name}}',  controller : 'Aaa' //控制器指向 }).when('/bbb',{  template : '<h1>BBB</h1>{{name}}',  controller : 'Bbb' }).when('/ccc',{  template : '<h1>CCC</h1>{{name}}',  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></html>

以事件的方式映射路由頁面。

<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>$route</title><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script></head><body><div ng-controller="Aaa"> <a href="javascript:void(0);" ng-click="$location.path('aaa')">首頁</a> <a href="javascript:void(0);" ng-click="$location.path('bbb')">內(nèi)容</a> <a href="javascript:void(0);" ng-click="$location.path('ccc')">標(biāo)題</a> <div ng-view></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngRoute']);m1.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/aaa',{  template : '<h1>AAA</h1>{{name}}',  controller : 'Aaa' //控制器指向 }).when('/bbb',{  template : '<h1>BBB</h1>{{name}}',  controller : 'Bbb' }).when('/ccc',{  template : '<h1>CCC</h1>{{name}}',  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></html>

項(xiàng)目更復(fù)雜，頁面相同(首頁&index)，數(shù)據(jù)不同，需要對url進(jìn)行傳參。

<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>$route</title><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script></head><body><div ng-controller="Aaa"> <a href="javascript:void(0);" ng-click="$location.path('aaa/123')">首頁</a> <a href="javascript:void(0);" ng-click="$location.path('bbb')">內(nèi)容</a> <a href="javascript:void(0);" ng-click="$location.path('ccc')">標(biāo)題</a> <a href="javascript:void(0);" ng-click="$location.path('aaa/456')">index</a> <div ng-view></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngRoute']);m1.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/aaa/:num',{  template : '<h1>AAA</h1>{{name}}',  controller : 'Aaa' }).when('/bbb',{  template : '<h1>BBB</h1>{{name}}',  controller : 'Bbb' }).when('/ccc',{  template : '<h1>CCC</h1>{{name}}',  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); //不同的數(shù)據(jù)}]);m1.controller('Bbb',['$scope',function($scope){ $scope.name = 'xiecg-Bbb';}]);m1.controller('Ccc',['$scope',function($scope){ $scope.name = 'xiecg-Ccc';}]);</script></body></html>

路由的事件監(jiān)聽。

<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>$route</title><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script></head><body><div ng-controller="Aaa"> <a href="#aaa">首頁</a> <a href="#bbb">內(nèi)容</a> <a href="#ccc">標(biāo)題</a> <div ng-view></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngRoute']);m1.run(['$rootScope',function($rootScope){ //路由切換之前觸發(fā)的事件 $rootScope.$on('$routeChangeStart',function(event,current,pre){  console.log(event);  //事件對象  console.log(current); //路徑對應(yīng)的數(shù)據(jù)值  console.log(pre);  //上一個(gè)路徑 });}]);m1.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/aaa',{  template : '<h1>AAA</h1>'  //templateUrl : 'temp.html' }).when('/bbb',{  template : '<h1>BBB</h1>' }).when('/ccc',{  template : '<h1>CCC</h1>' }).otherwise({ //默認(rèn)哈希值，哈希值出現(xiàn)錯(cuò)誤也可以執(zhí)行  redirectTo : '/aaa' });}]);m1.controller('Aaa',['$scope',function($scope){}]);</script></body></html>

補(bǔ)充：angular事件的傳播機(jī)制。

<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">var m1 = angular.module('myApp',[]);m1.controller('Aaa',['$scope',function($scope){ $scope.count = 0; $scope.$on('myEvent',function(e){  //console.log(e.targetScope);  //當(dāng)前的  //console.log(e.currentScope); //目標(biāo)的  //console.log(e.name);   //事件名  //e.stopPropagation();   //阻止冒泡  $scope.count++; });}]);</script>

前面嵌套了三個(gè)controller，我們在中間的controller上綁定了click事件，使用$emit點(diǎn)擊的時(shí)候，上面的controller也會(huì)觸發(fā)事件。