Lazy boot angular controllers with ui-router resolution

Question

I am trying to work on angular.js, ui-router and require.js and feel pretty confused. I tried to follow this tutorial http://ify.io/lazy-loading-in-angularjs/ . First, let me show you my code:

app.js =>

var app = angular.module('myApp', []);
app.config(function ($stateProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
    $stateProvider.state('home',
        {
            templateUrl: 'tmpl/home-template.html',
            url: '/',
            controller: 'registration'
            resolve: {
                deps: function ($q, $rootScope) {
                    var deferred = $q.defer(),
                        dependencies = ["registration"];
                    require(dependencies, function () {
                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });
                    })
                    return deferred.$promise;
                }
            }
        }
    );
    app.lazy = {
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service
    };
});

Now in my registration.js I have the following code:

define(["app"], function (app) {
    app.lazy.controller("registration" , ["$scope", function ($scope) {
        // The code here never runs
        $scope.message = "hello world!";
    }]);
});

everything works well, even the code in registration.js is running. but the problem is that the code inside the controller function never runs, and I get the error Error: [ng: areq] http://errors.angularjs.org/1.2.23/ng/areq?p0=registration&p1=not function received undefined

It seems that my code is not registering the function of the controller. Any ideas?

P.s. ui-router : " - promises, $routeChangeSuccess." . (); timeOut , , 5 , Strange.

Answer 1

, , , , ui-router. :

• , app.controllerProvider script. , , app.lazy {...}, BTW:)
• , ctrl script define(), require(), , .

ui-router app.controllerProvider:

app.config(function ($stateProvider, $controllerProvider, $filterProvider, $provide, $urlRouterProvider) {

  app.lazy = {
    controller: $controllerProvider.register,
    directive: $compileProvider.directive,
    filter: $filterProvider.register,
    factory: $provide.factory,
    service: $provide.service
  };

  $urlRouterProvider.otherwise('/');

  $stateProvider

    .state('app', {
      url:'/',
    })

    .state('app.view-a', {
      views: {
        'page@': {
          templateUrl: 'view-a.tmpl.html',
          controller: 'ViewACtrl',
          resolve: {
            deps: function ($q, $rootScope) {
              var deferred = $q.defer();

              var dependencies = [
                'view-a.ctrl',
              ];

              require(dependencies, function() {
                $rootScope.$apply(function() {
                  deferred.resolve();
                });
              });

              return deferred.promise;
            }
          }
        }
      }
    });
});

, require(['app']), :

define(['app'], function (app) {

  return app.lazy.controller('ViewACtrl', function($scope){
     $scope.somethingcool = 'Cool!';
  });

});

GitHub: https://github.com/F1LT3R/angular-lazy-load

Plunker: http://plnkr.co/edit/XU7MIXGAnU3kd6CITWE7

Answer 2

URL- '' . '' - root example.com/, '/' - example.com/#/.

Answer 3

I came to give my 2 cents. I saw that you have already solved this, I just want to add a comment if someone has a similar problem.

I had a very similar problem, but I had a piece of my code waiting for the DOM to load, so I just called it directly (without using "$ (document) .ready") and it worked.

$(document).ready(function() { /*function was being called here*/ });

And that solved my problem. It was probably a different situation, but I had the same error.