bing
Flat 10% & upto 50% off + Free additional Courses. Hurry up!

AngularJS Directives

 

Directives are used to extend HTML. It is a started with ng-prefix. AngularJS contains following directives:

1. ng-app Directive – It defines the root element. It automatically initialize or auto-bootstrap the application when a web page is loaded. It starts an AngularJS Application.

e.g.

<div ng-app = "">

...

</div>

 

2. ng-init Directive – It initializes application data. Generally controller or module is used instead ng-init.

e.g.

<div ng-app="" ng-init="name=['abc','xyz']">

//code

</div>

 

3. ng-model directive – It defines the model or variable. It connects the value of HTML controls i.e. input, select, textarea to application data.

e.g.

<div ng-app = "">

//code

<p>Enter Text:<input type = "text" ng-model = "name"></p>

</div>

 

4. ng-repeat directive – It repeats html elements for every item in a collection.

e.g.

<div ng-app="" ng-init="names=['abc','xyz']">
<ul>
<li ng-repeat="n in names">
{{ n }}
</li>
</ul>
</div>

 

Example

<html>

<head>

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<title>Directive Example</title>

</head>

<body>

<h1> Example of Directive</h1>

<div ng-app="" ng-init="names=['abc','xyz']">

<p>Enter Text:<input type = "text" ng-model = "name"></p>
<ul>
<li ng-repeat="n in names">
{{ n }}
</li>
</ul>
</div>

</body>

</html>

 Output

output3

"0 Responses on AngularJS Directives"

Training in Cities

Bangalore, Hyderabad, Chennai, Delhi, Kolkata, UK, London, Chicago, San Francisco, Dallas, Washington, New York, Orlando, Boston

100% Secure Payments. All major credit & debit cards accepted Or Pay by Paypal.

top

Sales Offer

  • To avail this offer, enroll before 07th December 2016.
  • This offer cannot be combined with any other offer.
  • This offer is valid on selected courses only.
  • Please use coupon codes mentioned below to avail the offer
offer-june

Sign Up or Login to view the Free AngularJS Directives.