Functionality of ng-app directive in AngularJs

Question

please observe the code snippets I've provided below.

Case 1:

AngularJS Sample Application

  <div ng-app = "">
     <input type="text" autofocus="autofocus" placeholder="Enter your name"         
           ng-model="name"><br>
     Hai {{name}}!
  </div>

Case 2:

AngularJS Sample Application

  <div ng-app = "mainApp">
     <input type="text" autofocus="autofocus" placeholder="Enter your name" 
          ng-model="name"><br>
     Hai {{name}}!
  </div>

I'm getting the desired output in case 1 where as in case 2 I'm getting output as Hai {{name}}!

please tell me the difference between the two cases and how does naming a ng-app module is affecting the output.

You need to declare the ng-app with the module name that you're using in Angular to define the module scope. — Mohit Tanwani, Sep 05 '16 at 06:43
the `ng-app` directive is default app init directive of `angularJs`. If you are not passing any reference to `ng-app` it will initialize your app without any named reference. But if you are passing any reference, you should then declare controller in the app using that `reference`. — Vineet, Sep 05 '16 at 06:44
np-app will define the scope of the controllers, are you sure you able to get the desired output in case 1, without defining the controller inside a module ? — Mohit Tanwani, Sep 05 '16 at 06:46
This may helps you http://stackoverflow.com/questions/30622133/using-ng-app-without-a-value http://stackoverflow.com/questions/24054536/ngapp-without-using-any-specific-module-name http://stackoverflow.com/questions/31923949/using-empty-string-as-name-for-ng-app — Mohit Tanwani, Sep 05 '16 at 06:49

Mohit Tanwani · Accepted Answer · 2016-09-05T07:46:15.107

First of all, try to understand the concept of ng-app.

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags.

ng-app means: That page has Angular in it!

ng-app="module" means: That page has Angular in it and necessary controls/services/etc are defined in that module.

ng-app defines the main or bootstrap module of your application, which should perform the initialization task of your application.

Like in java you have many methods and classes but you define one main method as starting point. Similarly, in angular you have many module, however, you define one module as the starting point of application.

Case 1 : This will define the controller function in the global scope.

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

HTML

<div ng-app="" ng-controller="GreetingController">
     <input type="text" autofocus="autofocus" placeholder="Enter your name"         
           ng-model="name"><br>
     Hai {{name}}!
</div>

Angular

function GreetingController($scope) {
  $scope.name = "Hello";
}

Case 2 : This will define the module scope

You can specify an AngularJS module to be used as the root module for the application. This module will be loaded into the $injector when the application is bootstrapped.

HTML

<div ng-app="myApp" ng-controller="GreetingController">
     <input type="text" autofocus="autofocus" placeholder="Enter your name"         
           ng-model="name"><br>
     Hai {{name}}!
</div>

Angular

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

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.name = 'Hola!';
}]);

Official documentation ng-app

Thank you for providing me valuable information. But I my doubt is still unresolved. If I'm not using ng-controller, I'm using only ng-app with and without names as shown in my code snippets. How does both code snippets I have provided differ in functionality. — Sankar, Sep 05 '16 at 09:26
@Sankar if you're defining ng-app="module", it will consider application start with "module" module what you're defining in AngularJs. if you're defining ng-app="", it will consider application in a global scope. It's necessary to write ng-app in HTML to let the AngularJs know that you're going to create an Angular application. And in both of your cases, both will work if you're not defining any AngularJs (script) code. — Mohit Tanwani, Sep 05 '16 at 09:38

Functionality of ng-app directive in AngularJs

Case 1:

AngularJS Sample Application

Case 2:

AngularJS Sample Application

1 Answers1