AngularJS Overview

Introduction

AngularJs is an open-source JavaScript framework. It is a powerful JavaScript framework to create Rich Internet Applications (RIAs). It enables developers to write client-side applications that are cross-browser compliant.

Core Features of AngularJs

Data-binding

Data binding in AngularJs is the automatic synchronization between model and view. When the model changes, the view is automatically updated and vice-versa. Generally, the template system binds the data from the model to the view (only in one direction) and after the merger of the template and model components, views are not automatically reflected model changes and the same as any changes done by the view is not reflected in the model. So in this case, the developer needs to write code that constantly syncs the view with the model and the model with the view. An AngularJs template provides two-way binding.

Controller

The Controller is a JavaScript constructor function. AngularJs applications rely on controllers to control the flow of data into the application. The Controller can be attached to the DOM via the "ng-controller" directive. This directive tell Angular to instantiate a new Controller object using the specified Controller's constructor function and a new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.

Services

AngularJs supports the concepts of "Separation of Concerns" using a services architecture. Services are JavaScript functions responsible for performing a specific task only. Services are used by controllers and filters as needed. Services are normally injected using the dependency injection mechanism of AngularJs. AngularJs comes with several built-in services such as $http, $route, $window, $location, and so on. These are singleton objects that are instantiated only once in the app.

Scope

Scope are objects that refer to the model. They play the important role of joining the controller with the view. It is an execution context for the expression. Scope can watch the expression and propagate the event. Scope is the glue between the application controller and the view.

Filters

Filters select a subset of items from an array and return a new array. AngularJs supports basically the five types of filters, uppercase, lowercase, currency, filter and orderby.

Directives

AngularJs directives are a marker on a DOM element. The AngularJs HTML compiler ($compile) identifies these directives and attach a specified behavior to that DOM element. There are many built-in directives, such as ngBind, ngModel, ngController, ngApp and so on.

Templates

Templates are written with HTML that contains specific attributes and elements. Angular combines the template with information available with the model and controller to render the dynamic view. These can be a single file or multiple views in one page using "partials".

Routing

Routes in AngularJs enable us to create various URLs for different content for the application. The route is defined in the URL by #sign and route. For AngularJs, route is nothing but a bookmarkable URL.

Model View Whatever (MV*)

MVC is a design pattern for dividing an application into three parts (Model, View and Controller), each has distinct responsibilities. AngularJs does not implement MVC in the traditional way, but rather something closer to MVVM (Model-View-ViewModel). The AngularJs team refers it as Model View Whatever.

Deep Linking

Deep linking allows us to encode the state of the application within the URL so that it can be bookmarked and the application can be restored from the URL to the same state.

Dependency Injection

Dependency Injection (DI) is the software design pattern in which components are passed as dependencies instead of hard coding them. AngularJs has a built-in dependency injection subsystem that helps in making the application easier to develop, making components reusable, maintainable and testable.

Advantages of AngularJs

• With AngularJs we can create a Single Page Application in a very clean and maintainable way.
  
  
• Databinding capability to HTML of AngularJs provides a rich and responsive experience.
  
  
• Code is unit-testable.
  
  
• Provide dependency injection.
  
  
• Provide Separation of Concerns.
  
  
• Less code and more functionality.
  
  
• In AngularJs, views are pure HTML and controllers and services are written in JavaScript to perform the business operation.

Disadvantage of AngularJs

• AngularJs is a JavaScript framework, so it is not safe. Server-side authentication and authorization is necessary to keep an application secure.
  
  
• If the application user disables JavaScript then the user will only be able to view the basic page and nothing more.

Hello World Application with AngularJs

The following is the procedure to create an AngularJs application from scratch.

Step 1

AngularJs applications are a mix of HTML and JavaScript. The first step is to create an HTML Page.

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
    </body>
</html>

Step 2

Include an AngularJs JavaScript file in the head tag of HTML.

<!DOCTYPE html>
<html>
             <head>
                       <title>AngularJS Test Application</title>
                         <script src="angular.js"></script>
            </head>
            <body>
           </body>
</html>

Step 3

We need to tell AngularJs what part of the HTML contains the AngularJs app. We need to define an attribute (directive) ng-app to the root HTML element of the AngularJs app. Typically, the root element is either the html element or the body element.

<body ng-app="myapp">
</body>

Step 4

Define an Angular Controller and define the scope of the angular controller for the element of HTML.

The Controller is a normal JavaScript function that takes one or more parameters or dependencies. In the following example I have passed a $scope parameter. The $scope is a model object to be used by the controller function and a respective view.

<script>
   angular.module("myapp", [])
   .controller("HelloController", function($scope) {

   } );
</script>

The controller function is registered in Angular via the angular.module(ModuleName).controller(...) function. Here "angular" is a global object defined in AngularJs JavaScript that is included at the beginning of the page. The first parameter of the angular.module() function is the name of the application specified in the ng-app attribute in the body element. The same as the first parameter of the controller() function is the name of the controller function and ng-controller attribute of the view refer them. The second parameter is the controller function itself.

AngularJs Application Execution

When a HTML document is loaded into the browser and is evaluated by the browser, first the AngularJs JavaScript file is loaded and the Angular global object is created and our JavaScript that registers the controller functions is executed. Then AngularJs scans the HTML to look for AngularJs apps and views and finds a controller function corresponding to the view. Now AngularJs executes the controller functions and updates the views with data from the model populated by the controller.

Now AngularJs listens for browser events, for example button clicked, mouse moved, input field being changed and so on. If any of these events catch then AngularJs will update the view accordingly. The following is the work flow diagram of AngularJs.



Example:

<head>
    <title>AngularJS Test Application</title>
    <script src="angular.js"></script>
    </head>
    <body ng-app="myapp">
     <h2>AngularJS Sample Application</h2>
        <div ng-controller="HelloController" >
            <p>Result: {{helloTo.title}}</p>
        </div>
        <script>
            angular.module("myapp", [])
            .controller("HelloController", function($scope) {
                $scope.helloTo = {};
                $scope.helloTo.title = "Hello World, AngularJS";
            } );
        </script>
    </body>
    undefined

</html>

Output



Example with Angular Expression

Angular expressions are JavaScript code snippets that are placed in binding such as {{expression}}. They are used to bind the application model data to HTML. Expressions behave in the same way as ng-bind directives. AngularJs application expressions are pure JavaScript expressions and outputs the data where they are used.

Code

<html>
    <head>
        <title>AngularJS Test Application</title>
        <script src="angular.js"></script>
    </head>
    <body ng-app="myapp">
        <h2>AngularJS Sample Application</h2>
        <div ng-controller="HelloController" >
            <p>Result: {{helloTo.title}}</p>
            <br/>
            <input type="text" ng-model="textData" />
            <br/>
            <p> You have entered : {{textData}}</p>
        </div>
        <script>
        angular.module("myapp", [])
            .controller("HelloController", function($scope) {
                $scope.helloTo = {};
                $scope.helloTo.title = "Hello World, AngularJS";
        } );
</script>
    </body>
</html>

Output



Conclusion

AngularJs is a powerful JavaScript framework to create Rich Internet Applications (RIAs). It enables developers to write client-side applications that are cross-browser compliant.