Basics of AngularJs

Why AngularJs?

There are various frameworks out there which helps us with web application development. Then why AngularJs? Here are some of the core features of AngularJs.

MVC Architecture

       AngularJs applications are built using  MVC (model–view–controller) Or MVVM (model–view–viewmodel) architecture. This ensures clear isolation between application components.

MVC is an architectural pattern which modularise business logic,presentation logic and interaction between the two. Here Model is the data (like any data object) View is presentation layer (HTML,or partial views) and Controller is a function which apply business logic and present it to view. Spring MVC is a widely used server side architecture.

The architecture followed in angularJs slight different than the conventional MVC frameworks. Here controller acts as bridge between view and model. So It is also called as MVVM (model–view–viewmodel) framework. To avoid such confusion and arguments a more common usage evolved is MVW ( Model View Whatever).

Use of more familiar HTML

  HTML is the template language in angularJs. Most of the web developers are familiar with HTML tags. AngularJs just extend the features of html using it's directives.(We will see directives in details later).

Easy Integration

AngularJs can be easily integrated to web applications by simply importing AngularJs library.
This can be done in two ways
1. Download the angular.js lib from https://angularjs.org/ and keep it in local application directory.

2. Point your code directly to angular script on the Google CDN server.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

SPA design

  In a Single Page Application (SPA) all necessary code (HTML, CSS and JavaScript) is retrieved with a single page load. Appropriate resources are dynamically loaded and added to the page as necessary. This reduce much loading time and pages become more responsive.
AngularJs has different directives to support SPA design.

Two way data-binding

This is one of the very important feature of AngularJs. This provides synchronisation between Model and View layers. Model changes propagated to the View, and View changes are instantly reflected back in the Model. Below is the code which explains this can be implemented using plain JavaScript and AngularJs.

Problem scenario: We have an input textbox and a model object. Model object hold the value in the textbox. At any point of time these two should be in sync.

Example using javascript function

<script>
     var modelObject="";
     function syncToModel() {
      modelObject = $("#inputtextbox").val();
     }
     function syncToView(){
      $("#inputtextbox").val(modelObject);
     }
     //Assume some other function which modifies the modelObject value.
     function updateModeldata(){
      modelObject ="New value";
      //To reflect the latest value to HTML textbox call syncToView function
      syncToView();
     }
</script>
<input type=text id="inputtextbox" onchange="syncToModel()"/>

 
Using AngularJs

<input type=text id="inputtextbox" ng-model="modelObject"/>

You've just seen one of the very powerful and frequently used directive of angularJs ng-model. This does the same thing as javascript functions syncToModel and syncToView but with the essence of much reduced coding.

So that's all about the basics of AngularJs.Now create your first application - Simple AngularJs Application in eclipse.