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

下面是“Angularjs根据json文件动态生成路由状态的实现方法”的完整攻略：

目录结构

- app/
  - js/
    - controllers/
      - homeController.js
      - aboutController.js
    - directives/
      - navbarDirective.js
    - services/
      - dataService.js
    - app.js
  - data/
    - routes.json
  - index.html

路由状态JSON文件(routes.json)

我们从一个JSON文件中读取路由状态信息：

{
  "home": {
    "url": "/home",
    "templateUrl": "templates/home.html",
    "controller": "homeController"
  },
  "about": {
    "url": "/about",
    "templateUrl": "templates/about.html",
    "controller": "aboutController"
  }
}

Route和Controller

接下来，我们需要在 AngularJS 中定义路由和控制器。

var app = angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'homeController'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'aboutController'
    });

  $locationProvider.html5Mode(true); // 使用 HTML5 模式，去掉 #!
});

app.controller('homeController', function($scope) {
  $scope.message = 'Home Page';
});

app.controller('aboutController', function($scope) {
  $scope.message = 'About Page';
});

读取路由状态信息

为了能够动态生成路由状态，我们需要一个 Service 来读取路由状态信息。我们可以定义一个名为 dataService 的 Service，从 routes.json 文件中读取路由状态信息，并将其放入 $rootScope 中：

app.service('dataService', function($http, $rootScope) {
  $http.get('data/routes.json').success(function(data) {
    $rootScope.routes = data;
  });
});

生成路由状态

最后，我们可以使用 ng-repeat 指令循环展示路由状态，并使用 ng-href 指令向该路由跳转。这样，在我们更新 routes.json 文件后，路由状态也会立即更新，无需修改代码。

<navbar>
  <ul>
    <li ng-repeat="(key, value) in routes">
      <a ng-href="#{{ value.url }}">{{ key }}</a>
    </li>
  </ul>
</navbar>

示例1：我们将 routes.json 文件中的路由信息修改为：

{
  "home": {
    "url": "/home",
    "templateUrl": "templates/home.html",
    "controller": "homeController"
  },
  "about": {
    "url": "/about",
    "templateUrl": "templates/about.html",
    "controller": "aboutController"
  },
  "contact": {
    "url": "/contact",
    "templateUrl": "templates/contact.html",
    "controller": "contactController"
  }
}

此时，我们无需修改代码，即可在页面上展示出新增的 contact 路由。

示例2：我们将 routes.json 文件中的路由信息修改为：

{
  "home": {
    "url": "/",
    "templateUrl": "templates/home.html",
    "controller": "homeController"
  },
  "about": {
    "url": "/about",
    "templateUrl": "templates/about.html",
    "controller": "aboutController"
  }
}

此时，我们无需修改代码，即可将默认路由设置为 home 路由。