javascript

AngularJS directives and custom directives

Angular is very popular JavaScript framework and custom directives are the heart of the angular. We will take look at the directives.

Angular directive

Directives are the command, tells angular what operations can angular do on the DOM element, attribute or the children of the element. These angular directives extend the HTML attributes. Angular directives are prefixes by ng-. Following are the some popular directives by angular.

ng-app: It initializes the angular application.

ng-init: It initializes the data of application.

ng-model: It provides the access to the model data for binding to the HTML controls.

For example

<div ng-app="firstApp" ng-init="firstName='John'">
<p>This is angular js application</p>
Change the name: <input type="text" ng-model="firstName" />
<p>My name is {{firstName}}
</div>

In above example firstApp is the name of the angular application. The name is not mandatory. You can keep blank as well. Next attribute is ng-init which initializes the data used by the application. By using the ng-model textbox can change the value of the firstName variable defined in the model. And finally we have used {{firstName}} to display the actual value of the variable.

Continue reading “AngularJS directives and custom directives”