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地址

 github上用git clone下来之后，会看到项目中有个bower.json文件，并且没有上述的两个js文件，我们只需在工程中使用node的包管理器npm下载bower，然后在该项目的命令行中输入bower install 即可下载下来项目要用到的js文件。

posted @ 2017-04-17 16:46  王小伞  阅读(3687)  评论(3)  编辑  收藏  举报