Do i have to declare an angular module var for each file related to my angular app?

Question

I want to write directive in directive.js and write controller in controller.js but I must write app = angular.module('app'), and about app's config in every file? Is there a simple way to write them?

Answer 1

Do not take the simple answer of "yo angular". This gives you no understanding of how to setup your own build based on what your application needs.

In terms of directory structure i use something like the following:

If you have other things to go into your app/ then you could move all your features to a folder i.e. "modules"

In terms of how i start my module code and the relational controllers / directives etc of that module. It would look something like the following blocks:

File: app/foo/foo.js

(function() {

    angular.module('foo', []);

})();

File: app/foo/controllers/foo.fooController.js

(function() {

    function fooController() {
        // controller code
    }

    angular.module('foo').controller('fooController', fooController);

})();

File: app/foo/directives/foo.fooDirective.js

(function() {

    function fooDirective() {
        // directive code
    }

    angular.module('foo').directive('fooDirective', fooDirective);

})();

Answer 2

You don't have to cache the module in the global scope, you could just use the getter syntax of module angular.module('app') in every file/everytime you need it. With this you do not pollute global scope by placing a variable ex:- app in order to be able to use it elsewhere.

controller.js:

//controller def
angular.module('app').controller('myCtrl', MyCtrl);

directive.js:

//directive def
angular.module('app').directive('myDir', MyDir);

Just do not reinitialize the module by doing angular.module('app',[]) elsewhere other than it is intended to be.

Answer 3

I too struggled with this concept. It comes down to this.

First think of an AngularJS Module as a namespace declaration, then consider the following.

Given an application namespace called "foo", you may have several files that make up your application, but you want all of them to just be extending the "foo" namespace. AngularJS' module function has two prototypes; the first takes two parameters, the second just one. In your main module file (let's call it the one that loads first) you will use the two parameter version to initialize your application and define what external modules you want Angular to include.

The following code example shows the usage of the two formats. The first one shows how to perform the initial declaration of a modules. Note the second parameter, which is an array of strings that identify the modules that your modules are dependent on; even if you do not have dependencies and empty array must be supplied.

//main.js
(function(angular,undefined){
    "use strict";

    angular.module("foo", ["ui-router"]);
})(angular);

In the second part of the example you should note that there is no second parameter. This basically tells Angular that you have already initialized the module elsewhere, now you are just trying to add to it.

//bar-controller.js
(function(angular,undefined){
    "use strict";

    angular.module("foo")
        .controller("bar", ["$scope", "$state", function($scope, $state){
             //Do controller stuff
        });
})(angular);

As to how to organize the files? That is up to you. Whatever makes sense to you and your application. AngularJS really does not care about the structure of your file system, other than all paths to templates are relative to the "main" js file.

Answer 4

As far as i understand, what u need to know is if you have to declare an app variable in every .js file that will contain Angular code... (The title of the question mismatch with the content)

Short answer: NO

Explanation

You can declare an angular app in this way

var myAppModule = angular.module('myApp', []); 

that will let you declare controllers, services, etc.. like this

myAppModule.controller('MyCTRL', ['dep1','dep2', function(dep1,dep2){
      //...
 }]);

Or you can declare it as a module without assigning a variable to it

angular.module('myAppModule', []); 

then you'll have to declare controllers, services, etc... like this

angular.module('myAppModule').controller('MyCTRL', ['dep1','dep2', function(dep1,dep2){
      //...
    }]);

Now, to completely answer your question, once you declare your module, you don't have to declare it again, just remember to load the .js file that contains the declaration of the app module before the ones that has de controllers, directives, services, etc.

Also you should check this out: 'Best' way to declare a module