AngularJS – ng-app Directive

AngularJSWeb DevelopmentFront End Technology

The ng-app Directive in AngularJS is used for auto-bootstraping of an AngularJS application. This directive gives the root element of the application and is generally placed near the root element of the page like on the <html> or <body> tags. This directive declares the root context from where the application will be started.

Points to note while using the ngApp Directive

  • Only one application can be bootstrapped per the HTML element. If you declare multiple ngApp components, the first ngApp appearing element will be considered as the root element for auto-bootstrap. For running multiple applications in the HTML, one should use the angular.bootstrap method.
  • Do not nest AngularJS applications with each other.
  • Transclusions directive should not be used on the same element as ngApp. Some transclusions directives are ngIf, ngInclude, ngView, etc.

Syntax

<element ng-app="">..Content..</element>

Example − ngApp Directive

Create a file "ngApp.html" in your Angular project directory and copy-paste the following code snippet.

<!DOCTYPE html>
<html>
   <head>
      <title>ngApp Directive</title>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
   </head>

   <body style="text-align: center;">
      <h1 style="color: green;">
         Welcome to Tutorials Point
      </h1>
      <h2>
         AngularJS | ngApp Directive
      </h2>

      <div ng-app="" ng-init="course='AngularJS'">
         <p>Start Learning the latest <b>{{course}}</b> features now...</p>
      </div>
   </body>
</html>

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.

Example 2

Create a file "ngApp.html" in your Angular project directory and copy-paste the following code snippet.

<!DOCTYPE html>
<html>
   <head>
      <title>ngApp Directive</title>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
   </head>

   <body ng-App="" style="text-align: center;">
      <h1 style="color: green;">
         Welcome to Tutorials Point
      </h1>
      <h2>
         AngularJS | ngApp Directive
      </h2>

      <div>
         <p>Enter the Course: <input type="text" ng-model="course" /></p>
         <p>Course: <span ng-bind="course"></span></p>
      </div>
   </body>
</html>

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.

raja
Published on 08-Oct-2021 13:23:32
Advertisements