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判断IE6等浏览器的代码
Apr 05 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
基本DOM节点操作
Jan 17 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
JavaScript 中的六种循环方法
Jan 06 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
Ajax PHP分页演示
2007/01/02 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jquery使用经验小结
2015/05/20 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
给面试官的感谢信
2014/02/01 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
如何用PHP实现多线程编程
2021/05/26 PHP
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js