AngularJSBy

Nishikant Taksande

NetPay Merchant Services

Rewind

Basic Principles and Browser Event

$watch, $digest and $scope life cycle

$services, $filters

Module, Controllers, Directives, Scope, Filters, routes

Form Validation

<form name="form” novalidate>

<label name="email">Your email</label>

<input type="email" name="email" ng-model="email" placeholder="Email Address" />

</form>

required ng-minlength ng-maxlength

custom validation

Control Variables in Form

formName.inputFieldName.property

<div class="error” ng-show=“signup_form.name.$invalid">

...

...

</div>

Unmodified Form - formName.inputFieldName.$pristine

Modified Form - formName.inputFieldName.$dirty

Valid Form - formName.inputFieldName.$valid

Invalid Form - formName.inputFieldName.$invalid

Errors - formName.inputfieldName.$error

Form Validation…

Custom model update triggers

ng-model-options="{ updateOn: 'blur' }”

ng-model-options="{ updateOn: 'mousedown blur' }”

<input type="text" ng-model="user.name"

ng-model-options="{ updateOn: 'blur' }" />

<input type="text" ng-model="user.name" ng-model-options="{ debounce: 250 }" />

Dependency Injection…

How to get hold of dependencies?

Using ‘new’ operator

Referring global variable

Pass to it where needed

Dependency Injection…

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

myModule.factory('greeter', function($window) {

return {

greet: function(text) {

$window.alert(text);

}

};

});

var injector = angular.injector(['myModule', 'ng']);

var greeter = injector.get('greeter');

Dependency Injection…

fnText = fn.toString().replace(STRIP_COMMENTS, '');

argDecl = fnText.match(FN_ARGS);

forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg) {

arg.replace(FN_ARG, function(all, underscore, name) {

$inject.push(name);

});

});

Named Parameter

What happens if the JavaScript code was minified?

app.controller('DemoController', ['$scope', '$http', function ($scope, $http) {}

Dependency Injection…

ng-app=“myModule”myModule$provide.factory(‘obA’, ‘’, …)

$injectorInstance

catchInstance factory

Check cache If no cache

create new

$injector.get(a)

configure

DIRECTIVE ?

Directives

Markers on DOM element

ngBind, ngModel, ngClass

Matching directives: ng-model=“my_model”

Normalization

Directives…

<div ng-controller="Controller">

Hello <input ng-model='name'> <hr/>

</div>

ngModel

Directive Types

<my-dir></my-dir>

<span my-dir="exp"></span>

<!-- directive: my-dir exp -->

<span class="my-dir"></span>

Directives… Embedded expression :

<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

$watch

<svg>

<circle cx="{{cx}}"></circle>

</svg>

Error: Invalid value for attribute cx="{{cx}}"

<svg>

<circle ng-attr-cx="{{cx}}"></circle>

</svg>

Directives…

Creating directive – example 1

Directive of Directive can be composed.

Break view into separate HTML using templateUrl

Creating directive – example 2

templateUrl: function(elem, attr){

return 'customer-'+attr.type+'.html';

}

Directives…

A E C

'AEC'

Why should I use “A” or “E”?

Directives…

Isolate scope of Directive

Directive

Controller

View

dScope: ‘=myScope’

myScope = ‘cScope’

cScope: {}

html html html

dScope

Directives…

//...

scope: {

dScope: ’=myScope'

},

//...

Creating directive – example 3

Module. Why?

• Each feature

• Each reusable Component

• Application level module

HTML Compiler

Compile

Link

Quick check

angular.copy angular.isArray

ngHide ngChange

angular.isDate

angular.toJson

ngShow

ngPaste

$http $location $log

$exceptionHandler

F u n c t i o n s

D i r e c t i v e s

S e r v i c e s

A n g u l a r J S