Open In App

What is the role of ng-app, ng-init and ng-model directives in AngularJS ?

Last Updated : 25 Jul, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about the directives in AngularJS & explore the roles of various directives such as ng-app, ng-init & ng-model in angularJS.

The AngularJS directive is a command that gives HTML documents new functionality. When we use the AngularJS directives, it will first find all the directives in the HTML document and then parse the HTML document accordingly.

ng-app: The ng-app is the directive that is used to define the AngularJS application. By placing this in the HTML document, it indicates that this is an AngularJS application. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-app</title>
    <script src=
    </script>
</head>
  
<body>
    <h3>Geeks For Geeks</h3>
    <div ng-app="">
        This is an example of {{"Angular JS"
        + "ng-app" + "Directive"}}
    </div>
</body>
  
</html>



 

ng-init: The ng-init is the directive that is used for the initialization of the application data. In a simple way, it is used as a local variable in AngularJS. Sometimes we need some local data in your application, so by using the ng-init directive it can be achieved.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-init</title>
    <script src=
    </script>
</head>
  
<body>
    <h3>Geeks For Geeks</h3>
    <div ng-app="" ng-init=
        "Website = 'Geeks For Geeks'">
        Welcome to {{Website}}
    </div>
</body>
  
</html>



ng-model: The ng-model is the directive that is used to bind the value of the HTML control to application data. It is used to bind the data in the HTML document.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-model</title>
    <script src=
    </script>
</head>
  
<body>
    <h3> Geeks For Geeks </h3>
    <div ng-app="" ng-init="price=100; quantity=5">
        Enter the price : 
            <input type="text" ng-model="price"
            <br><br>
  
        Enter the quantity : 
            <input type="text" ng-model="quantity"
            <br><br>
        Total price : {{price * quantity}}
    </div>
</body>
  
</html>





Similar Reads

AngularJS ng-init Directive
The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: &lt;element ng-init = "expression"&gt; ... &lt;/element&gt;Example: This example descr
1 min read
AngularJS Directives
Directives are markers in the Document Object Model(DOM). Directives can be used with any controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present that are predefined but if a developer wants he can create new directives (custom-directive). List of Directives:The following t
9 min read
What are Directives in AngularJS ?
AngularJS directives are extended HTML attributes having the prefix ng-. Directives are markers on the DOM element which tell Angular JS to attach a specified behavior to that DOM element or even transform the DOM element with its children. During compilation, the HTML compiler traverses the DOM matching directives against the DOM elements. When we
7 min read
AngularJS Directives Complete Reference
Directives are markers in the Document Object Model(DOM). Directives can be used with any of controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present which is predefined but if a developer wants he can create new directives (custom-directive). Example: This example uses ng-a
2 min read
Mongoose Document Model.init() API
The Model.init() method of Mongoose API is responsible for building indexes. Although, Mongoose calls this function automatically when a model is created using mongoose.model() or connection.model(). Syntax: Model_Name.init() Parameters: The Model.init() method accepts one parameters: callback: It is a callback function that will run once execution
3 min read
What is the difference between ng-app and data-ng-app in AngularJS ?
In web application development, AngularJS is one of the most favorite dynamic JavaScript frameworks that has HTML through script tags, enabling us to augment the HTML attributes using the directives and facilitating the data binding through the expressions. In this article, we will see the concepts of ng-app and data-ng-app in AngularJS. As these a
5 min read
How to Use the Git Submodule Init and Update Command?
Git submodules allow you to include and manage external repositories within your main repository. This is particularly useful for projects that rely on libraries or other codebases that are maintained separately. The `git submodule init` and `git submodule update` commands are essential for initializing and updating submodules. This guide will expl
3 min read
What is the difference between ng-if and data-ng-if directives ?
The ng-if is a directive in AngularJS which is used to remove the HTML element if the value of the expression or variable is false, unlike ng-hide which just hides the HTML element from the DOM. Syntax: &lt;element angular_directive=expression&gt; Contents... &lt;/element&gt; There are few other options which behave like ng-if. There is no differen
2 min read
What is the use @error and @debug directives in SASS ?
In this article, we will see the use of @error and @debug directives in SASS. Sass is an extension of CSS that stands for Syntactically Awesome Style Sheets. It helps us to create things like variables, nested rules, etc. so that we can reuse the code in multiple elements. The @error directive Sass consists of three directives that are used for pro
2 min read
Use of *ngIf and *ngFor Directives in Angular
Angular is a very popular framework for building scalable web applications. It provides many features and tools to make the development process smooth. Two important directives in Angular are *ngIf and *ngFor. *ngIf is used to conditionally render HTML elements, while *ngFor is used to iterate over a collection of data. In this article, we will lea
5 min read