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

Question

I've been trying to make ocLazyLoad work on my project, but I keep getting this Angular error

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

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

---

NOTICE: I'm also using ui-router to define my app's states.

NOTICE #2: Any suggestion on other methods of using routes or lazy loads will also be apreciated

---

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

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

BTW, Everything is working fine when adding the files directly on the index.html file using .

Answer 1

Currently what happening is, your listaEventoController is haven't goad loaded when named view is rendering. The reason being is resolve object has been used in wrong place. It doesn't work on named view level. It should taken out and keep it after url(flatten property) inside state definition object.

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.

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