如何使用JSON在AngularJS中動態創建路由？

Question

我有一個JSON文件，其中包含頁面的路由詳細信息。 如何為Angular視圖創建動態路線 ？

Answer 1

路由是通過$ routeProvider的API定義的。 並且提供程序僅在配置階段可用。 這意味着，在配置路由后，您將無法執行http請求以從服務器獲取數據，例如帶有路由配置的JSON文件。

我可能建議您將JSON文件轉換為角度常數。

// route.constants.js
angular
    .module('app')
    .constant('ROUTES', [
         {url: '/some-url', templateUrl: '/path/to/template.html', controller: 'MyCtrl'},
         ...
    ]);

由於常量在配置階段可用，因此可以將ROUTE注入.config() 。 然后，您可以遍歷ROUTES數組中的項目並配置$routeProvider ：

// route.config.js
angular
    .module('app')
    .config(['$routeProvider', 'ROUTES', function($routeProvider, ROUTES) {
        ROUTES.forEach(function(route) {
            $routeProvider.when(route.url, {
                 templateUrl: route.templateUrl,
                 controller: route.controller
            });
        });
    }])