AngularJS - 具有 UI-Router 视图和 $ocLazyLoad 解析语法的动态 $StateProvider

Question

我目前有一个很好的工作静态版本被问到我的问题。问题是，在循环中尝试使用 $StateProvider 时，我似乎无法正确格式化 JSON。我不确定哪个部分没有正确格式化导致“未定义不是函数”错误。但下面是我的工作静态状态定义，其中包含视图并使用 $ocLazyLoad 解决。这行得通，真的不知道为什么我的循环中的 JSON 版本版本不行？

工作静态版本 - 这绝对适合我

// ABSTRACT APP LAYOUT - VIEW THAT DEFINES ENTIRE LAYOUT STRUCTURE
$stateProvider
    .state('app', {
        abstract: true,
        controller: 'LayoutCtrl',
        templateUrl: 'app/components/core/layout/layout.html'

    });

// VIEWS
// CURRENT LAZY LOADING WAS REFERENCED FROM HERE - https://egghead.io/lessons/angularjs-lazy-loading-modules-with-ui-router-and-oclazyload
$stateProvider
    .state('app.dashboard', {
        views: {
            'feature': {
                templateUrl: 'lazyload/components/core/features/dashboard/dashboard.html',
                controller: "DashboardCtrl as dashboard",
                resolve: {
                    dashboard: function ($ocLazyLoad) {
                        return $ocLazyLoad.load(
                            {
                                name: "dashboard",
                                files: ["lazyload/components/core/features/dashboard/dashboard-controller.js"]
                            }
                        )
                    }
                }
            }
        }
    })
    .state('app.other-feature', {
        views: {
            'feature': {
                templateUrl: 'lazyload/components/core/features/other-feature/other-feature.html',
                controller: "OtherFeatureCtrl as otherFeature",
                resolve: {
                    otherFeature: function ($ocLazyLoad) {
                        return $ocLazyLoad.load(
                            {
                                name: "otherFeature",
                                files: ["lazyload/components/core/features/other-feature/other-feature.js"]
                            }
                        )
                    }
                }

            }
        }
    });

我想澄清一下，静态版本确实有效，它是循环版本我似乎无法正常工作。也许我没有正确地为函数做某种数组表示法或其他什么？非常感谢任何帮助！

Answer 1

我实际上得到了这个工作，并想分享答案和代码格式，以防任何人有兴趣看到一个工作独立数组，该数组带有一个添加抽象状态和子状态的循环，使用的视图解决了延迟加载控制器和文件在通过 $ocLazyLoad 模块加载路由之前动态地加载。

我认为仅凭代码就可以帮助那些比我更努力的人。

var states = [
    { "name": "app", "abstract": true, "url": "", "templateUrl": "app/components/core/layout/layout.html", "controller": "LayoutCtrl" },
    {
        "name": "app.dashboard",
        "views": {
            "feature": {
                "templateUrl": "lazyload/components/core/features/dashboard/dashboard.html",
                "controller": "DashboardCtrl as dashboard",
                "resolve": {
                    "dashboard": function ($ocLazyLoad) {
                        return $ocLazyLoad.load(
                            {
                                "name": "dashboard",
                                "files": ["lazyload/components/core/features/dashboard/dashboard-controller.js"]
                            }
                        )
                    }
                }
            }
        }
    },
    {
        "name": "app.associations_hospital-surgeon",
        "views": {
            "feature": {
                "templateUrl": "lazyload/components/core/features/other-feature/other-feature.html",
                "controller": "OtherFeatureCtrl as otherFeature",
                "resolve": {
                    "otherFeature": function ($ocLazyLoad) {
                        return $ocLazyLoad.load(
                            {
                                "name": "otherFeature",
                                "files": ["lazyload/components/core/features/other-feature/other-feature.js"]
                            }
                        )
                    }
                }
            }
        }
    }
];

angular.forEach(states, function (state) {
    console.log('state --------------------------------------------------------------------------');
    console.log(state);
    $stateProvider.state(state.name, state);
});

在这里，我装饰了 JSON，以便可以从服务器加载它，但由于函数在 JSON 文件中无效，因此使用自定义数据属性来定义使用时附加的函数似乎对我有用。这让我可以从外部或从服务器加载文件，并在需要时仍然通过 $ocLazyLoad 作为函数使用延迟加载。

var states = [
    { "name": "app", "abstract": true, "url": "", "templateUrl": "app/components/core/layout/layout.html", "controller": "LayoutCtrl" },
    {
        "name": "app.dashboard",
        "views": {
            "feature": {
                "templateUrl": "lazyload/components/core/features/other-feature/other-feature.html",
                "controller": "DashboardCtrl as dashboard",
                "resolve": {},
                "data": {
                    "controllerAlias": "dashboard",
                    "controllerFiles": ["lazyload/components/core/features/other-feature/other-feature.js"]
                }
            }
        }
    },
    {
        "name": "app.associations_hospital-surgeon",
        "views": {
            "feature": {
                "templateUrl": "lazyload/components/core/features/associations/other-feature.html",
                "controller": "OtherFeatureCtrl as otherFeature",
                "resolve": {},
                "data": {
                    "controllerAlias": "otherFeature",
                    "controllerFiles": ["lazyload/components/core/features/other-feature/other-feature.js"]
                }
            }
        }
    }
];

angular.forEach(states, function (state) {
    console.log('state --------------------------------------------------------------------------');
    try{
        console.log(state.views.feature.resolve);
        state.views.feature.resolve[state.views.feature.data.controllerAlias] = function($ocLazyLoad){return $ocLazyLoad.load({"name": state.views.feature.data.controllerAlias,"files": state.views.feature.data.controllerFiles})};
    }catch(e){

    }

    $stateProvider.state(state.name, state);
});