时间:2021-05-28
项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来:
首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui-router.js两个js文件,如下例子:
然后是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文件动态生成路由状态,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
AngularJS路由本章节我们将为大家介绍AngularJS路由。AngularJS路由允许我们通过不同的URL访问不同的内容。通过AngularJS可以实现
本文实例讲述了AngularJS实现根据变量改变动态加载模板的方法。分享给大家供大家参考,具体如下:directive:return{restrict:'E',
最近做一个需求,需求中的bean只用于生成一次json使用,所以想通过配置来动态的生成,查了一下,java还真有这个实现。java动态的生成javabean,只
1、问题背景给定一个数组对象,里面是div的id;循环生成div元素,并给id赋值2、实现源码AngularJS动态生成div的IDvarapp=angular
用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。思路如下:一、定义初始化默认路由。二、动态配置路由,这里是把所有组件中相应的路由配置