欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Angularjs根据json文件动态生成路由状态的实现方法

程序员文章站 2022-04-29 08:58:39
项目上有一个新需求，就是需要根据json文件动态生成路由状态，查阅了一下资料，现在总结一下发出来： 首先项目用到的是angular的ui-路由，所以必须引入angular...

项目上有一个新需求，就是需要根据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文件动态生成路由状态，希望对大家有所帮助

上一篇： vue 怎么创建组件及组件使用方法

下一篇： AngularJS监听路由变化的方法

推荐阅读