AngularJS : Routing to controller from a separate module

Question

I am trying to modularize a feature I am developing in an existing angular.js application.

I have created namespaced modules for all the different sections of this feature, which we will call feature abc here.

I have references to all these .js files in my index.html and I am using 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'
        });
}]);

The issue I am having is that angular.js is giving me an error when I try to load a page under /abcs/findabcs.

Here is my error Error: [ng:areq] Argument 'abcController' is not a function, got string

Is what I'm trying to accomplish with these modularized components simply not possible with angular?

I see references in various places to more modularized applications ( odeToCode, stackoverflow, stackoverflow, similar jsfiddle ) and I was hoping to reproduce this style with $routeProvider routing in the parent module ( `s1.abc1 ).

Update:

I realized where my mistake was now. I was trying to combine two features/styles of declaring functions for controllers/directives.

Incorrect

// 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!";
}

Correct

// 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!";
}

The function name abcControllerInit should not be passed as a string with the dependencies.

Answer 1

Try below code. Controller should be a function.

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