【问题标题】:angularjs throws Error: [ng:areq] in resolving the lazyloading the scripts and adding a view controller separatelyangularjs 抛出错误:[ng:areq] 在解决延迟加载脚本和单独添加视图控制器时
【发布时间】:2016-10-12 20:20:25
【问题描述】:

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

工作状态:

.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')

即(控制器已移至解析中,不再存在 currentAuth):

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

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

        resolve: loadSequence('validationCtrl')
    })

然后我不知道如何将我的currentAuth 元素再次集成到解析中。
如何通过 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

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

【问题讨论】:

  • 您是否在控制器中定义了 CurrentAuth?你得到什么样的错误?
  • @ObasiObenyOj 正如文档github.com/firebase/angularfire/blob/master/docs/guide/… 所说,我只需要将它放入控制器和函数中,仅此而已,对吧?
  • 我可以查看您的完整验证Ctrl.js 和您的mainapp.js 文件吗?
  • @pritishvaidya 我用 pastebin 链接添加了更新。
  • 谢谢,我会尽力的:)

标签: javascript angularjs firebase-authentication angularfire


【解决方案1】:

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

错误:[ng:areq]

你得到的错误:

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

是由于在状态中声明了控制器,控制器函数的名称没有解析,因为“ValidationCtrl”不等于“validationCtrl”,那么正确的状态是:

.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路由器将等到所有依赖关系都解决后再解析子状态。

解析属性说明:

resolve 属性是一个地图对象。地图对象包含以下键/值对:

key – {string}:要注入控制器的依赖项的名称。

工厂 - {字符串|函数}: 如果是字符串,那么它是服务的别名。 否则,如果是函数,则将其注入并将返回值视为依赖项。如果结果是一个promise,它会在控制器被实例化之前被解析,并且它的值被注入到控制器中。

如需了解更多详情,请联系ui router doc

【讨论】:

  • 当我实现第二个问题嵌套解决方案的答案时出现此错误:pastebin.com/cGTztz4k 我认为是因为我的其他状态也有加载控制器和脚本的解析参数。
  • 其实应该可以,但是resolve里面的loadsequence函数会报错。
  • 检查我上次的编辑。我假设您可以在 app.config 中解析 loadSequence 函数。
  • 这次又出现了一个错误:angular.js:11655 Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=fn&amp;p1=not%20a%20function%2C%20got%20Object
  • 好的,我现在才注意到整个 loadSequence 函数都在“deps”中...检查最后一次编辑。
【解决方案2】:

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

.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 和孩子们可以覆盖它的事实。

所以您可以执行以下操作:

.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 中加载它。

【讨论】:

    【解决方案3】:

    先来个错误

    错误:[ng:areq]: 验证Ctrl&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.modules。

    除非父 currentAuth 已解决,否则如何阻止子视图的视图权限

    你可以安装这个包angular middleware这个middleware包包含一些pre-defined路由函数或者你也可以创建你自己的函数。连同这个使用成功和回调函数的$http文档,你可以创建使用 singleton 工厂时您自己的 middlewareauth 服务

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

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

    【讨论】:

    • 这不是我要找的答案。我已经有了护照,但我不再使用它了。我只想使用 Firebase 身份验证管理来管理视图。但由于我的观点是父/子,并且每个状态已经有一个适用于加载序列的解析,我不知道如何将 firebase auth check 引入这个链。
    • 所以基本上你只是想让用户成为 auth 然后路由到特定路由而不是其他路由?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-24
    • 1970-01-01
    • 2016-10-10
    • 1970-01-01
    • 2016-11-15
    • 1970-01-01
    相关资源
    最近更新 更多