AngularJS

Web applications traditionally consists of multiple pages.As the user interacts with the web page ,it results in a post back or request for a new web page.

If the user selects some input value on a web page it results in a new request to the web server.So as the user interacts with the different input elements on a web page there could be many requests to the server to  fetch the updated HTML.

Many web pages uses ajax to prevent a full page post back to the server.This approach prevents refreshing of the entire page.But if the web server is returning HTML back to the web page it can still have an impact on the performance as a section of a page will be rendered by the web server.

Also the user action may result in redirection to a different web page.

Interaction between web server and web browser always have some impact on the responsiveness of the web application.This is because there is always a network latency involved in request and response process.This prevents a web application from being as much responsive as a desktop application.

Single Page Applications

For understanding Single Page Application we need to consider the factors involved in developing a fluid web application.

Normal web applications consists of lots of requests to the server.This can have a big impact on the performance.So if we are contacting web server for every user interaction such as selecting a value in a dropdown or clicking on a context menu this could make the application appear less responsive to the user.

As the processing power of client machines is increasing day by day  and with multicore processors becoming common , it is more useful to implement the application logic on the client rather than on the server.Also scripting languages such as JavaScript is supported by most modern web browsers.

So application logic should be implemented on the client side instead of the server if we want to develop fluid web applications.

Single page applications  consists of a single web page.All the necessary resources are fetched from the server on the first page load.As the user interacts with the web page ,it contacts the web server and is dynamically updated.
Instead of fetching new HTML page from the server web page retrieves just the necessary resources from the server such as data.
Same web page is dynamically updated rather than fetching new HTML from the server.If there is need to update the HTML then it is updated on the client rather than being fetched from the server.

This means that the web page never refreshes and the user gets the same experience as a desktop application.

The interaction between the web page and the server happens in the background.
Single Page application (or SPA ,as it is commonly called) significantly reduces the interaction between web browser and web server.So the SPA application can work with very less network bandwidth.

Common Frameworks for developing Single Page Applications

Single Page Applications can be difficult to implement since web pages are effectively stateless.So implementing application logic on the client side and working with much less interaction with server can be challenging.
There are few Javascript frameworks which makes it relatively easy to develop Single Page Applications.

For starting development of Single Page Application suitable frameworks needs to be selected.

Some of the frameworks are:

• AngularJS      Maintained by google.One of the most commonly used frameworks.
• Ember        One of the newer frameworks.More suitable for bigger projects than small projects.
• Meteor      Has simple data binding.
• Backbone     Commonly used frameworks.Has a relatively small download size.

Each of these frameworks use MVC architecture for creating SPA application.AngularJS provides support for templates.These templates are used to create the views which represents different UIs.
Views are always in sync with the model.So any changes in the model or view are automatically reflected in the other.

Follow on:

Events and Event handlers

Event handling is an important feature of most applications.Event is an action performed by an end user or some application component to notify the application.Common example of events are:

• User clicking a button on the User Interface or pressing a shortcut key.
• Notification by a database component when a new record is inserted in a table.

When an event occurs it is handled by an event handler.Depending upon the system requirement application can handle the event in different ways.For example on clicking the save button the save event handler will be called which will save the values in the database.

Events in AngularJS

Events in a AngularJS application can be classified as

• Mouse events occurs when some mouse button action occurs such as mousedown.
• Keyboard events occurs when some keyboard button action occurs such as keydown
  change events.
• Change events occurs when a value of some input text element changes such as the text in a textbox.

Some of the important events commonly used in an AngularJS application are:

Event Directive	Description	Example
ngClick	Attaches behavior for the elements click event	<button ng-click=”buttonClicked()”>
ngDblclick	Attaches behavior for the elements double click event	<button ng-dblclick=”buttonDoubleClicked()”>
ngFocus	Attaches behavior for the elements focus event	<input type=”text” ng-focus=”focusCount=focusCount+1″ ng-init=”focusCount=1″ > Focussed {{focusCount}} times </input>
ngKeydown	Attaches behavior for the elements keydown event	<input type=”text” ng-keydown=”keydownCount=keydownCount+1″ ng-init=”keydownCount=1″ > key down pressed {{keydownCount}} times </input>
ngKeyup	Attaches behavior for the elements keyup event	<input type=”text” ng-keyup=”keyupCount=keyupCount+1″ ng-init=”keyupCount=1″ > key up pressed {{keyupCount}} times </input>
ngMousedown	Attaches behavior for the elements mousedown event.	<input type=”text” ng-mousedown=”mousedownCount=mousedown+1″ ng-init=”mousedown=1″ > mousedown pressed {{mousedownCount}} times </input>
ngMouseup	Attaches behavior for the elements mouseup event.	<input type=”text” ng-mouseup=”mouseupCount=mouseup+1″ ng-init=”mouseup=1″ > mousedown pressed {{mouseupCount}} times </input>
ngSubmit	Attaches expression to the onsubmit event.	<form ng-submit=”submit expression”></form>
ngChange	Attaches behavior for the input elements change event such as the change in the value of a textbox	<input type=”text” ng-model=”name” ng-change=”nameUpdated()”></input>

Handling events in AngularJS
We can specify either a function or an expression as a value of most of the event directives.To handle an event in AngularJS application we follow the below steps:

1.  Identify the element to which event needs to be attached
2.  define an event handler.This could either be an event handling function or an expression
3. attach the function or expression to the element using the event handling directive of AngularJS

In the following example we have specified an inline expression as a value of the ng-click directive for the first button element.Whereas for the second button ng-click refers to a function.

<!DOCTYPE html>
<html lang="en">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myModel = {};
$scope.myModel.sayHello = function()
{
alert('Hello!');
};
} );
</script>
</head>

<body ng-app="myapp" ng-controller="MyController">

<div ng-controller="MyController" >
</div>

<button ng-click="message='welcome '+name" ng-init="name='ashish'" >
Say Welcome!
</button>
<button ng-click="myModel.sayHello()">
Say Welcome!
</button>
<span>
{{message}}
</span>
</body>
</html>

Communicating across the controllers with $broadcast(),$emit()  and $on()

Real world AngularJS application will consist of many controllers. We can use events for communication across the different controllers.AngularJS provides the following methods which implements the publisher subscriber design pattern for communication between the controllers

• $broadcast() Used for raising events.The events travel from the parent controller to the child controller
• $emit()  Like $broadcast() this is also used for raising events.But the events  raised by $emit() travel from the child controller to the parent controller
• $on() Used for defining the event handler for the events raised by the $broadcast() and $emit() methods.

Follow on:

Data binding is an important part of any application.AngularJS provides several different methods of data binding.There are several data binding expressions which we can use depending on the scenario.

Some of the useful directives related to data binding are

ng-bind

This directive is useful if we want to perform one way data binding from the source to the target but not the other way.So the changes in the source are reflected in target but the changes in the target are not reflected in the source

we use this directive as:

<div ng-bind="Property"/>

We will define the following controller for the examples here

var app = angular.module('app', []);
app.controller('Ctrl',['$scope', function ($scope) {
$scope.Name="AngularJS";
}]);

We apply the above controller to the body element.In the div we set the data binding using the ng-bind directive.

<body ng-app="app" ng-controller="Ctrl">
<div ng-bind="Name"/>
</body>

There is another easy to understand syntax for ng-bind directive ,data binding expression .Instead of applying ng-bind directive to an element we can use the following
{{Property}}
So we can write the above example using expression as

<body ng-app="app" ng-controller="Ctrl">
{{Name}}
</body>

Using any of the syntax for data binding is similar and when rendered both displays the text “AngularJS”.

ng-model

If we want to use two way data binding in AngularJS application then we can use the ng-model directive.We can apply the ng-model directive to any input element
such as text.The effect of applying this directive is that when the value in the input element changes the value in the viewmodel also changes.The value in the input element can change as a result of user entering a new value.

We can use ng-model directive as:

<input type="text" ng-model="Property"/>

So we can use this directive using the Name property defined in our controller as:

<input type="text" ng-model="Name"/>

The effect of applying this directive is that the Name value in $scope changes.Using this directive the changes are automatically propagated in both ways from target to source and vice versa.

If we use the following markup which one-way binds the Name property in the $scope to the div.Also we are binding the text input to the same Name property using ng-model.

<body ng-app="app" ng-controller="Ctrl">
<div>Hello {{Name}}</div>
<input type="text" ng-model="Name"/>
</body>
</html>

The effect is that as we enter the text in the text box it is displayed on the screen.

ng-non-bindable

Sometimes we may require to use the  brackets as a literal rather than being interpreted as a data binding expression.In such a scenario we can use the ng-non-bindable directive.

For example the following directive will render the text  Hello {{Name}}

<div ng-non-bindable>
Hello {{Name}}
</div>

If we had not used this attribute then the value of the Name.

ng-repeat

This directive is used to display items in a collection of items.So if the collection contains 5 items then the specified HTML template will be rendered for the 5 items in the collection.

If we define the employees collection as:

var app = angular.module('app', []);
app.controller('Ctrl',['$scope', function ($scope) {
$scope.Name="AngularJS";
$scope.employees=
[
{Name:'Mark',Department:'HR',Id:1},
{Name:'Tim',Department:'Finance',Id:2},
{Name:'Frank',Department:'Administration',Id:3}
];
}]
}]);

We can render the items in the employees collection as:

<body ng-app="app" ng-controller="Ctrl">
<div ng-repeat="emp in employees">
Name:{{emp.Name}} Department:{{emp.Department}} Id:{{emp.Id}}
</div>
</body>

When using ng-repeat directive HTML template is rendered for the items in the collection .We are not required to write custom code to loop through all the items in the employees collection and rendering the template for each item.

So the data binding directives in AngularJS simplifies many common data binding scenarios without the need to write custom logic.

Follow on: