Angularjs根据json文件动态生成路由状态的实现方法
项目上有一个新需求,就是需要根据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上用git clone下来之后,会看到项目中有个bower.json文件,并且没有上述的两个js文件,我们只需在工程中使用node的包管理器npm下载bower,然后在该项目的命令行中输入bower install 即可下载下来项目要用到的js文件。
以上所述是小编给大家介绍的angularjs根据json文件动态生成路由状态,希望对大家有所帮助