[英]Getting error on AngularJS (controller not registered) using ocLazyLoad + ui-router
I've been trying to make ocLazyLoad work on my project, but I keep getting this Angular error 我一直在尝试使ocLazyLoad在我的项目上工作,但我一直收到此Angular错误
Error: $controller:ctrlreg A controller with this name is not registered
错误:$ controller:ctrlreg未注册具有该名称的控制器
The controller with the name 'eventoCtrl' is not registered.
未注册名称为“ eventoCtrl”的控制器。
NOTICE: I'm also using ui-router to define my app's states. 注意:我也在使用ui-router定义我的应用程序状态。
NOTICE #2: Any suggestion on other methods of using routes or lazy loads will also be apreciated 注意#2:关于使用路线或延迟加载的其他方法的任何建议也将不胜感激
app.js app.js
(function(){
angular
.module('kulchr', [
'ui.router',
'oc.lazyLoad'
]);})();
config.js config.js
angular
.module('kulchr')
.config(function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
$stateProvider
.state('eventos', {
url: '/eventos',
views: {
'top-menu-nav': {
templateUrl: 'templates/top-menu-nav.html',
},
'main': {
templateUrl: 'templates/eventos.html',
controller: 'eventoCtrl as listaEvento',
resolve: {
eventoCtrl: function ($ocLazyLoad) {
return $ocLazyLoad.load(
{
files: ['controller/listaEventoController.js'
,'service/eventoService.js']
});
}
}
}
}
});
$urlRouterProvider.otherwise('/');
});
controller 调节器
(function() {
'use strict';
angular
.module('kulchr')
.controller('eventoCtrl', ListaEventoController);
ListaEventoController.$inject = ['servicoEvento'];
function ListaEventoController(evento){
var vm = this;
var promise = evento.buscaDados();
promise.then (function(response){
vm.eventos = response.data;
})
}
})();
service 服务
(function() {
'use strict';
angular
.module('kulchr')
.service('servicoEvento', Evento);
function Evento($http, $q) {
var d = $q.defer();
var self = this;
$http.get('/mockup-data/eventos.json')
.then(function (response){
d.resolve(response);
}, function(reason) {
console.log("Motivo: " + reason.data +
"Status: " + reason.status +
" - " + reason.statusText);
return $q.reject(reason);
});
self.buscaDados = function(){
return d.promise;
}
}
})();
What am I missing here? 我在这里想念什么? I've reached the ui-router documentation but it just made more confused
我已经到达了ui-router文档,但更加困惑了
BTW, Everything is working fine when adding the files directly on the index.html file using . 顺便说一句,使用将文件直接添加到index.html文件时,一切工作正常。
Currently what happening is, your listaEventoController
is haven't goad loaded when named view
is rendering. 当前发生的情况是,渲染
named view
时,您的listaEventoController
尚未加载。 The reason being is resolve
object has been used in wrong place. 原因是
resolve
对象已在错误的地方使用。 It doesn't work on named view level. 它不适用于命名视图级别。 It should taken out and keep it after
url
(flatten property) inside state definition object. 应该将其取出并保存在状态定义对象内的
url
(flatten属性)之后。
By taking resolve
out oc-lazyLoad
module will take care of downloading listaEventoController
& eventoService
file from server and would make download service register inside angular context and available to use inside angular application. 通过
resolve
, oc-lazyLoad
模块将负责从服务器下载listaEventoController
和eventoService
文件,并使下载服务在angular上下文中注册并可以在angular应用程序中使用。
Code 码
$stateProvider
.state('eventos', {
url: '/eventos',
views: {
'top-menu-nav': {
templateUrl: 'templates/top-menu-nav.html',
},
'main': {
templateUrl: 'templates/eventos.html',
controller: 'eventoCtrl as listaEvento'
}
},
//moved resolve out from "named view" object.
resolve: {
eventoCtrl: function ($ocLazyLoad) {
return $ocLazyLoad.load({
files: [
'controller/listaEventoController.js',
'service/eventoService.js'
]
}
);
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.