項目上有一個新需求，就是需要根據json文件動態生成路由狀態，查閱了一下資料，現在總結一下發出來：
首先項目用到的是angular的UI-路由，所以必須引入angular.js和angular-ui-router.js兩個js文件，如下例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Example</title> 6 7 <script src="bower_components/angular/angular.js"></script> 8 <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> 9 <script src="js/routing.js"></script> 10 <script src="js/app.js"></script> 11 12 </head> 13 <body ng-app="App" ng-controller="MainController"> 14 15 <a ng-click="reload()">reload</a> 16 17 <a ui-sref="xxx">xxx</a> 18 <a ui-sref="yyy">yyy</a> 19 20 <div ui-view></div> 21 </body> 22 </html>
然后是json文件的一些數據，如下
{ "xxx": { "url": "/xxx", "templateUrl": "templates/xxx.html" }, "yyy": { "url": "/yyy", "templateUrl": "templates/yyy.html" }, "ccc": { "url": "/ccc", "templateUrl": "templates/yyy.html" }, "zzz": { "url": "/zzz", "templateUrl": "templates/zzz.html" } }
之后定義一個服務，定義個方法用來配置獲取json文件的ajax請求的地址，主方法是發送ajax並且對結果進行循環寫入路由狀態。
1 'use strict' 2 3 angular.module('Routing', ['ui.router']) 4 .provider('router', function ($stateProvider) { 5 6 var urlCollection; 7 8 this.$get = function ($http, $state) { 9 return { 10 setUpRoutes: function () { 11 $http.get(urlCollection).success(function (collection) { 12 for (var routeName in collection) { 13 if (!$state.get(routeName)) { 14 $stateProvider.state(routeName, collection[routeName]); 15 } 16 } 17 }); 18 } 19 } 20 }; 21 22 this.setCollectionUrl = function (url) { 23 urlCollection = url; 24 } 25 })
最后是最關鍵的angular配置階段和運行階段的代碼，配置階段要求至少給出一種狀態，如$stateProvider.state('home', {url: '/home',templateUrl: 'templates/home.html'});
並且將默認狀態配置好$urlRouterProvider.otherwise('/home');隨后調用上面的服務的setCollectionUrl 方法對url地址進行配置，方便發送ajax請求，最后在angular的運行階段的run方法中調用setUpRoutes方法將json文件的數據根據一定的格式進行狀態的動態寫入，代碼如下：
1 angular.module('App', ['ui.router', 'Routing']) 2 3 .config(function ($stateProvider, $urlRouterProvider, routerProvider) { 4 $stateProvider 5 .state('home', { 6 url: '/home', 7 templateUrl: 'templates/home.html' 8 }); 9 10 $urlRouterProvider.otherwise('/home'); 11 12 routerProvider.setCollectionUrl('js/routeCollection.json'); 13 }) 14 .run(function (router) { 15 router.setUpRoutes(); 16 }) 17 ;
至此，動態獲取angular路由狀態的例子就介紹完了，感興趣的可以看下原文地址和原文代碼的github，分別如下：
github上用git clone下來之后，會看到項目中有個bower.json文件，並且沒有上述的兩個js文件，我們只需在工程中使用node的包管理器npm下載bower，然后在該項目的命令行中輸入bower install 即可下載下來項目要用到的js文件。