Introduction To AngularJS

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,

An attribute.
Element.
Class.
As a comment.

Using directive you can do,

DOM Manipulation.
View Loading.
Data binding (using ng-model directive).
Controllers (using ng-controller directive).
Modules (using ng-app directive).
Events
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.

ng-hide
ng-show
ng-view
ng-repeat
Many more directives.

Data Binding

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

ng-bind
ng-init
ng-model
Many more.

Modules and Controller

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

ng-app
ng-controller

Events

The following directives are used for events.

ng-click
ng-keypress
ng-mouseenter
ng-submit
ng-dblclick
Many more.

Defining Directives

The following are the ways to define directives.

<div ng-show="true">Welcome to C# Corner</div>
<div data-ng-show="true">Welcome to C# Corner</div>
<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.

<!DOCTYPE html>
<html ng-app>
<head>
<title>ng-app Directives in AngularJS</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body> </body>
</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.

<!DOCTYPE html>
<html ng-app="Csharp">
<head>
<title>Directives in AngularJS</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h2 data-ng-show="true">Welcome to C# Corner</h2>
<script type="text/javascript">
var app = angular.module("Csharp", []);
</script>
</body>
</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.

<!DOCTYPE html>
<html ng-app="Csharp">
<head>
<title>Directives in AngularJS</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-controller="Corner">
<h2 data-ng-show="true">Welcome to C# Corner</h2>
<script type="text/javascript">
var app = angular.module("Csharp", []);
app.controller("Corner", function ($scope) {});
</script>
</body>
</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.

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}}.

<!DOCTYPE html>
<html ng-app="Csharp">
<head>
<title>Directives in AngularJS</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-controller="Corner">
<h2>Welcome to C# Corner</h2>
<h3 ng-bind="article"></h3>
<script type="text/javascript">
var app = angular.module("Csharp", []);
app.controller("Corner", function ($scope)
{
$scope.article = "Directives in AngularJS";
});
</script>
</body>
</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!

5 Comments

Join the conversation! Your thoughts help the community grow.

Vivek Kumar10y ago
Good one.
Banketeshvar Narayan10y ago
Very nice
- Jeetendra Gund10y ago
  Thanks Banketeshvar Narayan Sir
Santhakumar Munuswamy10y ago
Thanks for nice article
- Jeetendra Gund10y ago
  Thanks Santhakumar Munuswamy Sir