AngularJS

Angular is a JavaScript framework that helps build web applications.

Benefits of AngularJS

• Dependency Injection
• Two Way Data-Binding
• Testing
• Model View Controller
• Directives, Filters, etc...

Module in AngularJS

A module is a container for different parts of your application i.e controllers, services, directives, filters, etc.

var app=angular.module("myModule",[]);

Controller in AngularJS

In angular a controller is a JavaScript function. The job of the controller is to build a model for the view to display.

var myController=function($scope){

$scope.message="Angular JS";

};

when the controller name is misspelled,

• An error is raised. To see the error, use browser developer tools.
• The building expressions in the view that are in the scope of the controller will not be evaluated.

when the property name in the binding expression is misspelled,

• angular will not report any error. It will simply return null or undefined.

Two way Data-Binding in AngularJS

The two way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.

Binding expression updates the view when the model changes

{{firstname}}

ng-model directive updates the model when the view changes

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

ng-model directive can be used with

• input
• select
• textarea

AngularJS Filters

Filters are used to format, sort, and filter data.

Filters can be used with a binding expression or a directive.

• currency Format a number to a currency format.
• date Format a date to a specified format.
• filter Select a subset of items from an array.
• json Format an object to a JSON string.
• limitTo Limits an array/string, into a specified number of elements/characters.
• lowercase Format a string to lower case.
• number Format a number to a string.
• orderBy Orders an array by an expression.
• uppercase Format a string to upper case.

To apply a filter use pipe(|) character

{{ expression | filterName:parameter }}

To sort the data in Angular

-Use orderBy filter

 {{ orderBy_expression | orderBy: expression : reverse }}

 {{ x in cars | orderBy:'model':false }}

 to sort in ascending order, set reverse to false.

 to sort in descending order, set reverse to true.

AngularJS Services

A service in Angular is simply an object that provide some sort of service that can be used with in an angular application.

Services encapsulate reusable logic that does not belong anywhere else(i.e Directives, Filters, Views, Models, and Controllers)

Benefits of using services:

• Reusability
• Dependency Injection
• Testability