使用 ocLazyLoad + ui-router 在 AngularJS（控制器未注册）上出现错误

Question

我一直在尝试让 ocLazyLoad 在我的项目上运行，但我一直收到此 Angular 错误

Error: $controller:ctrlreg A controller with this name is not registered

The controller with the name 'eventoCtrl' is not registered.

注意：我也在使用 ui-router 来定义我的应用程序的状态。

注意 #2：关于使用路由或延迟加载的其他方法的任何建议也将得到赞赏

app.js

(function(){
angular
    .module('kulchr', [
      'ui.router',
      'oc.lazyLoad'
    ]);})();

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('/');
});

控制器

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

    }
})();

服务

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

})();

我在这里错过了什么？我已经找到了 ui-router 文档，但它让我更加困惑

顺便说一句，使用 .

将文件直接添加到 index.html 文件时一切正常

Answer 1

目前发生的情况是，当 named view 正在渲染时，您的 listaEventoController 尚未加载。原因是 resolve 对象用在了错误的地方。它不适用于命名视图级别。它应该在url(flatten 属性)之后取出并保留在状态定义对象中。

通过将 resolve 取出 oc-lazyLoad 模块将负责从服务器下载 listaEventoController 和 eventoService 文件，并使下载服务在 angular 中注册上下文并可在 angular 应用程序中使用。

代码

$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'
                ]
             }
          );
       }
    }
})

使用 ocLazyLoad + ui-router 在 AngularJS（控制器未注册）上出现错误

Getting error on AngularJS (controller not registered) using ocLazyLoad + ui-router

javascript

angularjs

angular-ui-router

oclazyload