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文件动态生成路由状态，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章主要介绍了深入探究angular2 UI组件之primeNG用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
Angular使用ControlValueAccessor创建自定义表单控件
这篇文章主要介绍了Angular使用ControlValueAccessor创建自定义表单控件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
ng2学习笔记之bootstrap中的component使用教程
现在angular2已经除了集成的angular-cli，建议大家可以基于这个来快速开发ng2的项目，不用自己再搭建环境。接下来通过本文给大家介绍 bootstrap中的component使用教程,需要的朋友可以参考下2017-03-03
Angular 理解module和injector，即依赖注入
本文主要介绍Angular 理解module和injector的知识，这里整理了相关知识，并详细介绍了依赖注入的问题，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了使用Angular CLI生成路由的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
ng-events类似ionic中Events的angular全局事件
这篇文章主要介绍了ng-events类似ionic中Events的angular全局事件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Angular2 http jsonp的实例详解的相关资料,希望通过本能帮助到大家，需要的朋友可以参考下2017-08-08
Angular2中constructor和ngOninit的使用讲解
这篇文章主要介绍了Angular2中constructor和ngOninit的使用讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Angular1.x复杂指令,结合实例形式分析了指令的使用、模板指令、指令的作用域等概念与具体使用技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了Angular4中的checkbox 全选按钮启用禁用的相关资料,需要的朋友可以参考下2023-03-03
最新评论