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


Posted in Javascript onApril 17, 2017

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

Javascript 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
微信小程序实战之轮播图(3)
Apr 17 #Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 #Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 #Javascript
微信小程序教程系列之新建页面(4)
Apr 17 #Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 #Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 #Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 #Javascript
You might like
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
在php中取得image按钮传递的name值
2006/10/09 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
php中apc缓存使用示例
2013/12/25 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
Python中的探索性数据分析(功能式)
2017/12/22 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
python查看列的唯一值方法
2018/07/17 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
倡议书的写法
2014/08/30 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
2014年店长工作总结
2014/11/17 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
感恩节寄语2015
2015/03/24 职场文书
化验室安全管理制度
2015/08/06 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android