溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目上有一個新需求，就是需要根據json文件動態生成路由狀態，查閱了一下資料，現在總結一下發出來：
首先項目用到的是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文件的一些數據，如下
{ "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并且對結果進行循環寫入路由狀態。
'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;
}
})
最后是最關鍵的angular配置階段和運行階段的代碼，配置階段要求至少給出一種狀態，如$stateProvider.state('home', {url: '/home',templateUrl: 'templates/home.html'});
并且將默認狀態配置好$urlRouterProvider.otherwise('/home');隨后調用上面的服務的setCollectionUrl 方法對url地址進行配置，方便發送ajax請求，最后在angular的運行階段的run方法中調用setUpRoutes方法將json文件的數據根據一定的格式進行狀態的動態寫入，代碼如下：
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();
})
;
此，動態獲取angular路由狀態的例子就介紹完了，感興趣的可以看下原文地址和原文代碼的github，分別如下：
github地址
github上用git clone下來之后，會看到項目中有個bower.json文件，并且沒有上述的兩個js文件，我們只需在工程中使用node的包管理器npm下載bower，然后在該項目的命令行中輸入bower install 即可下載下來項目要用到的js文件。
以上所述是小編給大家介紹的Angularjs根據json文件動態生成路由狀態，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
