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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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
zf框架的校验器InArray使用示例
2014/03/13 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php 问卷调查结果统计
2015/10/08 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
JS获取时间的方法
2015/01/21 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
初三化学教学反思
2014/01/23 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
捐书倡议书
2014/08/29 职场文书
政风行风评议工作总结
2014/10/21 职场文书
个人自荐书范文
2015/03/09 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
办公用品管理制度
2015/08/04 职场文书