Working with AngularJS Directives

AngularJS lets extend HTML with new attributes called Directives. AngularJS has a set of built-in directives which offers functionality to your applications.

AngularJS also lets  to define our own directives. Mainly the AngularJS framework can be divided into three major parts:

  • ng-app : This directive defines and links an AngularJS application to HTML.
  • ng-model : This directive binds the values of AngularJS application data to
    HTML input controls.
  • ng-bind : This directive binds the AngularJS application data to HTML tags.
  • ng-init : This directive initializes application data.

ng-app directive: The ng-app directive tells AngularJS that this is the root element of the AngularJS application. All AngularJS applications must have a root element. We can only have one ngapp directive in our HTML document.It initializes the AngularJS framework automatically. AngularJS framework will first check for ng-app directive in a HTML document after the entire document is loaded and if ng-app is found, it bootstraps itself and compiles the HTML template.


 <div ng-app=”modulename” ng-init=”firstName=’Kavitha'”>
<p>Name: <input type=”text” ng-model=”firstName”></p>
<p>You wrote: {{ firstName }}</p>

modulename: It is an optional parameter. It specifies the name of a module that we want to add with the application.

ng-app is the simplest, easiest and most common way to bootstrap an application.

ng-model directive: The ng-model directive defines the model/variable to be used in AngularJS Application. This directive binds the value of HTML controls (input, select, textarea) to application data.In the following example, we define a model named name.


<div ng-app=”mdlApp” ng-controller=”mdlCtrl”>
Name: <input ng-model=”name”>
var app = angular.module(‘mdlApp’, []);
app.controller(‘mdlCtrl’, function($scope) {
$ = “John Doe”;


ng-bind directive:The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.If the value of the given variable, or expression, changes, the content of the specified HTML element will be changed as well.


<element ng-bind=”expression“></element>
<body ng-app=“bindExample”>


angular.module(‘bindExample’, []).controller(‘ExampleController’, [‘$scope’, function($scope) {

$ = ‘JavaTpoint’;



<div ng-controller=“ExampleController”>

<label>Enter name: <input type=“text” ng-model=“name”></label><br>

Hello <span ng-bind=“name”></span>!



ng-init directive:The ngInit directive allows you to evaluate an expression in the current scope.

The ng-init directive initializes an AngularJS Application data. It is used to assign values to the variables. In the following example, we initialize an array of countries. We use JSON syntax to define the array of countries.


<element ng-bind=”expression“></element>
 <div ng-app=”” ng-init=”countries=[{locale:’en-US’,name:’United States’}, {locale:’en-GB’,name:’United Kingdom’}, {locale:’en-FR’,name:’France’}]”>

Enter your Name:

Leave a Reply

Your email address will not be published. Required fields are marked *