Post
Ask Question

Brief Introduction Of AngularJS

Table of Content

  • Introduction

  • Why do we need AngularJS?

    1. Two way data bind
    2. Test Driven Development
    3. Unit Testing
    4. Template Data Binding
    5. Separation of concerns
    6. 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

ABGULARJS
(img src: jeffwhelpley.com)

Before writing the first program in Angular let’s talk about why AngularJS needed. Before Angular, jQuery is popular JavaScript library and jQuery has its 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 binding means if you update model then it reflects on view or you can say it updates our DOM element without any refresh.

TWO WAY
(img src: docs.angularjs.org)


Test Driven Development

AngularJS supports Test Driven Development (TDD). TDD is an 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.

Testing
(img src: optimalbi.com)


Template Data Binding

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

Template
(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
(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.

Injection
(img src: antjanus.com)

First Program

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

DOWNLOAD

Click on Download AngularJS 1

DOWNLOAD

Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>My First App In AngularJS</title>  
  6.     <script src="scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body ng-app style="font-family:verdana;">  
  10.     <div><input type="text" ng-model="Name"></div>  
  11.     <div style="clear:both; height:20px; width:10px;"></div>  
  12.     <div>{{Name}}</div>  
  13.     <div style="clear:both; height:20px; width:10px;"></div>  
  14.     <div ng-bind="Name"></div>  
  15. </body>  
  16.   
  17. </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 ”{{}}”  performance wise. Both take the same time. Only difference is we can add some text easily in expression bind.
  1. <div>  
  2.     Hello, {{ Name }}  
  3. </div>  
  4.   
  5. <div>  
  6.     Hello, <span ng-bind=" Name "></span>  
  7. </div>  
Both example will give same output.

Output

OUTPUT
 
Hope this article is helpful.

Read more articles on AngularJS:


Similar Articles