A directive in AngularJS is a command that gives HTML new functionality. When angular go through the HTML code, it will first find the directives in the page and then parse the HTML page accordingly.
A simple example of an AngularJS directive, which we have seen in earlier chapters is the "ng-model directive". This directive is used to bind our data model to our view.
Note: You can have basic angular code in an HTML page with the ng-init, ng-repeat and ng-model directives without the need to have Controllers. The logic for these directives is in the Angular.js file which is provided by Google. Controllers are the next level angular programming constructs that allow business logic, but as mentioned for an application to be an angular application it's not mandatory to have a controller.
In this tutorial, you will learn-
As we defined in the introduction, AngularJS directives is a way to extend the functionality of HTML.
There are 4 directives defined in AngularJS.
Below is the list of the AngularJS directives along with examples provided to explain each one of them.
This is used to initialize an Angular.JS application. When this directive in place in an HTML page, it basically tells Angular that this HTML page is an angular.js application.
The example below shows how to use the ng-app directive. In this example, we are simply going to show how to make a normal HTML application an angularJS application.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app=""> Tutorial Name : {{ "Angular" + "JS"}} </div> </body> </html>
Code Explanation:
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
The output clearly shows the output of the expression which was only made possible because we defined the application as an angularjs application.
This is used to initialize application data. Sometimes you may require some local data for your application, this can be done with the ng-init directive.
The example below shows how to use the ng-init directive.
In this example, we are going to create a variable called "TutorialName" using the ng-init directive and display the value of that variable on the page.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="TutorialName='Angular JS'"> Tutorial Name : {{ TutorialName}} </div> </body> </html>
Code Explanation:
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
In the output,
And finally, we have the ng-model directive, which is used to bind the value of an HTML control to application data. The example below shows how to use the ng-model directive.
In this example,
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="quantity=1;price=5"> People : <input type="number" ng-model="quantity"> Registration Price : <input type="number" ng-model="price"> Total : {{quantity * price}} </div> </body> </html>
Code Explanation:
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
Now, if you go to the text boxes and change the value of the People and Registration price, the Total will automatically change.
This is used to repeat an HTML element. The example below shows how to use the ng-repeat directive.
In this example,
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="chapters=['Controllers','Models','Filters']"> <ul> <li ng-repeat="names in chapters"> {{names}} </li> </ul> </div> </body> </html>
Code Explanation:
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
Summary