AngularJs Tutorials
![say]()
Important News
Angular Directive
AngularJS directives are extended HTML attributes with the prefix ng-.
AngularJS Example
<div ng-app="" ng-init="firstName='Nusrat'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
The ng-app directive also tells AngularJS that the <div> element is the "owner" of the AngularJS application ng-repeat - This directive repeats html elements for each item in a collection.
ng-app directive:-
ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application. In following example, we've defined a default AngularJS application using ng-app attribute of a div element.
ng-init directive :-
ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application. In following example, we'll initialize an array of countries. We're using JSON syntax to define array of countries.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> ... </div>
ng-model directive :-
ng-model directive defines the model/variable to be used in AngularJS Application. In following example, we've defined a model named "name".
<div ng-app="">
... <p>Enter your Name: <input type="text" ng-model="name">
</p>
</div>
ng-repeat directive :-
ng-repeat directive repeats html elements for each item in a collection.. In following example, we've iterated over array of countries.
<div ng-app="">
... <p>List of Countries with locale:</p>
<ol> <li ng-repeat="country in countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li>
</ol>
</div>
File name : index.php
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="names=['mahtab','habib','kajal']">
<p>Looping with ng-repeat:</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
Output :-
mahtab
habib
kajal
The ng-repeat directive used on an array of objects:
File name : index.php
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=[
{name:'mahtab',country:'india'},
{name:'Habib',country:'pakistan'},
{name:'Kajal',country:'nepal'}]">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
</body>
</html>
Output :-
mahtab, india
habib, pakistan
kajal, nepal
Example :
File name : index.php
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 7 }}</p>
</div>
</body>
</html>
Output :-
Data Binding
Data binding in AngularJS binds AngularJS expressions with AngularJS data.
{{ firstName }} is bound with ng-model="firstName".
in this example two text fields are bound together with two ng-model directives
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="qty=5;price=50">
<h2>Calculate</h2>
Quantity: <input type="number" ng-model="qty">
Price: <input type="number" ng-model="price">
<p><b>Total :</b> {{qty * price}}</p>
</div>
</body>
</html>
How to Create New Directives?
New directives are created by using the .directive function. To invoke the new directive, make an HTML element with the same tag name as the new directive. When naming a directive, you must use a camel case name, iTechXpert, but when invoking it, you must use - separated name, i-tech-xpert:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="appName">
<i-tech-xpert></i-tech-xpert>
<script>
var app = angular.module("appName", []);
app.directive("iTechXpert", function() {
return {
template : "<h1>Made by a Itechxpert!</h1>"
};
});
</script>
</body>
</html>
You can invoke a directive by using:
Element name
Attribute
Class
Comment
Element name
<i-tech-xpert></i-tech-xpert>
Attribute
<div i-tech-xpert></div>
Example :-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div i-tech-xpert></div>
<script>
var app = angular.module("myApp", []);
app.directive("iTechXpert", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
</html>
Class
<div class="i-tech-xpert"></div>
Example :-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div class="i-tech-xpert"></div>
<script>
var app = angular.module("myApp", []);
app.directive("iTechXpert", function() {
return {
restrict : "C",
template : "<h1>Made by a directive!</h1>"
};
});
</script>
<p><strong>Note:</strong> You must add the value "C" to the restrict property to be able to invoke the directive from a class name.</p>
</body>
</html>
Comment
<!-- directive: i-tech-xpert -->
The legal restrict values are:
E for Element name
A for Attribute
C for Class
M for Comment
By default the value is EA, meaning that both Element names and attribute names can invoke the directive.