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 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
php post换行的方法
2020/02/03 PHP
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
MySQL学习必备条件查询数据
2022/03/25 MySQL