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 一样。我会详细说明。

由于您已经创建了一个 returns 您的解析块的辅助函数，因此您可以轻松解决 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 angular 模块）本身。通常，您使用 $futureStateProvider 注册未来状态，而不是直接使用 $stateProvider。您正在做的事情没有任何问题（延迟加载状态定义并利用来自未来状态的延迟 ui-router bootstrap）。但是，您可以在不依赖 ui-router-extras 库的情况下实现相同的目的。

这就是在没有 ui-router-extras 的情况下延迟添加状态定义的方式：

Angular - UI Router - programmatically add states

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

Angular ui-router and ocLazyLoad

AngularJS 状态加载

AngularJS state loading

angularjs

angular-ui-router

angular-ui-router-extras