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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
Vue.js学习示例分享
Feb 05 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js 深拷贝函数
2008/12/04 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
python类和函数中使用静态变量的方法
2015/05/09 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
WxPython实现无边框界面
2019/11/18 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
学生评语大全
2014/04/18 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
商场收银员岗位职责
2015/04/07 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
MySQL 原理与优化之Update 优化
2022/08/14 MySQL