What is the benefit of defining Angular app?

Question

In some AngularJS tutorials, angular app is defined as:

myApp = angular.module("myApp",[]);

But we can also do without it. The only difference I can see is when we define controller, we can't use idiom:

myApp.controller("myCtrl",function(){ })

but has to use

function myCtrl (){}

Is there any other benefits of defining myApp explicitly, given that I will only create a single app for my site? If I don't define myApp, then where my modules are attached to?

If there is, how I can recreate myApp in testing with Jasmin?

Answer 1

You can define controllers in (at least) 3 ways:

1. Define the controller as a global var (stored on the window object)

   function Ctrl() {}
   

   which is the same as doing:

   window.Ctrl = function () {}
   

2. Create a module and use the returned instance to create new controllers:

   var app = angular.module('app', []);
   app.controller('Ctrl', function() {});
   

3. Create the controllers directly on the module without storing any references (the same as 2 but without using vars):

   angular.module('app', []);
   angular.module('app').controller('Ctrl', function() {});
   

From Angular's point of view, they all do the same, you can even mix them together and they will work. The only difference is that option 1 uses global vars while in options 2 and 3 the controllers are stored inside an Angular's private object.

Answer 2

I understand where you're coming from since the explanation for bootstrapping your Angular is all over the place. Having been playing with Angular only for a month (I'll share what I know anyways), I've seen how you have it defined above. I was also in the same scenario where I only have to define myApp once and not have multiple ones.

As an alternative, you can do something like this below. You'll notice that the Angular app and the controller doesn't have to live by the same namespace. I think that is more for readability and organization than anything.

JS:

window.app = {};
/** Bootstrap on document load and define the document along with 
      optional modules as I have below.
*/
angular.element(document).ready(function () {
    app.ang = angular.bootstrap(document, ['ngResource', 'ngSanitize']);

    // OR simply, works similarly.
    // angular.bootstrap(document, []);

});

/** Define Angular Controller */
app.myController= function ($scope, $resource, $timeout) {

};

HTML:

<div role="main" ng-controller="app.myController"></div>