Angularjs Directives

Angularjs Directives

A directive is something that introduces new syntax. It improve the feature or functionality of html elements. Directives are markers on a DOM element which attach a special behavior to it. For example, static Html does not know how to create and display a date picker widget. To teach Html this new syntax we need a directive. AngularJS directives are extended Html attributes with the prefix ng-.

Here we discuss following directives;

ng-app

The ng-app directive initializes an AngularJS application. The ng-app directive also tells AngularJS that the <div> element is the "owner" of the AngularJS application. Using this directive you can tell which part of html contains Angularjs app. Below we use ng-app with <div> tag.

<div ng-app="">
Enter text <input type="text" ng-model="name">
<p ng-bind="name"></p>
</div>

ng-init

The ng-init directive initialize application data same like variable initialization in C language, In c language you initialize int a=10;.

The ng-init directive initializes an AngularJS Application data. It is used to assign values to the variables.

<div ng-app="" ng-init="name='Porter'"> // initialize name="Porter"
Name: <input type="text" ng-model="name">
<p>name: {{ name }}</p>

ng-model

The ng-model directive binds the value of Html controls (input, select, textarea) to application data. 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 data-ng-app="">
1st number <input type="number" ng-model="num1">
2nd number <input type="number" ng-model="num2">
<p><b>Sum:</b> {{num1 + num2}}</p>
</div>

ng-repeat

The ng-repeat directive repeats an Html element. ng-repeat directive repeats a specific element.

<div data-ng-app="" data-ng-init="num=[1, 2, 3]">
 
 <p data-ng-repeat="x in num">
   {{ x }}
 </p>
</div>