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