Brief Introduction Of AngularJS

Table of Content

  • Introduction
  • Why we need Angular
    • Two way data bind
    • Test Driven Development
    • Unit Testing
    • Template Data Binding
    • Separation of concerns
    • Dependency Injection
  • First Program
  • How it works

Introduction

AngularJs is a javascript framework maintained by google. It is an open-source javascript framework. It is completely free. It is used in Single Page Application (SPA) project. Latest version of angularjs is 2.0 but still it is a beta version. I am not going to cover any feature of 2.0 in this article. AngularJs works on MVW framework. MVW stand for model view whatever.

Why we need Angular
Why-AngularJS

Before write the first program in angular let’s talk about why angularjs needed. Before angular, jquery is popular javascript library and jquery has their own limitations. I am not going to elaborate the difference between jquery and angular but yes I am going to cover some differences.

Two way binding

AnuglarJS supports two way data bind. Two way bind means if you update model then it reflects on view or you can say it update our DOM element without any refresh.

Two_Way_Data_Binding
(img src: docs.angularjs.org)

Test Driven Development

AngularJS supports Test Driven Development (TDD). TDD is a approach where we do test first and then we go for development. The benefit of implementing TDD is our requirement clear to us.

tdd
(img src: firebearstudio.com)

Unit Testing

This is a process in which we test the smallest part of our application.
Test-First-Comic
(img src: optimalbi.com)

Template Data Binding

This binding populates the associate DOM element with the result of rendering template.

concepts-databinding1
(img src: docs.angularjs.org)

Separation of concern

According to Wiki: “Separation of concerns (SoC) is a design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. A concern is a set of information that affects the code of a computer program.”
separation-of-concerns
(img src: www.flexrule.com)

Dependency Injection

Dependency Injection (DI) is a pattern that implements inversion of control for resolving dependencies. A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it.
angularjs-dependency-injection
(img src: antjanus.com)

First Program

Before writing any program in AngularJS first we need to download AngularJS.
Download AngularJs

Click on Download AngularJS 1

Download AngularJs

Code

<!DOCTYPE html>
<html>
	<head>
		<title>My First App In AngularJS</title>
		<script src="scripts/angular.min.js"></script>
	</head>
	<body ng-app style="font-family:verdana;">
		<div><input type="text" ng-model="Name"/></div>
		<div style="clear:both; height:20px; width:10px;"></div>
		<div>{{Name}}</div>
		<div style="clear:both; height:20px; width:10px;"></div>
		<div ng-bind="Name"></div>
		<div style="clear:both; height:20px; width:10px;"></div>
		<div> Hello, {{ Name }} </div>
		<div style="clear:both; height:20px; width:10px;"></div>
		<div> Hello, <span ng-bind=" Name "></span></div>
	</body>
</html> 


How It works

Let’s understand the code.

Firstly, add a reference of AngularJS.

Secondly, add ng-app directive at root. ng-app will auto bootstrap application. Some more directives used in this demo are ng-model and ng-bind. We will talk about directive in next article.

Note: There is no difference between ng-bind and expression bind ”{{}}” as performance wise. Both take same time. Only difference is we can add some text easily in expression bind.

<div>  
    Hello, {{ Name }}  
</div>  
<div>  
    Hello, <span ng-bind=" Name "></span> 
</div> 

Both example will give same output.

Output

output

Next Article Module and controller in angularjs
Hope this article is helpful.

Tags: , , , , , , , ,