Open In App

AngularJS ng-app Directive

Last Updated : 01 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML document. In case if it is declared more than once then the first ng-app directive appears will be used.

Syntax:

<element ng-app="dataModule"> 
    Contents... 
</element>

Parameter value:

  • dataModule: It specifies the name of the module that is to be loaded in the application. It is an optional parameter.

Example 1: This example implements the ng-app Directive to define a default AngularJS application.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>AngularJS ng-app 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">GeeksforGeeks</h1>
    <h3>ng-app directive</h3>
    <div ng-app="" ng-init="name='GeeksforGeeks'">
        <p>{{ name }} is the portal for geeks.</p>
    </div>
</body>
</html>

Output:

 

Example 2: This example implements the ng-app Directive to define a default AngularJS application. 

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        AngularJS ng-app 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">
        GeeksforGeeks
    </h1>
    <h2>ng-app Directive</h2>
    <div>
        <p>Name:
            <input type="text" ng-model="name">
        </p>
        <p>You entered:
            <span ng-bind="name"></span>
        </p>
    </div>
</body>
</html>

Output:

 

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox