AngularJS module name as constant

Question

While creating AngularJS controllers, services, directives I want to use main module name as constant instead of testApplication

1) Main module (TestApplication.js)

var testApplication = angular.module('testApplication', ['ngRoute']);

2) ApplicationController.js

(function (angular) {
    'use strict';

angular.module('testApplication').controller('applicationController', 
        ['$scope', function ($scope) {

        // Some code........
}(window.angular));

3) SettingsController.js

(function (angular) {
    'use strict';

angular.module('testApplication').controller('settingsController', 
        ['$scope', function ($scope) {

        // Some code........
}(window.angular));

4) EmployeeService.js

(function (angular) {
    'use strict';

angular.module('testApplication').service('employeeService', 
        ['baseService', function (baseService) {

        // Some code........
}(window.angular));

I am looking for something like:

angular.module(ApplicationName).controller('....')
angular.module(ApplicationName).service('....')
angular.module(ApplicationName).directive('....')

where ApplicationName is some constant. But I don't know how to do this.

or something like below in separate javascript files:

testApplication.controller('....')
testApplication.service('....')
testApplication.directive('....')

Thanks

Answer 1

yes store your angular app in a variable using var keyword that store your angular app instance globally due to the nature of JS. After that you can use this instance in any other file because it is available globally. Remember always include all the js file after that file where you have created instance of your app like var app = angular.module('plunker', []);

here is the plunker

Note :- I have included the test.js file after app.js.