AngularJS Directives

In the last article we studied how AngularJS implements MVC architecure. We also briefly reviewed directives in the last article. Now is the time to study AngularJS directives in detail. Simply put, AngularJS directives are basically attributes that are required for proper functioning of AngularJS applications. In other words, AngularJS directives extend the HTML DOM via additional attributes. Following are the four main directives in AngularJS applications.

  • ng-app
  • ng-init
  • ng-model
  • ng-bind

ng-app

To start an AngularJS application you need to add the “ng-app” directive to any element. Now you can perform AngularJS functionalities within this element. The “ng-app” directive basically initializes an AngularJS application. Whenever a page containing AngularJS application is loaded to the browser, this “ng-app” directive tells the browser where to start the AngularJS application.

ng-init

The “ng-init” directive is used to initialize the application data. For instance if you want to create any variable at the time of initialization of AngularJS application, you could do so via “ng-init”.

ng-model

If you want to bind the value of any html input element to AngularJS application variable, you can do so via ng-model.

ng-bind

Finally if you want to bind the value of AngularJS application variable to the innerhtml of any html element, you can us “ng-bind” directive.

Take a look at the following example to see all of the aforementioned AngularJS directives in action.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="num1=10;num2=3">

Number 1: <input type="number"	ng-model="num1">
Number 2:    <input type="number" ng-model="num2">
    
<h1 ng-bind="num1"></h1>
Number1 multiplied by Number2: {{ num1 * num2 }}


</div>

</body>
</html>

Download the code Try the code

In the above code “ng-app” directive sets a div inside a body as the starting point for AngularJS application. Similarly, “ng-init” directive is added to the opening tag of the div. It is used to initialize “num1” and “num2” application variables. These variables are assigned value “10” and “3” respectively. You can access these variables anywhere inside the application via “ng-model” attribute. Next, using “ng-model” directives, the value of two input text boxes is bound to “num1” and “num2” variables.

Changing the value in first text box will update the value of “num1” variable at run time. Similarly, updating the value in the second text box will update the value of “num2” variable. Next, “ng-bind” directive is used to display the value of “num1” variable inside an “h1” tag. Finally the product of “num1” and “num2” variables have been displayed via AngularJS expression. Now if you change the numbers in the text boxes, you will see the that the product of the numbers will update at run time. This is because the value of the application variables “num1” and “num2” will be changes at run time.

AngularJS Introduction

AngularJS is one of the most popular JavaScript frameworks. Angular JS extends traditional HTML DOM by adding more attributes which results in more responsive and user friendly applications. AngularJS is totally open source and is one of the hottest web frameworks around the world. The first version of AngularJS was developed by Google in 2009. Since then it is being maintained by Google. This article contains brief AngularJS Introduction.

This tutorial is intended for web developers who are looking to add a useful skill to their arsenal. To understand AngularJS you need to have good understanding of HTML, CSS, JavaScript and some Ajax. If you are not proficient with the aforementioned technologies, I would advise you to first study them and then come back here to learn what AngularJS is. Even if you are not a professional web developer but a casual programmer with basic knowledge of HTML, CSS and JS you would find this tutorial series very helpful.

Salient Features of AngularJS

Following are the salient features of AngularJS framework.

  • AngularJS is based on MVC(Model View Controller) architecture. This makes AngularJS applications loosely coupled.
  • AngularJS is very suitable for developing RIA (Rich Internet Applications)
  • AngularJS applications are cross-browser compatible. The JavaScript required to run applications smoothly in different browsers is handled automatically via AngularJS.
  • AngularJS is open source and has growing developer community.

Advantages of AngularJS

Following are some of the major advantages of AngularJS

  • AngularJS is extremely useful for create robust and responsive single page applications.
  • AngularJS is based on principle of separation of concerns and makes use of dependency injection.
  • AngularJS helps developers write less code and achieve more functionality.
  • AngularJS uses HTML for views and JavaScript for controller. This makes AngularJS applications extremely fast.

Disadvantages of AngularJS

There are two major disadvantages of AngularJS applications.

  • AngularJS applications are not much secure since lots of AngularJS functionalities are implemented on the client side.
  • AngularJS applications depends upon JavaScript, therefore if a user disables JavaScript in his/browser, AngularJS functionalities wont work.

In this article we covered AngularJS introduction. From the next article onwards, we shall delve into writing AngularJS code. You will see how to develop a basic AngularJS application.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .