項目上有一個新需求，就是需要根據(jù)json文件動態(tài)生成路由狀態(tài)，查閱了一下資料，現(xiàn)在總結(jié)一下發(fā)出來：
首先項目用到的是angular的UI-路由，所以必須引入angular.js和angular-ui-router.js兩個js文件，如下例子：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Example</title> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="js/routing.js"></script> <script src="js/app.js"></script></head><body ng-app="App" ng-controller="MainController"><a ng-click="reload()">reload</a><a ui-sref="xxx">xxx</a><a ui-sref="yyy">yyy</a><div ui-view></div></body></html>
然后是json文件的一些數(shù)據(jù)，如下
{ "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" }}之后定義一個服務(wù)，定義個方法用來配置獲取json文件的ajax請求的地址，主方法是發(fā)送ajax并且對結(jié)果進行循環(huán)寫入路由狀態(tài)。
'use strict'angular.module('Routing', ['ui.router']) .provider('router', function ($stateProvider) { var urlCollection; this.$get = function ($http, $state) { return { setUpRoutes: function () { $http.get(urlCollection).success(function (collection) { for (var routeName in collection) { if (!$state.get(routeName)) { $stateProvider.state(routeName, collection[routeName]); } } }); } } }; this.setCollectionUrl = function (url) { urlCollection = url; } })最后是最關(guān)鍵的angular配置階段和運行階段的代碼，配置階段要求至少給出一種狀態(tài)，如$stateProvider.state('home', {url: '/home',templateUrl: 'templates/home.html'});
并且將默認狀態(tài)配置好$urlRouterProvider.otherwise('/home');隨后調(diào)用上面的服務(wù)的setCollectionUrl 方法對url地址進行配置，方便發(fā)送ajax請求，最后在angular的運行階段的run方法中調(diào)用setUpRoutes方法將json文件的數(shù)據(jù)根據(jù)一定的格式進行狀態(tài)的動態(tài)寫入，代碼如下：
angular.module('App', ['ui.router', 'Routing']) .config(function ($stateProvider, $urlRouterProvider, routerProvider) { $stateProvider .state('home', { url: '/home', templateUrl: 'templates/home.html' }); $urlRouterProvider.otherwise('/home'); routerProvider.setCollectionUrl('js/routeCollection.json'); }) .run(function (router) { router.setUpRoutes(); });此，動態(tài)獲取angular路由狀態(tài)的例子就介紹完了，感興趣的可以看下原文地址和原文代碼的github，分別如下：
github上用git clone下來之后，會看到項目中有個bower.json文件，并且沒有上述的兩個js文件，我們只需在工程中使用node的包管理器npm下載bower，然后在該項目的命令行中輸入bower install 即可下載下來項目要用到的js文件。
以上所述是小編給大家介紹的Angularjs根據(jù)json文件動態(tài)生成路由狀態(tài)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
