Angular directives are a core feature of AngularJS, allowing you to extend HTML with new attributes. They can be used to create reusable components, manipulate the DOM, and much more.
Common Angular Directives
Here are some of the most commonly used Angular directives:
- ng-model: Two-way data binding between the model and the view.
- ng-repeat: Iterates over an array and creates a new DOM element for each item.
- ng-show/ng-hide: Conditionally shows or hides elements based on an expression.
- ng-click: Triggers an event when the element is clicked.
- ng-class: Applies a CSS class to an element based on an expression.
Example of ng-repeat Directive
Here's an example of how you can use the ng-repeat directive to iterate over an array:
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
In this example, the items array will be iterated over, and a new <li> element will be created for each item in the array.
ng-model Directive
The ng-model directive is used for two-way data binding. It allows you to bind the value of an input element to a variable in your AngularJS application.
<input type="text" ng-model="user.name">
In this example, the value of the input element will be bound to the user.name variable.
ng-class Directive
The ng-class directive is used to apply a CSS class to an element based on an expression.
<div ng-class="{ 'active': isActive }">Click me!</div>
In this example, the active class will be applied to the <div> element if the isActive variable is true.
Learn More
For more information on Angular directives, please visit our Angular Directives Guide.