AngularJS

ByNishikant 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 FormformName.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 triggersng-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’, ‘’, …)

$injector Instance

catch Instance

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

ViewdScope:

‘=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

Angular JS