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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
解决vue跨域axios异步通信问题
Apr 17 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
微信小程序地图实现展示线路
Jul 29 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
办公室综合文员岗位职责范本
2014/02/13 职场文书
小学生优秀评语大全
2014/04/22 职场文书
写给医生的感谢信
2015/01/22 职场文书
涨价通知
2015/04/23 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
golang json数组拼接的实例
2021/04/28 Golang
MySQL 全文索引使用指南
2021/05/25 MySQL
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android