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 相关文章推荐
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
微信小程序日历弹窗选择器代码实例
May 09 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读取RSS feed的代码
2008/08/01 PHP
php自定义hash函数实例
2015/05/05 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
图片按比例缩放函数
2006/06/26 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
婚礼主持词开场白
2014/03/13 职场文书
劳资协议书范本
2014/04/23 职场文书
产品包装策划方案
2014/05/18 职场文书
商场促销活动总结
2014/07/10 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
导游词之杭州西湖
2019/09/19 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers