AngularJS狀態加載

Question

我想從使用ui-router-extras的JSON文件動態加載狀態。 JSON文件如下所示：

[ 
 
    { 
 
    "name": "app", 
 
    "url": "/app", 
 
    "abstract": "true", 
 
    "resolve": "helper.resolveFor('fastclick', 'modernizr', 'icons')" 
 
    
 
    }, 
 
    { 
 
    "name": "login", 
 
    "url": "/login", 
 
    "title": "User Login", 
 
    "templateUrl": "", 
 
    "redirectToLogin": "true" 
 
    }, 
 
    { 
 
    "name": "dashboard", 
 
    "url": "/dashboard", 
 
    "title": "Dashboard", 
 
    "templateUrl": "helper.basepath('dashboard.html')", 
 
    "resolve": "helper.resolveFor('flot-chart', 'flot-chart-plugins', 'weather-icons')" 
 
    
 
    } 
 
]

以下是路由配置文件：

(function() { 
'use strict'; 

angular 
    .module('app.routes') 
    .config(routesConfig); 

routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', 'RouteHelpersProvider', '$stateProvider', '$futureStateProvider']; 
function routesConfig($stateProvider, $locationProvider, $urlRouterProvider, helper, $sp, $fsp) { 

    $locationProvider.html5Mode(false); 

    var futureStateResolve = function($http) { 
     return $http.get("states.json").then(function (response) { 
      console.log(response.data); 
      angular.forEach(response.data, function (state) { 

       $sp.state(state); 
       }) 
      }) 
     } 
    $fsp.addResolve(futureStateResolve); 

     // defaults to dashboard 
    $urlRouterProvider.otherwise('/app/login'); 
    } 
})(); 

的/login狀態工作正常，但其他人不工作，給出錯誤'invocables must be object'。我認爲這是因爲helper.basepath()和helper.resolveFor()函數不起作用，因爲它們是來自JSON的字符串。

我該怎麼辦？

Answer 1

我的建議與@charlietfli相同。我會詳細說明。

由於您已經創建了一個返回您的解析塊的幫助函數，因此您可以輕鬆解決JSON不支持JS代碼或表達式這一事實。

您的幫助函數將字符串列表作爲參數。 JSON支持字符串數組。將您的JSON從此更改爲："resolve": "helper.resolveFor('fastclick', 'modernizr', 'icons')"至此："resolve": ["fastclick", "modernizr", "icons"]。現在，JSON解析包含一個簡單的字符串數組。

加載狀態時，首先使用助手將數組轉換爲解析塊，然後註冊它們。

var futureStateResolve = function($http) { 
    return $http.get("states.json").then(function (response) { 
     angular.forEach(response.data, function (state) { 
      // The array of strings from the JSON 
      var stringArgs = state.resolve; 
      // If present, convert to a resolve: object and put back on the state definition 
      if (stringArgs) state.resolve = helper.resolveFor.apply(helper, stringArgs); 
      $sp.state(state); 
     }) 
    }) 
} 
$fsp.addResolve(futureStateResolve); 

---

這應該回答你的問題。但是，我注意到你正在使用來自ui-router-extras的未來狀態，但是你並不是懶加載代碼（控制器或整個javascript角模塊）本身。通常情況下，您將使用$futureStateProvider註冊未來狀態，而不是直接使用$stateProvider。你在做什麼沒有問題（延遲加載狀態定義並利用來自未來狀態的延遲UI路由器引導）。但是，您可以在不依賴於ui-router-extras庫的情況下實現相同的目的。

這是你如何會懶洋洋地添加狀態定義沒有UI的路由器演員：

Angular - UI Router - programmatically add states

這是如何從解析URL，直到你完成添加狀態定義推遲UI路由器：

Angular ui-router and ocLazyLoad