To extend the functionality of HTML with new attributes, AngularJS uses Directives and Custom Directives. Having a set of in-built directives, AngularJS offers functionality to your applications. You can also have your own set of directives; Custom Directives.
Starting with a prefix 'ng-', AngularJS has a few directives as follows.
The ng-app directive basically kick starts an AngularJS application while the ng-init initializes the data of the application. The ng-model directive performs data binding and the ng-repeat repeats an element in the HTML. Let us have a closer look at them looking at the example below.
In AngularJS, the term refers to a software design pattern as well. In this pattern, the components are not hard coded within, but are given dependencies. This makes the dependencies to be configurable and does not need the component to locate the dependency.
Let us have a look at each of these individually.
<student name = "Mithilesh"></student><br/> <student name = "Piyush"></student>
This directive not only defines the root element of an AngularJS application but also auto-bootstraps or automatically initializes the AngularJS application when the webpage is loaded.
This 'ng-init' directive basically defines the initial values of an AngularJS application. However, you may not use this directive generally since you have access to a controller or a module instead.
It basically binds the HTML control's values to the application data. It can also be used to provide:
There are also used in AngularJS for the same function as the standard directives and are also defined using the word directive. A custom directive is something that replaces an element for which it is activated. Using the compile() method of custom directives, the application finds the matching elements and performs a one-time activity during the bootstrap stage. You can create custom directives for the following type of elements which are supported by AngularJS: