Post
Ask Question

Introduction To AngularJS - Day 5

In the 5th day of AngularJS article series, we are going to learning next key players/concept of AngularJS, understanding the concept of Directives in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

Directives

Directives teach HTML new tricks. A directive is an extension of HTML that allows us to create new behaviors. This technology lets the developers create reusable components that can be used within the complete application and even provide their own custom components.

The directive can be applied as,

  1. An attribute.
  2. Element.
  3. Class.
  4. As a comment.

Using directive you can do,

  1. DOM Manipulation.
  2. View Loading.
  3. Data binding (using ng-model directive).
  4. Controllers (using ng-controller directive).
  5. Modules (using ng-app directive).
  6. Events
  7. CSS

Using AngularJS built in directives

AngularJS brings a basic set of directives such as iterate over an array, execute a custom behavior when an element is clicked, or even show a given element based on a conditional expression, and many others.

DOM Manipulation

The following are some directives used for DOM manipulation.

  1. ng-hide
  2. ng-show
  3. ng-view
  4. ng-repeat
  5. Many more directives.

Data Binding

The following are some directives used for binding the controller properties to view.

  1. ng-bind
  2. ng-init
  3. ng-model
  4. Many more.

Modules and Controller

The following directives are used for defining the controller and module in view.

  1. ng-app
  2. ng-controller

Events

The following directives are used for events.

  1. ng-click
  2. ng-keypress
  3. ng-mouseenter
  4. ng-submit
  5. ng-dblclick
  6. Many more.

Defining Directives

The following are the ways to define directives.

  1. <div ng-show="true">Welcome to C# Corner</div>  
  2. <div data-ng-show="true">Welcome to C# Corner</div>  
  3. <ng-view></ng-view>  
Now, we are going to learn some AngularJS directives with example one by one.

Using ng-app Directive

This is the first directive we are going to understand because it defines the root of an AngularJS application. Applied to one of the elements, in general HTML or body, this directive is used to bootstrap the framework. We can use it without any parameter, thereby indicating that the application will be bootstrapped in the automatic mode. The following code shows how to use or define the ‘ng-app’ directive.
  1. <!DOCTYPE html>  
  2. <html ng-app>  
  3.   
  4. <head>  
  5.     <title>ng-app Directives in AngularJS</title>  
  6.     <script src="Scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body> </body>  
  10.   
  11. </html>  
In the above code we used the ‘ng-app’ directive with the HTML tag without any parameter. If you are using any module that time you have to pass the module name in this directive as parameter. This directive tell that which module used in this application.
  1. <!DOCTYPE html>  
  2. <html ng-app="Csharp">  
  3.   
  4. <head>  
  5.     <title>Directives in AngularJS</title>  
  6.     <script src="Scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <h2 data-ng-show="true">Welcome to C# Corner</h2>  
  11.     <script type="text/javascript">  
  12. var app = angular.module("Csharp", []);  
  13.     </script>  
  14. </body>  
  15.   
  16. </html>  
In the above code we created a module name ‘Csharp’ and this module name we pass in our ’ng-app’ directive.

ng-app

Using ng-controller Directive

We can attach any controller to the view using the ‘ng-controller’ directive. After using this directive, the view and controller start to share the same scope and are ready to work together.
  1. <!DOCTYPE html>  
  2. <html ng-app="Csharp">  
  3.   
  4. <head>  
  5.     <title>Directives in AngularJS</title>  
  6.     <script src="Scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body ng-controller="Corner">  
  10.     <h2 data-ng-show="true">Welcome to C# Corner</h2>  
  11.     <script type="text/javascript">  
  12. var app = angular.module("Csharp", []);  
  13. app.controller("Corner", function ($scope) {});  
  14.     </script>  
  15. </body>  
  16.   
  17. </html>  
In the above code you can see we created a module name ‘Csharp’ and a controller name ‘Corner’. This ‘ng-controller’ tells which controller we are using in application and which data we are sharing.

ng-controller
Using ng-bind Directive

This directive is generally applied to a span element and replaces the content of the element with the results of the provided expression. It has the same meaning as that of the double curly markup, for example, {{expression}}.
  1. <!DOCTYPE html>  
  2. <html ng-app="Csharp">  
  3.   
  4. <head>  
  5.     <title>Directives in AngularJS</title>  
  6.     <script src="Scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body ng-controller="Corner">  
  10.     <h2>Welcome to C# Corner</h2>  
  11.     <h3 ng-bind="article"></h3>  
  12.     <script type="text/javascript">  
  13. var app = angular.module("Csharp", []);  
  14. app.controller("Corner", function ($scope)  
  15. {  
  16.     $scope.article = "Directives in AngularJS";  
  17. });  
  18.     </script>  
  19. </body>  
  20.   
  21. </html>  
We are using same previously described example of controller just add new directive ‘ng-bind’.

code

In the above image you can see we define property in controller and that property is bind or shown in the view using ‘ng-bind’ directive. Output of the above code is the following,

Output

In the above image I opened debugger tool of Google chrome for testing how data is bind.

Great, we learned how to use directives in AngularJS with example successfully!

Summary

I hope that beginners as well as students understand the concept of Directives in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!

 


Similar Articles