AngularJS split into multiple files - only the last one works

Question

I've got into an issue where having split my logic of AngularJS app into multiple files brought me an issue where only the last one works and the previous ones are probably skipped.

Here's the index.html inclusion:

<script src="js/app.js"></script>
<script src="js/app.config.js"></script>
<script src="js/controllers/HomeController.js"></script>

Each file contains very small amount of logic:

Initialisation:

angular.module('sportcial', ['ionic'])
.run(function run($ionicPlatform) {
    alert(2);
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }

        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
    });
});

Config:

angular.module('sportcial', ['ionic']).config(function configApp($ionicConfigProvider) {
    alert(1);
    $ionicConfigProvider.tabs.position('bottom');
});

HomeController:

angular.module('sportcial', ['ionic'])
    .config(function config($stateProvider, $urlRouterProvider) {
        alert(3)
    })
    .controller('HomeController', ['$scope', function HomeController($scope) {
        var home = this;
    }]
);

Only the last one fires the alert(3)...

What am I missing here guys? :)

Answer 1

You're overwriting the sportcial module in each file.

Use the setter syntax

angular.module("moduleName", [moduleDependencies, ..])

To create a module.

If you want to add something to an existing module, you need to call the getter:

angular.module("moduleName")

So for example, you need to update your config file to:

angular.module('sportcial').config(function configApp($ionicConfigProvider) {
    alert(1);
    $ionicConfigProvider.tabs.position('bottom');
});

Answer 2

You are declaring a new module in each file.

Angular syntax for setting a module is :

angular.module('moduleName', dependenciesArray);

For getting the module and subsequently define it's modules the syntax is as follows:

angular.module('moduleName');

Remove the array with the ionic dependency from your config and controller files.

Answer 3

Any angular module should only be defined once with its dependencies:

angular.module('sportcial', ['ionic'])

but it can be retrieved as many times as needed by calling module without the dependencies:

angular.module('sportcial').config(....
angular.module('sportcial').controller(....

You'll have to make sure to include the module definition with dependencies before including all other files for the same module.

See also 'Creation versus Retrieval':

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module