Angularjs根据json文件动态生成路由状态的实现方法

2019-11-19 16:48:21

字体：大中小

来源：转载

供稿：网友

项目上有一个新需求，就是需要根据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文件动态生成路由状态，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：jacascript DOM节点――元素节点、属性节点、文本节点

下一篇：微信小程序实战之轮播图（3）