Overview of AngularJS

AngularJS is an open source web application framework. It is now maintained by Google. The most of the code can be eliminated by using the angular data-binding and dependency injection.

Features :

• It provides an option to the developers to write the client side application in a clean MVC (Model View Controller)format.
• It automatically handles the JavaScript code which is been suitable to the browser.
• It is a powerful JavaScript based development framework to create a Rich Internet Application (RIA).
• It is open source i.e. completely free. It is licensed under Apache License Version 2.0.

The main core features are also been described below :

Data-binding : 

It automatically synchronizes the data between the model and view components.

Scope : 

The scope is the binding part between HTML and the JavaScript i.e. view and controller. Scope is an object which contains the available properties and methods.

Controller :

Controllers are regular JavaScript Objects. These control the data of the AngularJS applications. All the angularjs applications are been controlled by controllers and ng-controller directive defines the application controller.

Services :

AngularJS has built-in services. For example $http request to make XMLHttpRequests. These all are singleton objects which are been instantiated only for once in the app.

Directives :

AngularJS lets us to extend the HTML with new attributes called Directives. These are the markers on the DOM element. AngularJS has built-in directives and also we can define our own directives.

Filters :

Filters can added to format data in AngularJS .  The filters can be added to expressions by using pipe character i.e. | and followed by filter name.

Routing :

It helps our application to become a single page application. If we want to navigate to different pages in the application and also we wanted it to be single page i.e. no page reloading then we can use ngRoute Model. The ngRoute will routes the model without reloading the page.

Dependency Injection :

AngularJS has a built-in dependency injection which will help the developer by making the applications to develop easier, understand and test.

Model View :

MVC is a design pattern for dividing an application with different parts called Model View Controller. 

Advantages :

• It creates single page application (SPA).
• The code is unit testable.
• It also provides reusable components.
• Here we write less code and get more functionality.
• It has a data-binding capability to the HTML.
• The main advantage is AngularJS applications can run on all major browsers and also on smart phones which include both android and IOS phone/tablets.

Disadvantages :

• server side authentication and authorization must be required in order to keep the application secured otherwise it may not be secured.
• If JavaScript is disabled for the application by the user then only the basic page will be seen to the user and nothing else will be seen.

Importance of AngularJS :

Few important features of the angularjs are been mentioned below in the image :

Components :

The AngularJS Framework is divided into three major directive parts. They are :

1. ng-app : This directive will link the angular application to the HTML.

2. ng-model : This directive will bind the values of angular application to the HTML view input controls.

3. ng-bind : This directive binds the angularjs application data to the HTML tags.

MVC Architecture :

It is known as Model View Controller or MVC Architecture. It is a software design pattern for developing web applications. This is made up of three parts. They are :

Model :  It is responsible for maintaining the data.

View : It displays the specific portion of the data to the user.

Controller : It controls the interaction between model and view.

MVC View :

The controllers receives all the requests from the application and then it works with model to prepare the data which is been needed by the view. The view will be the final representation response with the given data by controller.

Model will manage the application data. It updates the data based on controller information and it will respond the request from the view

View will present the data in a particular format and the controller will trigger the view to present the data and every decision is been decided by the controller.

Controller will perform the interactions on the data model objects. The control receives input, validates it and then sends a request to the model to update the data.

Angular JS Digest Life Cycle

AngularJS offers an excellent feature known as two-way data binding. Data binding means when the value is been changed in the view, then the scope model will automatically gets updated and in the similar way of the scope model changes then the view will be updated itself by the new value. Now how this is been done ??

For this, angularJS will set up a watcher on the scope model, it will be updated on the view and same if the view changes it will be updated in the scope model.

Syntax :

$scope.$watch('updateValue', function(newvalue, oldvalue) {
//here it will update the DOM element with the new value
});

        Here, the second argument which is been passed to the $watch() is known as the listener function and it is called whenever the value of updateValue changes. It is easy for us to remember that when the value changes the listener will be called, with updating the expression in HTML. Now we get a doubt that how does angular will know when the updateValue is been changed so that it can call it's respective listener. So, to solve this $digest cycle comes into the picture.

            The $digest cycle starts with a call of $scope.$digest(). For Example the scope function can be changed in the handler function through the ng-click directive or it can be any other directive . In this case when the scope gets changed the angular will call the $digest cycle by calling the $digest() and it will then fire the each watch. These watchers will check if the current value of the scope model is different from the old value. If yes, then the respected listener function will be executed. As a result, if there are any expression in the view they will be updated. In addition to this event, there are several other directives/services which will let you change models and automatically triggers a $digest cycle.

              Angular will never call the $digest() method directly. Instead of this, it calls $scope.$apply() which will in turn call the $rootScope.$digest(). So, the digest cycle starts with the $rootScope and it will visit all the child scopes by calling the watchers.

For Example : 

when we attach a ng-click directive to a button and a pass a function name to it. Now, when the button is clicked, the angular will just wrap the function call in the $scope.$apply() and next the digest() comes in to verify whether the changes are been reflected in the view or not.

$scope.$apply() will automatically call the $rootScope.$digest(). The $apply() is of two types.

The first is function will be taken as argument, evaluates it and triggers a $digest cycle.

The second doesn't take any arguments, it just starts a $digest cycle when it is been called.

For all built-in directives angular will wrap the code in $apply() and starts $digest() cycle. There would be a chance for us to call the $apply() manually i.e. if the model is been changed outside of the angular context then we need to inform angular the changes by calling the $apply() manually. It is like we are informing angular that the you are changing some models and the watchers need to be fired so that your changes can be done properly.

For Example : 

If we use setTimeout() function to update a scope model. Angularjs doesn't know what has been changed. so for this we  need to call $apply() to make sure that the changes take effect.

angular.module('myApp',[]).controller('MessageController', function($scope) { 

     

     $scope.getMsg = function() {

          setTimeout(function() {

               $scope.msg = 'fetched message after 3 seconds';

               console.log($scope.msg);

          }, 2000);

      }

     $scope.getMsg();

    });

Here, we need to see that the model needs to get updated after a two second interval but doesn't get updated because we didn't apply the $apply() function. So, we need to add $apply() function in the above code as shown :

$scope.getMsg = function() {

          setTimeout (function() {

              $scope.$apply(function() { 

                   $scope.msg = 'fetched message after 3 seconds';

                   console.log($scope.msg);

               }

          }, 2000);

      }

          $scope.getMsg();

       });

Now the view gets updated after two seconds and the only change in the code is $scope.$apply() which will automatically trigger $rootScope.$digest so the watchers will be fired and the data will be updated.

Always we need to use version $apply() that accepts a function argument because when a function is passed to the $apply() it will wrap the code in the code in try...catch block and if any exception occur then it will be passed to the $exceptionHandler service.

jQuery Attributes

The basic components which can be done related to DOM elements are the properties and attributes which are been assigned to the elements.

Most of the attributes are been available in JavaScript as a DOM node properties. The most used properties are :

• id
• tagName
• className
• href
• title
• src

For Example consider a div element :

< div id="newDiv" class="selected" title="This is my first element." > This is my Div < /div > 

< span id="span1" > < /span >

In this element, the tagname is div and the id,class,title are the element's attributes. Each one consists of a name and value. In jQuery we can manipulate an elements attributes easily.

Get Attribute Value :

The attr() can be used in get attribute value. It is used to fetch the value of an attribute from the first element or to set the value onto all matched elements.

Example :

Here, the below example will fetch the title from the div and that title value is stored in the variable called title and set this text to the span for the id of "span1".

output:

This is my Div

This is my first element

Set Attribute Value :

The attr(name,value) method will set the named attributes to all elements by using the passed value.

output :

As the alt attribute value is been changed from Sample image to the Image couldn't be loaded and also the image path is not available in the source. So, the alt value is set to the updated one.

So, the output will be :

Image couldn't be loaded.

Applying class to the elements :

The addClass method is used to add the classes to all the matched elements. The multiple classes can be separated by space.

Example :

output :

This is my first div

This is first paragraph.

Methods for Attribute :

1. removeClass( class ) :

The removeClass method removes all the mentioned classes from the matched elements.

Parameter : class i.e. the name of the class name which has to be removed from the elements.

Syntax :

selector.removeClass( class );

Example :

output :

This is my first div

This is first paragraph.

2. hasClass( class ) :

The hasClass( class ) method will check whether the specified class has the matched elements or not. If the class is present it returns true or else it returns false.

Syntax :

selector.hasClass( class );

Parameter :

class : The name of the class.

Example :

output :

This is first paragraph.

This is second paragraph.

true

false

3. attr( properties ) :

The attr( properties ) method will set key/value object as the properties to all the matched elements.

Syntax :

selector.attr({ prop1:val1,prop2:val2})

Parameters :

property : css property of the matched element.

value : value which has to be set.

Example :

output :

As the image src is empty and first the alt is none and then it is changed to Logo. So, the attr method will update the alt value to Logo.

Logo.

4.  html() and html( val ) :

html() will get the html content of the  first matched element and the html( val ) will set the value for the specified element.

Syntax :

selector.html();

selector.html( val );

Example :

output :

Here the second div content is replaced by the first div content.

This is first div.

This is first div.

4. text() and text( val ) :

The text() will combine the text contents of all the matched elements and the text ( val ) will set the text contents of all the matched elements.

Syntax :

selector.text();

selector.text( val );

Example :

output :

Here, the text of the div is stored in data1 and data2. Div2 data is replaced with div1 and div3 data is been replaced with div2. But the CSS doesn't change.

This is first div.

This is first div.

This is second div.

6. val() and val( val ) :

The val() will get the input value for the first matched element and the val ( val ) will set the input for the every matched element

Syntax :

selector.val();

selector.val( val );

Parameter : 

val : If it is called on input element it will set for every matched element but if it is called for select tag with the option value then only the passed value will be selected or if it is called for checkbox or radio box then all the selected radio box and check box which are matched will be checked.