AngularJS

What is AngularJS?

AngularJS is a client-side MVC framework written in JavaScript. It greatly helps us to write modern, single-page, Ajax-style web applications. Although, it is a general purpose framework, but it truly shines when used with CRUD type applications.

Setting up AngularJS environment

Including AngularJS library• Download from angularjs.org• Or use one hosted on Google’s CDN network like so

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

Simple Hello World application

Output

One Way Data Binding

Two Way Data Binding

Extending Hello World

Scopes

• A $scope object in AngularJS is here to expose the domain model to a view.

• By assigning properties to scope instances, we can make new values available to a template for rendering.

Getter Functions

<h1> Hello, {{ getName() }} </h1>

Controllers

• Controller is a JavaScript constructor function to initialize scope objects.• When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.

Use controllers to :

• Set up the initial state of the $scope object.• Add UI specific behavior to the $scope object.

Model

• AngularJS models are plain, old JavaScript objects.• Any valid Javascript object or array can be passed to a model.• To expose a model to AngularJS you simply assign it to a

$scope.

Hierarchy in scopes

• We need to have at least one instance of a scope to create a new scope because ng-controller directive will create a new scope using Scope.$new()

• AngularJS has a $rootScope i.e. a parent of all the scopes.• $rootScope instance gets created when a new application is

bootstrap.• Scopes are arranged in hierarchical structure which mimic the

DOM tree of the application.

Inheritance

Output

Fetching parent scope using $parent

Rule of thumb

Try to avoid using the $parent property as it strongly links AngularJS expressions to the DOM structure created by your tempaltes. An application might break as a result of simple

changes.

Alternative to $parent

Declarative template view – imperative controller logic

• AngularJS promotes declarative approach to UI construction. Templates are focused on describing a desired effect rather than on ways of achieving it.

• It promotes declarative style of programming for templates and imperative one for JavaScript code (controllers and business logic)

Modules

Dependency Injection

• In addition to registering objects in a namespace, it is also possible to declaratively describe dependencies among those objects.

• It can perform following activities: Understand a need for collaborator expressed by objects. Wire up objects together into fully –functional application

Dependency Injection ($scope Obj)

Services

Controller example

var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);

Registering Services

Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

Service example

Filters

A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter.

Filter example

<div ng-controller="FilterController as ctrl"> <div> All entries: <span ng-repeat="entry in ctrl.array">{{entry.name}} </span> </div> <div> Entries that contain an "a": <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span> </div></div>

angular.module('FilterInControllerModule', []).controller('FilterController', ['filterFilter', function(filterFilter) { this.array = [ {name: 'Tobias'}, {name: 'Jeff'}, {name: 'Brian'}, {name: 'Igor'}, {name: 'James'}, {name: 'Brad'} ]; this.filteredArray = filterFilter(this.array, 'a');}]);

Communicating with Back-end Server

• AngularJS is well equiped with various back-ends using XMLHttpRequest (XHR) and JSONP requests.

• It has a general purpose $http service for issuing XHR and JSONP calls as well as a specialized $resource service to easily target RESTful endpoints.

Making XHP requests with $http

Other XHR request methods

• GET : $http.get(url, config)• POST : $http.post(url, data, config)• PUT : $http.put(url, data, config)• DELETE : $http.delete(url, config)• HEAD : $http.head• JSON : $http.jsonp(url, config)

Request/Response data conversion

• The $http.post and $http.put methods accept any JavaScript object (or a String) value as their data parameter. If data is a javaScript object it will be by default , converted to a JSON string.

• The $http service will try to convert responses containg a JSON string into JavaScript object.

HTTP Response parameters

• Data : The actual response data• Status : The HTTP status • Headers : HTTP response headers• Config : The configurable object that was supplied with

request.

$resource service

• AngularJS provides a dedicated $resource services to make interactions with REST endpoints.

• The $resource service is distributed in a separate file (angular-resource.js), and resides in a dedicated module (ngResource).

• To use $resource we need to declare dependency on the ngResource module from our application.

$resource example

Forms

Controls (input, select, textarea) are ways for a user to enter data. A Form is a collection of controls for the purpose of grouping related controls together.

Creating a form

Processing form

Form output

Using CSS classess

• ng-valid: the model is valid• ng-invalid: the model is invalid• ng-valid-[key]: for each valid key added by $setValidity• ng-invalid-[key]: for each invalid key added by $setValidity• ng-pristine: the control hasn't been interacted with yet• ng-dirty: the control has been interacted with• ng-touched: the control has been blurred• ng-untouched: the control hasn't been blurred• ng-pending: any $asyncValidators are unfulfilled

Customizing Form UI

<style type="text/css"> .css-form input.ng-invalid.ng-touched { background-color: #FA787E; }

.css-form input.ng-valid.ng-touched { background-color: #78FA89; }</style>

Validating an email form field

<div ng-show="form.$submitted || form.uEmail.$touched"> <span ng-show="form.uEmail.$error.required">Tell us your email.</span> <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> </div>

Why Should We Use AngularJS?• MVC done right• A declarative user interface• Data models are POJO• Behavior with directives• Flexibility with filters• Write less code• DOM manipulations• Service providers• Unit testing ready• Dynamic binding

Thank You