項(xiàng)目上有一個(gè)新需求，就是需要根據(jù)json文件動(dòng)態(tài)生成路由狀態(tài)，查閱了一下資料，現(xiàn)在總結(jié)一下發(fā)出來(lái)：

創(chuàng)新互聯(lián)建站專(zhuān)業(yè)為企業(yè)提供黃陵網(wǎng)站建設(shè)、黃陵做網(wǎng)站、黃陵網(wǎng)站設(shè)計(jì)、黃陵網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、黃陵企業(yè)網(wǎng)站模板建站服務(wù)，10年黃陵做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

首先項(xiàng)目用到的是angular的UI-路由，所以必須引入angular.js和angular-ui-router.js兩個(gè)js文件，如下例子：

  
  
  
  
  
  


reload
xxx
yyy

然后是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"
  }
}

之后定義一個(gè)服務(wù)，定義個(gè)方法用來(lái)配置獲取json文件的ajax請(qǐng)求的地址，主方法是發(fā)送ajax并且對(duì)結(jié)果進(jìn)行循環(huán)寫(xiě)入路由狀態(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配置階段和運(yùn)行階段的代碼，配置階段要求至少給出一種狀態(tài)，如$stateProvider.state('home', {url: '/home',templateUrl: 'templates/home.html'});

并且將默認(rèn)狀態(tài)配置好$urlRouterProvider.otherwise('/home');隨后調(diào)用上面的服務(wù)的setCollectionUrl 方法對(duì)url地址進(jìn)行配置，方便發(fā)送ajax請(qǐng)求，最后在angular的運(yùn)行階段的run方法中調(diào)用setUpRoutes方法將json文件的數(shù)據(jù)根據(jù)一定的格式進(jìn)行狀態(tài)的動(dòng)態(tài)寫(xiě)入，代碼如下：

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();
  })
;

此，動(dòng)態(tài)獲取angular路由狀態(tài)的例子就介紹完了，感興趣的可以看下原文地址和原文代碼的github，分別如下：

github地址

 github上用git clone下來(lái)之后，會(huì)看到項(xiàng)目中有個(gè)bower.json文件，并且沒(méi)有上述的兩個(gè)js文件，我們只需在工程中使用node的包管理器npm下載bower，然后在該項(xiàng)目的命令行中輸入bower install 即可下載下來(lái)項(xiàng)目要用到的js文件。

以上所述是小編給大家介紹的Angularjs根據(jù)json文件動(dòng)態(tài)生成路由狀態(tài)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！