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写的一个自定义弹出式对话框代码
Jan 17 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
vue抽出组件并传值实例
Jul 31 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数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
python连接mongodb密码认证实例
2018/10/16 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
详解python配置虚拟环境
2019/04/08 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
初中生期末考试的自我评价
2013/12/17 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
齐云山导游词
2015/02/06 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书