What is the role of ng-app, ng-init and ng-model directives in AngularJS ? Last Updated : 25 Jul, 2021 Summarize Comments Improve Suggest changes Share Like Article Like 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= "https://code.angularjs.org/1.6.9/angular.min.js"> </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= "https://code.angularjs.org/1.6.9/angular.min.js"> </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= "https://code.angularjs.org/1.6.9/angular.min.js"> </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> Comment More infoAdvertise with us Next Article What is the role of ng-app, ng-init and ng-model directives in AngularJS ? J jimishravat2802 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives AngularJS-Questions Similar Reads 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 o 5 min read What is the difference between '@' and '=' in directive scope in AngularJS ? AngularJS is a popular JavaScript framework, that provides powerful features for building dynamic web applications. When creating custom directives in AngularJS, you may come across the need to define a scope for your directive. The two most common methods to do this are by using the @ and = symbols 4 min read What is the difference between Service Directive and Module in Angular ? Angular is a Typescript framework used to build dynamic and Single-Page Applications. This has a strong focus on modularity and reusability of code which helps in creating complex and maintainable applications. At the core, Angular has 3 fundamental building blocks, i.e., Service, Directive and Modu 6 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 5 min read What are the main building blocks of an Angular Application? Angular is a widely used open-source front-end framework used to build dynamic web applications. It consists of several key building blocks that work together to create scalable, and maintainable applications. In this article, we will explore all the main building blocks of an Angular application an 8 min read Like