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

AngularJS - Dynamic $StateProvider With UI-Router Views and $ocLazyLoad Resolves Syntax(AngularJS - 具有 UI-Router 视图和 $ocLazyLoad 解析语法的动态 $StateProvider)

问题描述

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

I currently have a good working static version of my question being asked. The issue is that I can't seem to format the JSON properly when trying to use $StateProvider in a loop. I'm not sure exactly what part isn't being formatted properly causing an "undefined is not a function" error. But below is my working static State definition with views and resolved using $ocLazyLoad. This works, really not sure why my JSON version version in a loop does not?

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

// 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"]
                            }
                        )
                    }
                }

            }
        }
    });

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

I'd like to be clear, the static version does work, it's the looped version I can't seem to get working. Perhaps I'm not doing some kind of array notation for the function properly or something? Any help is greatly appreciated!

推荐答案

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

I actually got this working and wanted to share the answer and code formatting in case anyone was interested in seeing a working standalone array with a loop that adds an Abstract state and child states with views that use resolves that lazy load controllers and files dynamically before the route is loaded via the $ocLazyLoad module.

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

I figured the code alone might help someone out there struggle less than I did.

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 作为函数使用延迟加载.

And here I decorate the JSON so it can be loaded from a server, but since functions aren't valid in JSON files this seemed to work for me using custom data properties used to define the function attached when used. This allowed me to load the file externally or from a server and still use the lazyloading via $ocLazyLoad as a function when needed.

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);
});

这篇关于AngularJS - 具有 UI-Router 视图和 $ocLazyLoad 解析语法的动态 $StateProvider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！