我不知道为什么第一个状态工作,但第二个状态不工作:
工作状态:
.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 =不是% 20 ananunction % 2 c % 20了% 20未定义的
.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?
下面是loadsequence函数:
// 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会导致控制器不再工作。
注意:
my currentAuth是从这里取的
更新:
这里是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:
我也把问题放在这里,并试图找到多个解决状态的答案。
编辑2:
和validationCtrl.js pastebin url。
实际上,validationCtrl只是我所有控制器中的一个示例控制器。
问题是如何阻止子视图的视图权限,除非父currentAuth被解决?鉴于我不知道如何处理多重解析与loadsequence和单例工厂。
假设你正在使用ui router作为你的SPA应用的路由框架
错误:[ng areq):
得到的错误:
validationCtrl& p1 =不是% 20 ananunction % 2 c % 20了% 20未定义的
是由于声明了控制器内的状态,控制器函数的名称没有解析因为"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'
})
正如你在解析抽象状态的例子中看到的,你可以定义不同的工厂函数,uirouter会等到所有的依赖都被解析后再解析子状态。
解析属性说明:
resolve属性是一个映射对象。map对象包含以下键/值对:
key - {string}:要注入到控制器中的依赖项的名称。
factory - {string|function}:如果是字符串,那么它就是服务的别名。否则,如果函数,则注入该函数,并将返回值视为依赖项。如果结果是promise,则在实例化控制器并将其值注入控制器之前解析它。
要了解更多细节,请参考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();
}]
}
})
我评论的另一部分是关于子状态继承父状态的决心,并且子状态可以覆盖它的事实。
所以你可以这样做:
.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
中加载它。
第一次出现错误
错误:[ng areq)::validationCtrl& p1 =不是% 20 ananunction % 2 c % 20了% 20未定义的
controller: "validationCtrl", change it according to the main controller
that is
这意味着没有validationCtrl函数。
我可能错了,但我认为在您的控制器controller: "validationCtrl"
中这一行有一个小错字,根据**main controller**
controller: "ValidationCtrl"
更改它这是
此错误是由于在不同的文件中定义了两个具有相同名称的angular.modules
,其中包含不同的参数,因为您可能试图实现dependancy
注入。
这会导致问题,因为加载到主html文件中的脚本不知道是哪个角。要配置的模块
要解决这个问题,请定义angular。不同名称的模块。
如何阻止子视图的视图权限,除非父视图currentAuth被解析
你可以安装这个包angular middlewareThis middleware
包包含一些pre-defined
路由函数,或者你也可以创建自己的函数。随着这个$http文档使用成功和回调函数,您可以创建自己的middleware
和auth
服务,同时使用singleton
工厂
或
假设你使用node.js
作为你的backend
,你可以使用[middleware][3]
路由在你的服务器上使用express并将其映射到前端路由。
这是一个关于nodejs中间件认证的完美教程