WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Directives


AngularJS gives you a chance to expand HTML with new traits called Directives.

AngularJS has a lot of worked in orders which offers usefulness to your applications.

AngularJS likewise gives you a chance to characterize your own directives.


AngularJS Directives

AngularJS orders are broadened HTML traits with the prefix ng-.

The ng-app order instates an AngularJS application.

The ng-init order instates application data.

The ng-model order ties the estimation of HTML controls (input, select, textarea) to application data.

Read pretty much all AngularJS mandates in our AngularJS order reference.

Example

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

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You composed: {{ firstName }}</p>

</div>
Try it Yourself »

The ng-app mandate additionally reveals to AngularJS that the <div> component is the "owner" of the AngularJS application.


Data Binding

The {{ firstName }} articulation, in the precedent above, is an AngularJS information restricting expression.

Data authoritative in AngularJS ties AngularJS articulations with AngularJS data.

{{ firstName }} is bound with ng-model="firstName".

In the following precedent two content fields are bound together with two ng-demonstrate directives:

Example

<div ng-app="" ng-init="quantity=1;price=5">

Amount: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Aggregate in dollar: {{ amount * cost }}

</div>
Try it Yourself »

Repeating HTML Elements

The ng-repeat order rehashes a HTML element:

Example

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
Try it Yourself »

The ng-repeat order really clones HTML elements once for every thing in an accumulation.

The ng-repeat mandate utilized on a variety 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 in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
Try it Yourself »

The ng-application Directive

The ng-app mandate characterizes the root element of an AngularJS application.

The ng-app mandate will auto-bootstrap (naturally introduce) the application when a site page is loaded.


The ng-init Directive

The ng-init mandate characterizes initial values for an AngularJS application.

Normally, you won't utilize ng-init. You will utilize a controller or module instead.

You will get familiar with controllers and modules later.


The ng-show Directive

The ng-model mandate ties the estimation of HTML controls (input, select, textarea) to application data.

The ng-model mandate can also:

  • Provide type approval for application information (number, email, required).
  • Provide status for application information (invalid, messy, contacted, error).
  • Provide CSS classes for HTML elements.
  • Bind HTML components to HTML forms.

Read increasingly about the ng-model mandate in the following chapter.


Create New Directives

In expansion to all the inherent AngularJS mandates, you can make your own directives.

New orders are made by utilizing the .directive function.

To summon the new mandate, make a HTML component with a similar label name as the new directive.

When naming a mandate, you should utilize a camel case name, w3TestDirective, yet while summoning it, you should utilize - isolated name, w3-test-directive:

Example

<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var application = angular.module("myApp", []);
app.directive("w3TestDirective", work() {
    return {
        format : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>
Try it Yourself »

You can conjure an order by using:

  • Element name
  • Attribute
  • Class
  • Comment

The precedents beneath will all create the equivalent result:

Element name

<w3-test-directive></w3-test-directive>
Try it Yourself »

Attribute

<div w3-test-directive></div>
Try it Yourself »

Class

<div class="w3-test-directive"></div>
Try it Yourself »

Comment

<!- - mandate: w3-test-order - >
Try it Yourself »

Restrictions

You can limit your orders to just be summoned by a portion of the methods.

Example

By including a restrict property with the esteem "A", the order must be conjured by attributes:

var application = angular.module("myApp", []);
app.directive("w3TestDirective", work() {
    return {
        confine : "A",
        format : "<h1>Made by a directive!</h1>"
    };
});
Try it Yourself »

The legitimate limit esteems are:

  • E for Element name
  • A for Attribute
  • C for Class
  • M for Comment

By default the esteem is EA, implying that both Element names and property names can summon the directive.