angular js根据json文件动态生成路由状态
项目上有一个新需求，就是需要根据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文件。
- 上一篇 »python-图片流传输，url转换二维码
- 下一篇 »angular 路由传参