Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How many ng-App can be declared in in Angular JS?

Tags:

angularjs

How many ng-App attributes can be declared in in Angular JS? and under what circumstances? 

As I know that ng-app is used for auto bootstrap for an Angular JS application.

like image 392
Syed Avatar asked Jan 13 '14 10:01

Syed


People also ask

Can an HTML page have multiple NG app directive for bootstrapping multiple angular application?

Explanation: No, an HTML page cannot have multiple "ng-app" directive for bootstrapping multiple AngularJS application. The ng-app directive is used to auto-bootstrap an AngularJS application. And according to AngularJS Documentation, only one AngularJS application can be auto-bootstrapped per HTML document.

How many angular application can be auto-bootstrapped per HTML document by default in angular?

only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.

What is data ng app in AngularJS?

ng-app directive is the beginning directive of angularJS. It is used to auto bootstrap angularJS application. We generally use this directive at root level like inside html tag or in body tag.


2 Answers

http://docs.angularjs.org/api/ng.directive:ngApp

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

TL; DR: you can have more than one, but only the first will be bootstrapped.

This question is similar to:

  • How to define two angular apps / modules in one page?
  • Multiple ng-app directives on a page
  • AngularJS Multiple ng-app within a page
like image 71
mustafa.0x Avatar answered Dec 02 '22 16:12

mustafa.0x


Came across very interesting virtue of ng-app directive for angularjs version 1.2.x, we can have applications bootstrapped without specifying any module name.

By using <html ng-app=""> in the HTML template & a script file that contains the controller as a function:

function TestController($scope) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
    $scope.cars = ['Audi', 'BMW', 'Merc'];
  }

Demo link

like image 30
Abhijeet Avatar answered Dec 02 '22 18:12

Abhijeet