AngularJS directives are used to extend HTML. They are special attributes starting with
ng-prefix.
The directive can be applied as an attribute, element, class, and even as a comment, using the
camelCase syntax.
AngularJS provides many built-in directives to help with web application development. These core directives are prefixed with
ng-*.It should be noted that all core directives are prefixed with the ng keyword and should not be used while creating a custom directive. Some of the built-in directives present inside the
AngularJS library are as follows:
| Directive | Description |
|---|
ngApp | This represents the root element of the application. |
ngRepeat | This directive is used to iterate an array or properties inside the object. |
ngIf | This directive is used to evaluate conditional expression and adds or removes the element from the DOM based on its result. |
ngClick | This directive is used to attach a custom callback for a click event. |
ngInclude | This directive is used to fetch and compile the external HTML fragment and include it to the current document. |
ngClass | This directive is used to manipulate CSS classes that are used for an element. |
ngBind | This directive is used to replace the text content with the specified HTML. |
ngBindHtml | The ngBindHTML replaces an element's inner HTML with the specified HTML. |
ngSubmit | This directive is used to attach a custom callback method to an onSubmit event of a form. |
ngModel | This directive is used to attach a form element to a scope. |
Because HTML is case insensitive, we can use a lowercase form. For the
ngModel directive, we can use
ng-model,
ng:model,
ng_model,
data-ng-model, and
x-ng-model in the HTML markup.
