RequireJS. Отложенная загрузка и инициализация angular-контроллеров

Категория: AngularJS

Руководство по отложенной загрузке и инициализации angular-контроллеров с помощью RequireJS.

Шаг первый - даем доступ к $controllerProvider (пробрасываем сервис регистрации контроллеров) до инициализации нашего основного angular приложения/модуля:

angular.module('myApp').config(function($controllerProvider) {
    // @note Сервис `config` вызывается единожды, при инициализации приложения
    //       с помощью: ng-app="myApp" или angular.bootstrap(document, ['myApp']);

    angular.module('colander').controllerProvider = $controllerProvider;
});

Шаг второй - регистрируем контроллер во внешнем файле с помощью $controllerProvider, а не ф-ции angular.module('myApp').controller(...):

angular.module('myApp').controllerProvider.register('AdminController', function(
    $scope, $rootScope
) {
    this.testVar = 'OK';
    
    var $productsScope = $scope.$parent;
    
    $scope.adminAction = function() {
        console.log('adminAction', $scope);
    };
});

Шаг третий - инициализируем контроллер AdminController по определенному действию:

$scope.loadAdmin = function() {
    require(['admin/admin-controller'], function() {
        var adminScope = $scope.$new(true, $scope);
        $controller('AdminController', { $scope: adminScope});
        $scope.adminScope = adminScope;
    });
};
Примечание

Если нужен доступ к this методам/переменным контроллера AdminController - добавьте алиас при инициализации контроллера:

$controller('AdminController as adminController', { $scope: adminScope});
var adminThisTestVar = adminScope.adminController.testVar;

#angular load controllers on demand, #angular deferred controller register, #requirejs angular lazy modules init/apply

категория: AngularJS