1

我正在尝试使用ui-router-extras. 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 的字符串。

我该怎么办？

4

1 回答 1

1

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

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

您的辅助函数将字符串列表作为参数。JSON 支持字符串数组。将您的 JSON 从 this: 更改"resolve": "helper.resolveFor('fastclick', 'modernizr', 'icons')"为 this: "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-router 引导程序）。但是，您可以在不依赖 ui-router-extras 库的情况下实现相同的目标。

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

Angular - UI 路由器 - 以编程方式添加状态

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

Angular ui-router 和 ocLazyLoad

于 2016-01-24T19:10:18.983 回答