项目上有一个新需求，就是需要根据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. thymeleaf和freemarker比较

    http://freemarker.cn/archives/168.html https://www.zhihu.com/question/64039553/answer/215942472 http ...

  2. Delaunay和Voronoi

    什么是Delaunay三角剖分? 图1:Delaunay三角剖分偏爱小角度 给定平面中的一组点,三角剖分指的是将平面细分为三角形,这些点为顶点.在图1中,我们在左侧图像上看到了一组地标,在中间图像上看 ...

  3. Java虚拟机解释器与JIT编译器

    一.JAVA编译相关概念 1.动态编译(dynamic compilation)指的是“在运行时进行编译”:与之相对的是事前编译(ahead-of-time compilation,简称AOT),也叫 ...

  4. java上传图片并压缩图片大小

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

  5. Js设置打印缩放

    近期需要优化一个打印项目,因为是固定长度,所以需要缩放打印,记录一下 //获取打印的页面内容 let subOutputRankPrint = document.getElementById('pri ...

  6. 创建Observer

    观察者 观察者作用就是监听事件, 然后对这个事件做出响应, 或者说任何响应时间的行为都是观察者 1. 在subscribe()方法中创建监听者 创建观察者最直接的方法就是在Observable的sub ...

  7. (原)使用ass字幕文件通过ffmpeg给视频添加字幕的一些研究

    使用ass字幕文件通过ffmpeg给视频添加字幕的一些研究 Author:lihaiping1603@aliyun.com Create:2019-09-04 最近对ffmpeg给视频文件添加字幕效果 ...

  8. （原）关于使用imagemagick将gif叠加到图片或者画布上的方法，以及疑难杂症

    今天因为项目过程中,有一个小需求,需要将一个指定的gif按照指定大小,叠加到画布的指定位置上,本来对于熟悉这块的人,简直就是小菜一碟哈,但本人因为对imagemagick的不熟悉,导致在这个需求上摸索 ...

  9. （转载）Pytorch中的仿射变换(affine_grid)

    转载于:Pytorch中的仿射变换(affine_grid) 参考:详细解读Spatial Transformer Networks (STN) 假设我们有这么一张图片:   下面我们将通过分别通过手 ...

  10. 工控随笔_22_关于Profibus网络接线的规则

    最近在做一个项目调试,用的是西门子的PLC,416-2 DP,下面挂了几个DP子网,在进行现场网络测试的时候,有几个走的DP网络的 绝对值编码器,无论怎么弄DP网络不能联通. 一开始我以为DP网线接的 ...