Using ng-app without a value

Question

Usually, you see Angular initialized on a page with a directive like ng-app=\"myModule\", but it is valid to just use ng-app. However, as things l

Answer 1

Read the first example https://docs.angularjs.org/api/ng/directive/ngApp

In the example below if the ngApp directive were not placed on the html element then the document would not be compiled, the AppController would not be instantiated and the {{ a+b }} would not be resolved to 3.

    <div ng-controller="ngAppDemoController">
        I can add: {{a}} + {{b}} =  {{ a+b }}
    </div>

EDIT: You can't(not recommended) register a controller if you don't specify your ng-app. If you just write ng-app or ng-app="", then you'll just get basic angular functions to work, like this stuff: http://www.w3schools.com/angular . So the goal of ng-app is to specify what module you're referring to when registering controllers.

Answer 2

Prior to Angular 1.3 (when you could define controllers on the global scope), Angular was able to automatically discover controllers that were defined globally.

As of Angular 1.3, all controllers have to be defined within a module, and thus, you'd get very limited functionality out of an ng-app without a module. It could potentially be beneficial for prototyping, but even there, you're not going to get much.

So, pre-angular 1.3 usage:

<div ng-app>
   <div ng-controller="SomeController">
       {{something}}
   </div>
</div>

You could define your javascript like this and it would work:

<script>
    function SomeController($scope) {
        $scope.something = "Hello";
    }
</script>

Edit:

As mentioned in the comments, you can still enable this behavior by using $controllerProvider.allowGlobals(). That said, the Angular team has tried to deter us from defining controllers this way from the start, and should be avoided:

NOTE: Although Angular allows you to create Controller functions in the global scope, this is not recommended. In a real application you should use the .controller method of your Angular Module for your application [...]

Answer 3

To be clear, ngApp directive in AngularJS allows you auto bootstrap an AngularJS application by designating the root element of the app in your body/html tag automatically via DOM initialization. You can also have more control over this initialization process by manually 'bootstrapping' your app via angular.bootstrap, as well as bootstrapping multiple AngularJS applications (as long as you do not nest them). The main separation is that you have to use one process or the other, meaning either ng-app or angular.bootstrap separately, which I hope is obvious because you would not want to override initializations.

A more in depth look at this process can be seen here: AngularJS Developer Guide: Bootstrap

Now what does this all mean in context to your question? ng app initialization allows only a single instance per page, this one module per a single HTML element; whereas angular.bootstrap gives you this functionality yet manually. The real magic would be if you could use ng-app like angular.bootstrap; so in that case you can look at ngModule.

I would like to reference an article that helped me better understand how I can leverage ngModule like ngApp, however you should note that even if you use ngModule you're continuously leveraging functionality that mimics ngApp and extends it. Therefore you can conclude that the functionality that will remain will be DOM app initialization via X method... whether or not you get around using ngApp, you'll still have to deal with the big picture.

Let me know if it helped, or at least pointed you in a direction you can follow.