angularjs final

8/18/2019 AngularJS Final

1/44

Angular JS


2/44

Directives, Scope and Even

Jaiswal, Rupal


3/44

Angularjs Controller

●A controller is a JavaScript Object, created by a standa JavaScript object constructor.

●AngularJS application ainly relies on controllers to conto# data in t!e application.

● $!e ng-controller directive de%nes t!e application cont

●Controller accepts &scope as a paraeter w!ic! re#ers tapplication


4/44

Scope●Scope is a special javascript object w!ic! plays t!e role

controller wit! t!e views

●Scope contains t!e odel data. 'n controllers, odel dataccessed via &scope object.

●Scopes provide conte(t against w!ic! e(pression are ev

●All applications !ave a &rootScope w!ic! is t!e scope cr

t!e )$*+ eleent t!at contains t!e ng-app directive.

var app angular.oduleyApp, /012

app.run#unction&rootScope1 3

&rootScope.color blue2

https://docs.angularjs.org/guide/expression


5/44

Scope 'n!eritance

●Scope are controllers speci%c. '# we de%nes nested contrc!ild controller will in!erit t!e scope o# its parent control

var ainApp angular.odule5ainApp5, /012

ainApp.controller5s!apeController5, #unction&scope1 3

&scope.essage 5'n s!ape controller52

&scope.type 5S!ape52

412

ainApp.controller5circleController5, #unction&scope1 3

&scope.essage 5'n circle controller52

412


6/44

Events

●AngularJS !as its own )$*+ events directives.

●An AngularJS event will not overwrite an )$*+ event, bowill be e(ecuted.

● ng-c!ange● ng-clic6

● ng-copy● ng-cut● ng-dblclic6● ng-paste


7/44

7alidation


8/44

E(aple


9/44


10/44


11/44

Angular e(pressions are JavaScript-li6e code snippets. $!eapplication data to a )$*+ eleent. 8ritten inside two cit reinds us o# JavaScript e(pressions. $!oug! Angular are di9erent #ro JavaScript, it is an e9ort to bring JavaS#unctionalities, suc! as, operators, variables, conditions )$*+. :ou can assign values to t!e e(pressions, dynai

an Angular directive. $!is tec!ni;ue will spare you #ro static values and instead you can add di9erent types o# according to your c!oice.

'C$'=<


12/44

AngularJS E(pressions using String?@D=C$:E !tlB?!tlB?scriptsrc5!ttpaja(.googleapis.coaja(libsangularjs.F.GanB?scriptB?bodyB

?div ng-app5 5B


13/44

AngularJS e(pression using nubers?@D=C$:E !tlB?!tlB?script

src5!ttpaja(.googleapis.coaja(libsangularjs.F.GangulascriptB?bodyB?!HBSu o# two sing 'nput $ype


14/44

AngularJS e(pressions using =bjects

?!tlB?!eadB?titleB*y %rst AngularJS E(pression code?titleB

?scriptSRC5!ttpsaja(.googleapis.coaja(libsangularjs.K.HB?scriptB?!eadB?bodyB?div ng-appB?div ng-init5custoer3 naeAb!ijeet jos!i,addressCA+S$A$E+A, eailjeetLya!oo.co45B

E(pression Result 33 custoer.nae 5 5 custoer.address 5 5 custoer.eail 44

?divB?divB


15/44

$ernary =perator

A $ernary =perator in Angular is an alternative to i#, else co

JavaScript. Angular introduced t!is #eature in its version ..giant leap #orward in a6ing t!is #raewor6, awesoe.:ou cternary operator in e(pressions.

A $ernary operator ta6es t!ree e(pressions. '# t!e condition iwill evaluate t!e %rst e(pression and it becoes t!e result. E

evaluate t!e second e(pression and t!at becoes t!e result

Synta(Condition N %rstOe(pression secondOe(pression


16/44

E(aple o# $ernary =perator?div ng-app

ng-init5#eb/ 3 day, availableKM 4,

3 dayK, available 4,3 dayH, availableF 4,3 dayF, waitingM 4,3 dayM, availableH 405B

?div ng-repeat5seats in #eb5B

?divB33 Day seats.day 44 P 33 seats.available B

Available - seats.available 8aiting +ist - seats.waiting 44 ?divB ?divB

?divB

= $i i di


17/44

=ne $ie inding

8it! version .H, Angular introduced a new #eature, called t!

binding, #or t!e %rst tie. '# you use

Double Colon1 in an

it will create one-tie binding.

=ne-tie e(pressions will stop recalculating once t!ey are s!appens a#ter t!e %rst e(ecution i# t!e e(pression result is aunde%ned value

8!en we declare an e(pression using , it tells Angular to bind once a value is assigned to it. Angular will unbind it andupdates wont a9ect t!e view. Consider it a Trender-onceU tyrat!er t!an Tbind once.U


18/44

E(aple

?@D=C$:E !tlB?!tlB

?scriptsrc5!ttpaja(.googleapis.coaja(libsangularjs.F.GanB?scriptB?bodyB

?div ng-appB


19/44

Di9erence between AngularJS e(preand javascript e(pressions

Double curly braces are Angularjs e(pressions and single

are javascript objects.>nli6e JavaScript e(pressions, AngularJS e(pressions can b

inside )$*+.

AngularJS e(pressions support %lters, w!ile JavaScript e(pnot.

AngularJS e(pressions do not support loops, and e(ception JavaScript e(pressions do.

'n Javascript we use eval1#unction to evaluate e(pressionangular we evaluate e(pressions using 3344 and it calls

evaluate t!e e(pressions,basically w!at &parse does t!a


20/44

Angular Services

- SaSavin


21/44

●Separation o# Concern.

●Substitutle objects t!at can wired toget!er using Depend'njection.

●+aVily 'nstantiated.

●>sed to organiVe and s!are data aong and #unctions aapplications.

8!at are Angular Services


22/44

●Starts wit! &

W &%lter

W &!ttp

W &resource

W &route

Angular pre-de%ned services


23/44

Create Custo Services

●Service 1 Return t!e instance o# t!e #unction to wor6 w

Iactory 1 Returns t!e value o# #unction returned a#ter e(e


24/44


25/44


26/44

>sing Angular Services

●Add Angular Service as a dependency #or t!e coponenController, Service, Iilter, Directive1

W angular.oduleapp,/ngRoute,ngResource,s#s.controller,s#s.service,s01

W angular.odules#s.controller,/01

.controllerS#sController,#unction&scope,s#sResource,s#s3


27/44


28/44


29/44

AngularJS XlobaliVation

- YRajnis!


30/44

'ntroduction

+ynda.co

8i6ipedia

Developer Xuide

XlobaliVation 'nternationaliVation +ocaliVation

'nternationaliVation iGn1 is t!e process o# developing suc! a way t!at t!ey can be localiVed #or languages aeasily.

+ocaliVation lQn1, is t!e process o# adapting applicationsenable t!eir usability in a particular cultural or linguistic

Ior application developers, 'nternationaliVing an applica

iGn e(aple

http://www.lynda.com/nmhpexp4?utm_medium=direct&utm_source=linda.com&utm_campaign=url-redirecthttps://www.wikipedia.org/https://docs.angularjs.org/guide/i18nhttps://docs.angularjs.org/guide/i18nhttps://www.wikipedia.org/http://www.lynda.com/nmhpexp4?utm_medium=direct&utm_source=linda.com&utm_campaign=url-redirect


31/44

iGn e(aple

E l Z D


32/44

E(aples Z Deo


33/44

Suary

$e(t Ioratting

luraliVation and Xender

Calendars

Dates,


34/44

AngularJS Aniations

- uro


35/44

-Aniations concentrates on a6ing a user inter#ace bette

better loo6 and #eel w!ic! is ore responsive in nature.

-AngularJS provides aniation !oo6s #or coon directivngRepeat, ngSwitc!, and ng7iew, as well as custo direct$animate service.

-$rigger aniations during t!e li#e cycle o# various directivestriggered, will attept to per#or one o# t!e #ollowing actionon i# an aniation is placed on t!e given directive.

-Aniations are not available unless you include t!e ngAmodule as a dependency wit!in your application

Aniation asics


36/44

Rules #or supported Directives


37/44

uilt in Directives &aniate Events

Directive SupportedAnimation Events

ngRrepeat enter ,leave and move

ngView Enter and leave

ngInclude Enter and leave

ngSwitch Enter and leave

ngIf Enter and leave

ngClass Add and remove

ngShow &ngHide

Add and removetheng!hide class value"


38/44

)ow Does it wor6N

$!ere are ultiately two ways o# using Aniations

.CssH $ransition based aniation

K.Javascript based aniation.

'n bot! t!e considerations we need css classes #or de%nitransition on eleents.


39/44

CSSH transition using aniation

Angular will autoatically detect t!at CSS is attac!ed to an

w!en t!e aniation is triggered, and add t!e .ng-3E7E


40/44

angular.module('myApp', ['ngAnimate'])

.controller('ItemCtrl', unction(!"cope) #

!"cope.item" $ [ #name% &Luncmeat&,#name% &read&

#name% &*il+&,#name% &*u"tard&, #name% &Cee"e

]

!"cope.addItem $ unction() #

!"cope.item".pu"(!"cope.item)

!"cope.item $ #

!"cope.remo-eItem $ unction(inde) #!"cope.item"."pl

/)

)

CSS Cla"" File


41/44

.ade #

tran"ition% /" linear all

01e2+it0tran"ition% /" linear all

.ade.ng0enter #

opacity% 3

.ade.ng0enter.ng0enter0acti-e #

opacity% /

.ade.ng0lea-e #

opacity% /

.ade.ng0lea-e.ng0lea-e0acti-e #

opacity% 3

45*L FIle


42/44

6ul7

6li ng0repeat$&item in item"& cla""$&ade&7

##item.name

6"pan ng0clic+$&remo-eItem(!inde)&7869"pan7

69li7

69ul7

6di- cla""$&ro1&7

6di- cla""$&one0al column o"et02y0tree&7

6input type$&tet& ng0model$&item.name& 97

62utton cla""$&2utton0primary& ng0clic+$&addItem

Item692utton7

JA:ASC;II*A5I?>


43/44

.animation('.ade', unction() #

return #

enter% unction(element, done) #element.c""('di"pl

!(element).adeIn(/333, unction() #done()

)

, lea-e% unction(element, done) #

!(element).ade?ut(/333, unction() # done())

,

mo-e% unction(element, done) #element.c""('di"play',

(element)."lide=o1n(@33, unction() # done())

)


44/44

Tan%s#

angularjs final

Documents