AngularJS: Маршрутизация к контроллеру с отдельного модуля

Question

Я пытаюсь модулизовать функцию, которую я разрабатываю в существующем приложении angular.js.

Я создал модули с именами для всех различных разделов этой функции, которые мы будем называть функцией abc здесь.

У меня есть ссылки на все эти .js файлы в моем index.html, и я использую angular.js v1.3.0-beta6

// abc.directives.js 
var abcDirectivesModule = angular.module('s1.abc.directives', []); 
abcDirectivesModule.directive('abcSelector', ['abcSelectorInit']); 
function abcSelectorInit() { // ... } 

// abc.controllers.js 
var abcControllersModule = angular.module('s1.abc.controllers', ['s1.abc.directives']); 
abcControllersModule.controller('abcController', ['$scope', 'abcControllerInit']); 
function abcControllerInit($scope) { 
    var vm = this; 

    vm.data = "Data!"; 
} 

// abc.module.js 
var abcModule = angular.module('s1.abc', ['s1Common', 's1Security', 's1.abc.controllers']); 

abcModule.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider. 
     when('/abcs', { 
      redirectTo: '/abcs/findabcs' 
     }). 
     when('/abcs/findabcs', { 
      templateUrl: '/js/angularjs/app/abcs/abc.partial.finder.html', 
      controller: 'abcController', 
      controllerAs: 'vm' 
     }); 
}]); 

Проблема, которую я имею что angular.js дает мне ошибку, когда я пытаюсь загрузить страница под /abcs/findabcs.

Вот моя ошибка Error: [ng:areq] Argument 'abcController' is not a function, got string

Это то, что я пытаюсь достичь с помощью этих компонентов модульных просто невозможно с угловой?

Я вижу ссылки в разных местах более модульных приложений (odeToCode, stackoverflow, stackoverflow, similar jsfiddle), и я надеялся, что воспроизвести этот стиль с маршрутизацией $ routeProvider в родительском модуле (`s1.abc1).

Update:

я понял, где моя ошибка была теперь. Я пытался объединить две функции/стили декларирования функций для контроллеров/директив.

Некорректное

// abc.controllers.js 
var abcControllersModule = angular.module('s1.abc.controllers', ['s1.abc.directives']); 
abcControllersModule.controller('abcController', ['$scope', 'abcControllerInit']); // Function name passed in as string 
function abcControllerInit($scope) { 
    var vm = this; 

    vm.data = "Data!"; 
} 

Правильная

// abc.controllers.js 
var abcControllersModule = angular.module('s1.abc.controllers', ['s1.abc.directives']); 
abcControllersModule.controller('abcController', ['$scope', abcControllerInit]); // Function name passed in directly, not as string 
function abcControllerInit($scope) { 
    var vm = this; 

    vm.data = "Data!"; 
} 

Имя функции abcControllerInitне должен быть принят в виде строки с зависимостями.

Answer 1

Попробуйте ввести код. Контроллер должен быть функцией.

//abc.directives.js 
var abcDirectivesModule = angular.module('s1.abc.directives', []); 
abcDirectivesModule.directive('abcSelector', ['abcSelectorInit', 
function abcSelectorInit() { // ... }]); 

// abc.controllers.js 
var abcControllersModule = angular.module('s1.abc.controllers', ['s1.abc.directives']); 
abcControllersModule.controller('abcController', ['$scope', 
function abcControllerInit($scope) { 
    var vm = this; 

    vm.data = "Data!"; 
}]); 

// abc.module.js 
var abcModule = angular.module('s1.abc', ['s1Common', 's1Security', 's1.abc.controllers']); 

abcModule.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider. 
     when('/abcs', { 
      redirectTo: '/abcs/findabcs' 
     }). 
     when('/abcs/findabcs', { 
      templateUrl: '/js/angularjs/app/abcs/abc.partial.finder.html', 
      controller: 'abcController', 
      controllerAs: 'vm' 
     }); 
}]);