AngularJS !!!

What is it ?

Why should we learn it ?

History of AngularJS

THE GUY !!

Misko Hevery

Let's get started !!

Learning Curve !!

The Big Picture

$compile, $digest, $apply services

Module

Config Block

Run Block

Dependency Injection

What does it mean?

$provider "provides" us with the dependencies that we need.

module.constant

register a constant service with the module

store configurations

application wide variables

which do not change

module array syntax

    .run(['VERSION','$rootScope',function(VERSION,$rootScope){
    	alert(VERSION);
		}]);
						

Controller & $scope

$scope is the glue between controller and view

$scope provides context

$scope vs $rootScope

Whats the difference?

Methods and Properties on $scope

AngularJS allows you to bind methods as well as simple values

Routing

Used to provide deep linking.

Used to decide what View is to be loaded.

Requires separate sub-module

Angular Router

URL based.

Requires ngRoute sub-module

Use $routeProvider to define routes.

Maps the URL to a View and Controller combo.

UI Router

Views are based on state of Application.

Requires ui.router sub-module

Use $stateProvider to define routes.

Maps the state to a View and Controller combo.

Allows nesting of views.

Views

Is AngularJS compiled DOM

is the product of the $compile merging the html template with $scope

How Views Work?

In-built Directives

Types

Layout Directives

Interaction Directives

Layout Directives

ngif

ngShow/ngHide

ngRepeat

ngSwitch

ngInclude

Interaction Directives

ngModel

ngBlur/ngFocus

ngClick

ngSubmit

Styling Directives

ngClass

Services

$http Service

core Angular Service

facilitates communication with remote HTTP servers

using XHR object or JSONP

is based on the deferred/promise API exposed by the $q service.

$http methods (REST)

$http.get

$http.head

$http.post

$http.put

$http.delete

$http.jsonp

PROMISES

returned value of calling $http is a promise

use then method to register callbacks

callbacks recieve a single argument

an object representing the response.

Communication between controllers

Controllers should not talk to each other

use service to facilitate communication

$broadcast sends events downwards

$emit sends events upwards

$on listens for events

$rootScope

Custom Directives

Directive Definition Object

tells the compiler how a directive is supposed to be assembled.

Common Properties on the DDO are

Link Function, Controller Function

Restrict, Replace

template and templateUrl

Replace

Replace DOM element it is defined on with the directive template

Restrict

Restricts the definition of the directive

E-Element

C-Class

M-Comment

A-Attribute

Template URL

Replaces current content of DOM element with content of template loaded via templateUrl.

Link Function

is where the DOM manipulation happens

comes with scope, element, attrs

element is a jQuery instance of the DOM element the directive is declared on.

attrs is a list of attributes declared on the element.

Controller Function

is constructed during the pre-linking phase

recieves $scope which is the current scope for the element.