AngularJs Basics: AngularJs Directives



In AngularJS directives are used to extend the use of HTML. They are special attributes starting with ng-prefix. Below the list of directives:

  • ng-app

  • ng-init

  • ng-model

  • ng-repeat

  • ng-bind

  • ng-show

  • ng-controller

  • ng-disabled

  • ng-if

  • ng-click

  • etc.

ng-app directive

The ng-app directive starts an AngularJS Application and it used as the root element. It automatically initializes the application when the web page containing AngularJS Application is loaded.


it define using div:

<div ng-app = "">
   ...
</div>

ng-init directive

The ng-init directive initializes an AngularJS Application data.

it assign value to the variables.

<div ng-app="" ng-init="firstName='naveen'">

<p>The name is <span ng-bind="firstName"></span></p>
</div>

or in collection form

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
   {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

Example:

<!DOCTYPE html>
<html >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body >
    <div ng-app ng-init="greet='Hello World!'; amount= 1000; myArr = [100, 200]; person = { firstName:'naveen', lastName :'kumar'}">
        {{amount}}      <br />
        {{myArr[1]}}    <br />
        {{person.firstName}}
    </div>
</body>
</html>

ng-model directive

The ng-model directive defines the model/variable to be used in AngularJS Application. In the following example, we define a model named name.


<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

Example:

<!DOCTYPE html>
<html >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
    <input type="text" ng-model="name" />
    <div>
       Hello {{name}}
    </div>
</body>
</html>

ng-repeat directive

The ng-repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate over the array of countries


Example:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="" ng-init="students=['student1','Student2','student3']">
    <ol>
        <li ng-repeat="name in students">
            {{name}}
        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>


ng-bind directive

Replaces the value of HTML control with the value of specified AngularJS expression.


Example:

<!DOCTYPE html>
<html >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="">
    <div>
        1 + 2 = <span ng-bind="1 + 2"></span> <br />

        Enter your name: <input type="text" ng-model="name" /><br />
        Hello <span ng-bind="name"></span>
    </div>
</body>
</html>

Output:


ng-disabled directive:

Sets the disable attribute on the HTML element if specified expression evaluates to true.


Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app ng-init="checked=true" >
    Click Me: <input type="checkbox" ng-model="checked" /> <br />
    <div>
        New: <input ng-if="checked" type="text" />
    </div>
    <div>
        Read-only: <input ng-readonly="checked" type="text" value="This is read-only." />
    </div>
    <div>
        Disabled: <input ng-disabled="checked" type="text" value="This is disabled." />
    </div>
</body>
</html>

Output:



Get instant help at here:

contact@codersarts.com



Contact Us

Tel: (+91) 0120  4118730  

Time :   10 : 00  AM -  08 : 00 PM IST 

Registered address: G-69, Sector 63, 

 Noida - 201301, India

We Provide Services Across The different countries

USA    Australia   Canada   UK    UAE    Singapore   New Zealand    Malasia   India   Ireland   Germany

Terms and Conditions        Privacy Policy    Pricing Policy       Refund Policy         COPYRIGHT © 2021

Sofstack Technology Solutions Pvt. Ltd.

  • CodersArts | Linkedin
  • Instagram