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 ajax调用WCF服务实例
Jul 16 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
微信小程序实现九宫格抽奖
Apr 15 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
vue实现放大镜效果
Sep 17 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 向访客和爬虫显示不同的内容
2009/11/09 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
js实现烟花特效
2020/03/02 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Python实现简单的猜单词
2021/06/15 Python