项目上有一个新需求，就是需要根据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文件。

angular js根据json文件动态生成路由状态的更多相关文章

  1. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  2. .net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml)

    .net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml) 首先设置 Startup.cs 文件 配置 ConfigureServices services .Add ...

  3. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  4. 使用maven根据JSON文件自动生成Java POJO类（Java Bean）源文件

    根据JSON文件自动生成Java POJO类(Java Bean)源文件 本文介绍使用程序jsonschema2pojo来自动生成Java的POJO类源文件,本文主要使用maven,其他构建工具请参考 ...

  5. js vs2013中允许js访问json文件的解决方案

    js  vs2013中允许js访问json文件的解决方案 <?xml version="1.0" encoding="utf-8"?> <!- ...

  6. Angular Npm Package.Json文件详解

    Angular7 Npm Package.Json文件详解   近期时间比较充裕,正好想了解下Angular Project相关内容.于是将Npm官网上关于Package.json的官方说明文档进行了 ...

  7. FileSaver.js导出json文件和文本

    最近刚刚写了个json数据导出生成Excel文件的,顺便总结下利用FileSaver.js导出其他文件的,这里要注意的一个点就是,当导出的是json文件或是txt文件时,导出的内容要是字符串,特别当时 ...

  8. 跨域jsonp+jQuery+json+html动态生成表格

    1.什么是跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 凡是拥有scr这个属性 ...

  9. JS读取json 文件

    json文件是一种轻量级的数据交互格式.一般在jquery中使用getJSON()方法读取. $.getJSON(url,[data],[callback]) url:加载的页面地址 data: 可选 ...

随机推荐

  1. mysql原生sql处理，按逗号拆分列为多行

    举例: id value 1 1,2,3,4 2 2,3,4,5,6 拆分成: id value 1 1 2 2 3 3 4 4 5 5 6 6 ),) ) distinct:去重复操作 a.valu ...

  2. Nginx配置proxy_pass转发/路径问题

    proxy_ignore_client_abort on; #不允许代理端主动关闭连接 upstream的负载均衡,四种调度算法 #调度算法1:轮询.每个请求按时间顺序逐一分配到不同的后端服务器,如果 ...

  3. Python3基础 print %xX 十六进制大小写

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  4. springMVC返回json数据乱码问

    在springMVC controller中返回json数据出现乱码问题,因为没有进行编码,只需要简单的注解就可以了 在@RequestMapping()中加入produces="text/ ...

  5. ubuntu解决网络连接的优先级

    ubuntu下无线连接网络,有线连接板卡,解决网络连接的优先级 1. 查看网关  ip route show dev wlp2s0 proto kernel scope link src dev wl ...

  6. wms证书异常问题

    目前我司已定位到两个原因,详细如下, 1.  快速生成的证书存在问题,导致APACHE和NGINX显示的时间都是4号凌晨 2.  贵司在配置完成162和163两台应用的APACHE证书,以及其中10. ...

  7. 类加载器ClassLoader源码解析

    1.ClassLoader作用 类加载流程的"加载"阶段是由类加载器完成的. 2.类加载器结构 结构:BootstrapClassLoader(祖父)-->ExtClassL ...

  8. mysql 得到指定时间段的日期

    set @startDate='2019-01-01'; set @endDate='2019-04-01'; DAY) AS DAY FROM ( SELECT a.a ) AS a ) AS b ...

  9. 创建Observable序列

    1. just()方法 该方法通过传入一个默认值来初始化 下面样例我们显示地标注出了observable的类型为Observable, 即指定了这个Observable所发出的事件携带的数据类型必须是 ...

  10. Nginx添加静态页面

    1.编辑配置文件 sudo vim /etc/nginx/nginx.conf 在http {}中添加如下 server { listen 80; server_name localhost; loc ...