by Dinesh Thakur Category: AngularJS Tutorial

AngularJS is the open-source JavaScript framework of Google to make SPA (single-page applications or one-page web applications or dynamic web app) and which was recently made available to the public under the MIT license. AngularJS is a JavaScript framework that extends HTML DOM to make it dynamic, and develops its own tags and attributes. AngularJS is the client-side technology, entirely written in JavaScript that only require HTML, CSS, and JavaScript. It is anextensible framework that wants and pushes towards a structured development.

                    What is AngularJS

It is based on MVW framework (Model-View-Whatever), where whatever means Whatever Works for You and allows you to build well structured, easily testable, and maintainable front-end applications. The AngularJS can be used both as MVC and MVVM framework.

AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons at BratTech LLC(California). Its latest version is 1.4.3.

AngularJS is built around the idea that declarative programming should be used for creating user interfaces and cabling software components, while the imperative programming is excellent for expressing business logic. The framework adapts and extends the traditional HTML to better manage dynamic content to through the two-way data-binding (data link in both directions), which allows automatic synchronizationof models and views.

Key features of AngularJS

1. AngularJS is a client-side framework

  1. It runs in the user's web browser (not on the server that hosts the site, such as PHP type of traditional web languages).
  2. It offers an organization for code and the operation of your application; it runs the application launch andnavigation from one part to another of the application.
  3. AngularJS is written in JavaScript and Its applications are coded in JavaScript.
  4. It is suitable for creating single-page applications where the browser loads the page once, and then makes asynchronous calls to the server to load new data . Asynchronous in this context means that the application continues to run without stoppingto wait for the server response.

2. AngularJS is Prescriptive.

  1. There is are commended way to create applications.
  2. AngularJS has its own vision of the MVC (Model-View-Controller) makes it particularly suitable for JavaScript.

3. Two-Way data binding.

This feature greatly facilitates the creation and managementof the user interface(UI).
Suppose you have a form and you want to fill in the data returned by the server.
Here is how you could go about it in classical JavaScript:
In the HTML code:

         <input type="text" id="name">

In JavaScript:

         document.getElementById('name')[0].text = 'Dinesh';

This technique has several disadvantages:

1. It's tedious. It must find the right element within the DOM.

2. If HTML changes (and therefore the DOM), your code may no longer work.

3. The operation must be repeated each time the server sends new data With two-way data link (two-way data binding), AngularJS allows you not to worry about all that. Everything happens automatically.

In the HTML code:

         <input type="text" ng-model="name">

In JavaScript:

 = 'Dinesh';

The data (in our example, the variable name) is stored in one place, and all parts of the application that uses the data using the same version of the information. If the information changes, everyone will be informed.

In our example, the JavaScript code sends a value in the DOM, but the beauty of this feature is that if the DOM changes (for example, if the user changes the form), the change is automatically transmitted back to the JavaScript code. All this without a single line of code.

In classic JavaScript, it should attach a DOM event listener to detect changes made by the user:

document.getElementById('name').onChange(function () {

var new_text = this[0].text;


Below example better illustrate the strength of AngularJS:

<!DOCTYPE html>

<html ng-app>
    <title>Hello World </title>
<script type="text/javascript" src=""></script>
         Friend List:<input type="text" ng-model="NewFriend"/>
         <button ng-click="add()">Add</button>
         <hr />
             <h2>Friend List</h2>
         <h1>Welcome {{NewFriend}}!</h1>


1. Excellent templating Engine

2. Handle DOM masterfully

3. Easy Data manipulation

4. MVC Architecture

Core Feature

1. Directive: HTML extension that allows the creation of new attributes and new elements and its helps to make dynamic HTML.

2. Data Binding: Data synchronization between the model and the view.

3. Filter: Formats the value of an expression to display it to the user.

4. Routing: It is switching views concept.

5. Controllers: Controllers are JavaScript functions that are bound to a particular scope.

6. Scope: The context where the model and functions are stored in the controllers, guidelines and expressions to access.

About Dinesh Thakur

Dinesh ThakurDinesh Thakur holds an B.C.A, MCSE, MCDBA, CCNA, CCNP, A+, SCJP certifications. Dinesh authors the hugely popular blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps. For any type of query or something that you think is missing, please feel free to Contact us.