angularjs throws Error: [ng:areq] in resolving the lazyloading the scripts and adding a view controller separately

angularjs throws Error: [ng:areq] in resolving the lazyloading the scripts and adding a view controller separately

我不知道为什么第一个状态有效而第二个状态无效:

工作状态:

.state('app.pages.invoice', {
        url: '/invoice',
        templateUrl: "assets/views/pages_invoice.html",
        title: 'Invoice',
        resolve: {
            "currentAuth": ["Auth", function(Auth) {
                return Auth.$requireSignIn();
            }]
        }

    })

非工作状态,抛出Error: [ng:areq]:

validationCtrl&p1=not%20aNaNunction%2C%20got%20undefined


.state('app.form.validation', {

        controller: "validationCtrl",

        url: '/validation',
        templateUrl: "assets/views/form_validation.html",
        title: 'Form Validate',

        resolve: {
            "currentAuth": ["Auth", function(Auth) {
                return Auth.$requireSignIn();
            }]
        }


    })


第二个仅在通过以下方式注入控制器时有效:

resolve: loadSequence('validationCtrl')

即(controller 被移入 resolve 并且不再有 currentAuth):

.state('app.form.validation', {

        url: '/validation',
        templateUrl: "assets/views/form_validation.html",
        title: 'Form Validate',

        resolve: loadSequence('validationCtrl')
    })

然后我不知道如何将我的 currentAuth 元素再次整合到 resolve 中。
如何通过 resolve 注入 validationCtrl.js 并将 currentAuth 元素也添加到 resolve ?

这里是加载序列函数:

// Generates a resolve object previously configured in constant.JS_REQUIRES (config.constant.js)
function loadSequence() {
    var _args = arguments;
    return {
        deps: ['$ocLazyLoad', '$q',
        function ($ocLL, $q) {
            var promise = $q.when(1);
            for (var i = 0, len = _args.length; i < len; i++) {
                promise = promiseThen(_args[i]);
            }
            return promise;

            function promiseThen(_arg) {
                if (typeof _arg == 'function')
                    return promise.then(_arg);
                else
                    return promise.then(function () {
                        var nowLoad = requiredData(_arg);
                        if (!nowLoad)
                            return $.error('Route resolve: Bad resource name [' + _arg + ']');
                        return $ocLL.load(nowLoad);
                    });
            }

            function requiredData(name) {
                if (jsRequires.modules)
                    for (var m in jsRequires.modules)
                        if (jsRequires.modules[m].name && jsRequires.modules[m].name === name)
                            return jsRequires.modules[m];
                return jsRequires.scripts && jsRequires.scripts[name];
            }
        }]
    };
}


我的第一个状态没有任何控制器,所以我可以单独解决 currentAuth。但是当视图有控制器时,添加 currentAuth 会导致控制器不再工作。

注:

我的 currentAuth 取自 here

更新:

这里是 validationCtrl.js:

    app.controller('ValidationCtrl', ["$scope", "$state", "$timeout", "SweetAlert", "$location",
        function ($scope, $state, $timeout, SweetAlert, $location) {
...

更新 2:

基本上,问题是只允许当前登录的用户查看 app. 的子页面;所以我的父视图是这样的:所以基本上我希望将 currentAuth 工厂注入主父视图,子视图应该继承它。除非解决父级中的 currentAuth,否则无法查看它们。

$stateProvider.state('app', {
    url: "/app",
    templateUrl: "assets/views/app.html",
    resolve: loadSequence('modernizr', 'moment', 'angularMoment', 'uiSwitch', 'perfect-scrollbar-plugin', 'toaster', 'ngAside', 'vAccordion', 'sweet-alert', 'chartjs', 'tc.chartjs', 'oitozero.ngSweetAlert', 'chatCtrl'),
    abstract: true
})

编辑 1:

我把这个问题换句话说 well 在这里,并试图找到多个解决状态的答案。

编辑 2:

这里是main.js:pastebin url

和 validationCtrl.js pastebin url.
实际上,validationCtrl 只是我拥有的其他控制器中的一个示例控制器。
问题是如何阻止子视图的查看权限,除非父 currentAuth 已解决?鉴于我不知道如何使用 loadsequence 和单例工厂处理多重解析。

先来报错

Error: [ng:areq]: validationCtrl&p1=not%20aNaNunction%2C%20got%20undefined

controller: "validationCtrl", change it according to the main controller
that is

这意味着没有validationCtrl功能。

我可能错了,但我认为你的控制器中的这一行有一个小错字controller: "validationCtrl",请根据 **main controller** controller: "ValidationCtrl" 进行更改 即

发生此错误的原因是在包含不同参数的不同文件中定义了两个具有相同名称的 angular.modules,因为您可能正在尝试实施 dependancy 注入。

它会导致问题,因为在您的 html 主文件中加载的脚本不知道要配置哪个 angular.module。

要解决此问题,请定义具有不同名称的 angular.module。

How to block view permission for child views unless the parent currentAuth is resolved

您可以使用成功和回调函数安装此包 angular middlewareThis middleware package contains some pre-defined route functions or you can also create your own functions.Along with this $http 文档,您可以在使用 singleton 工厂时创建自己的 middlewareauth 服务

假设您使用 node.js 作为您的 backend,您可以使用 express 在您的服务器中使用 [middleware][3] 路由并将其映射到前端路由。

Here是nodejs中间件认证的完美教程

假设您使用 ui 路由器 作为 SPA 应用程序的路由框架。

错误:[ng:areq]

你得到的错误:

validationCtrl&p1=not%20aNaNunction%2C%20got%20undefined

是由于controller在state中的声明,controller function的名称没有解析,因为"ValidationCtrl" 不等于"validationCtrl" 那么正确的state是:

.state('app.form.validation', {

    controller: "ValidationCtrl",

    url: '/validation',
    templateUrl: "assets/views/form_validation.html",
    title: 'Form Validate',

    resolve: {
        "currentAuth": ["Auth", function(Auth) {
            return Auth.$requireSignIn();
        }]
    }


})

抽象状态 - 嵌套状态

回答第二个问题,一个对你的情况有用的例子可能是这样的:

    $stateProvider.state('app', {
    url: "/app",
    templateUrl: "assets/views/app.html",
    resolve: { 
    scripts: loadSequence('modernizr', 'moment', 'angularMoment', 'uiSwitch', 'perfect-scrollbar-plugin', 'toaster', 'ngAside', 'vAccordion', 'sweet-alert', 'chartjs', 'tc.chartjs', 'oitozero.ngSweetAlert', 'chatCtrl').deps,
    currentAuth: function(Auth){ return Auth.$requireSignIn();}
    },
    abstract: true
})
.state('app.pages.invoice', {
        // url will become '/app/invoice'
        url: '/invoice',
        templateUrl: "assets/views/pages_invoice.html",
        title: 'Invoice'
        

    })
    .state('app.form.validation', {

        controller: "ValidationCtrl",
        // url will become '/app/validation'
        url: '/validation',
        templateUrl: "assets/views/form_validation.html",
        title: 'Form Validate'


    })

正如你在解析抽象状态的例子中看到的,你可以定义不同的工厂函数,ui路由器会等到所有的依赖关系都被解析后再解析子状态。

解决属性 解释:

The resolve property is a map object. The map object contains key/value pairs of:

key – {string}: a name of a dependency to be injected into the controller.

factory - {string|function}: If string, then it is an alias for a service. Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before the controller is instantiated and its value is injected into the controller.

有关详细信息,请参阅 ui router doc

正如我在评论中所说,我建议您尝试以下操作:

.state('app.form.validation', {

        url: '/validation',
        templateUrl: "assets/views/form_validation.html",
        title: 'Form Validate',
        controller: "validationCtrl",
        resolve:{
            "myCtrl": loadSequence('validationCtrl'),
             "currentAuth": ["Auth", function(Auth) {
                return Auth.$requireSignIn();
             }]
        }
    })

我评论的另一部分是关于 child states inherits parent's resolve 和 children 可以覆盖它的事实。

因此您可以执行以下操作:

.state('app', {
        // all states require logging by default
        resolve:{
             "currentAuth": ["Auth", function(Auth) {
                return Auth.$requireSignIn();
                // i'm guessing we're redirecting toward app.login if not logged
             }]
        }
    })
    .state('app.login', {
        resolve:{
          "currentAuth": ["Auth", function(Auth) {
                return true;// just be sure to not do infinite redirections
             }]
        }
    })

请注意,如果您因为 Auth 尚未加载延迟加载而遇到一些麻烦,您应该能够在 angular.run.

中加载它