Angular Directives
AngularJS Directives
AngularJS lets you lot extend HTML alongside novel attributes called Directives.
AngularJS has a laid of built-in directives which offers functionality to your applications.
AngularJS too lets you lot define your ain directives.
AngularJS Directives
AngularJS directives are extended HTML attributes alongside the prefixng-.The
ng-app directive initializes an AngularJS application.The
ng-init directive initializes application data.The
ng-model directive binds the value of HTML controls (input, select, textarea) to application data.Read virtually all AngularJS directives inward our AngularJS directive reference.
Example
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div> ng-app directive too tells AngularJS that the <div> chemical component subdivision is the "owner" of the AngularJS application.Data Binding
The{{ firstName }} expression, inward the instance above, is an AngularJS information binding expression.Data binding inward AngularJS binds AngularJS expressions alongside AngularJS data.
{{ firstName }} is jump alongside ng-model="firstName".In the adjacent instance 2 text fields are jump together alongside 2 ng-model directives:
Example
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total inward dollar: {{ quantity * toll }}
</div> Using
ng-init is non really common. You volition acquire how to initialize information inward the chapter virtually controllers.Repeating HTML Elements
Theng-repeat directive repeats an HTML element:Example
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x inward names">
{{ x }}
</li>
</ul>
</div> ng-repeat directive genuinely clones HTML elements ane time for each especial inward a collection. The
ng-repeat directive used on an array of objects:Example
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x inward names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div> AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database.
Just imagine if these objects were records from a database.
The ng-app Directive
Theng-app directive defines the root element of an AngularJS application. The
ng-app directive volition auto-bootstrap (automatically initialize) the application when a spider web page is loaded.The ng-init Directive
Theng-init directive defines initial values for an AngularJS application.Normally, you lot volition non utilisation ng-init. You volition utilisation a controller or module instead.
You volition acquire to a greater extent than virtually controllers as well as modules later.
The ng-model Directive
Theng-model directive binds the value of HTML controls (input, select, textarea) to application data.The
ng-model directive tin also:- Provide type validation for application information (number, email, required).
- Provide condition for application information (invalid, dirty, touched, error).
- Provide CSS classes for HTML elements.
- Bind HTML elements to HTML forms.
ng-model directive inward the adjacent chapter.Create New Directives
In add-on to all the built-in AngularJS directives, you lot tin practice your ain directives.New directives are created yesteryear using the
.directive function.To invoke the novel directive, brand an HTML chemical component subdivision alongside the same tag cite equally the novel directive.
When naming a directive, you lot must utilisation a camel instance name,
w3TestDirective, simply when invoking it, you lot must utilisation - separated name, w3-test-directive:Example
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made yesteryear a directive!</h1>"
};
});</script>
</body> - Element name
- Attribute
- Class
- Comment
Element name
Attribute <w3-test-directive></w3-test-directive> <div w3-test-directive></div> Class <div class="w3-test-directive"></div> Comment <!-- directive: w3-test-directive --> Restrictions
You tin throttle your directives to entirely live on invoked yesteryear around of the methods.Example
By adding arestrict belongings alongside the value "A", the directive tin entirely live on invoked yesteryear attributes: var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
throttle : "A",
template : "<h1>Made yesteryear a directive!</h1>"
};
});
Efor Element nameAfor AttributeCfor ClassMfor Comment
EA, pregnant that both Element names as well as attribute names tin invoke the directive.
Comments
Post a Comment