ленивые загрузки angularjs контроллеры с разрешением ui-router

Question

Я пытаюсь работать с угловыми.js, ui-router и require.js и чувствовать себя довольно смущенными. Я попытался выполнить этот урок http://ify.io/lazy-loading-in-angularjs/. Во-первых, позвольте мне показать вам мой код:

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

Теперь в моих registration.js я следующий код:

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

все работает хорошо, даже код в registration.js запускается. но проблема заключается в том, что код внутри функции контроллера никогда не запускается, и я получаю ошибку Ошибка: [ng: areq] http://errors.angularjs.org/1.2.23/ng/areq?p0=registration&p1=not функция, получившая undefined

Который, кажется, мой код не зарегистрировал функцию контроллера успешно. Есть идеи?

P.s. В ui-router docs говорится: «Если какая-либо из этих зависимостей является обещанием, они будут разрешены и преобразованы в значение до того, как будет создан экземпляр контроллера, и будет запущено событие $ routeChangeSuccess». Но если я положил отложенное. Решает(); из указанного кода внутри timeOut и запустите его, скажем, через 5 секунд, мой код контроллера запускается, и мое представление отображается до разрешения Strange.

Answer 1

Изменение вашего адреса штата до '' должно сделать трюк. '' есть корень example.com/, '/' есть example.com/#/.

Answer 2

Я пришел, чтобы дать свои 2 цента. Я видел, что вы уже решили, я просто хочу добавить комментарий, если у кого-то есть аналогичная проблема.

У меня была очень похожая проблема, но у меня была часть моего кода, ожидающая загрузки DOM, поэтому я просто позвонил напрямую (не используя «$ (document) .ready»), и он сработал.

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

И это решило мою проблему. Возможно, это была другая ситуация, но у меня была такая же ошибка.

Answer 3

Похоже, я столкнулся с одной и той же проблемой, следуя тому же самому учебнику, что и вы, но с использованием ui-router. Решение для меня было:

1. Убедитесь, что app.controllerProvider был доступен для ленивого сценария контроллера. Похоже, вы сделали это, используя app.lazy {...}, который действительно приятный штрих BTW :)
2. Убедитесь, что ленивый скрипт ctrl использует define(), а не require() Я не мог сказать по вашему коду, если вы это сделали.

Вот моя установка UI-маршрутизатор с общественностью 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