Question

我尝试使用ui-router-extras从JSON文件动态加载状态。 JSON文件如下所示：

＆＃13;

    [
  {
    "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')"
   
  }
]

＆＃13;

以下是路线配置文件：

(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”必须是对象＆＃39;。我认为这是因为helper.basepath()和helper.resolveFor()函数不起作用，因为它们是来自JSON的字符串。

我该怎么办？

Answer 1

我的建议与@charlietfli相同。我会详细说明。

由于您已经创建了一个返回解析块的辅助函数，因此您可以轻松解决JSON不支持JS代码或表达式的问题。

您的帮助函数将字符串列表作为参数。 JSON支持字符串数组。将您的JSON从此"resolve": "helper.resolveFor('fastclick', 'modernizr', 'icons')"更改为："resolve": ["fastclick", "modernizr", "icons"]。现在，JSON resolve包含一个简单的字符串数组。

加载状态时，首先使用助手将数组转换为解析块，然后注册它们。

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-router引导程序）没有错。但是，您可以实现相同的功能，而不依赖于ui-router-extras库。

这是你在没有ui-router-extras的情况下懒惰添加状态定义的方法：

Angular - UI Router - programmatically add states

这是你可以推迟ui-router解析url直到你完成添加状态定义的方法：

Angular ui-router and ocLazyLoad

AngularJS状态加载

1 个答案: