Final 141113114649 Conversion Gate02

8/15/2019 Final 141113114649 Conversion Gate02

1/41

Superheroic JavaScript MVW Fram


2/41

Table of contents

•Short about AngularJS

• AngularJS Best practices• AngularJS 1.3

• AngularJS 2.0


3/41

• Modularity

• Dependency injection

• Two – way binding

• Directive

• Filter

• Templating

• Service

• Teting ready

!" #tc"

Why angular is

powerful


4/41

Best Practices


5/41

Directory structure


6/41


7/41

When angular still loading

• se ng-bind onl! for inde".ht#l or ng-cloak• $or rest use %% &&• When !ou need to set the src of an i#age d!na#icall!

use ng-src instead of src 'ith %% && te#plate.• When !ou need to set the href of an anchor tag

d!na#icall! use ng-href instead of href 'ith %% && te#plate.• (nstead of using scope )ariable as string and using it 'ith st!le

attribute 'ith %% &&* use the directi)e ng-style 'ith ob+ect,li-epara#eters and scope )ariables as )alues

• se $templateCache to decrease / calls (Optimization tips)

se

Templates


8/41

o' 'e ha)e po'erful te#plates


9/41

• a#e !our directi)es 'ith lo'era#elase.• se the dash,deli#ited for#at e.g ng,bind

• se prefi"ed na#es e.g #!,custo#er

• eser)ed prefi"es ng 4 ui

• lean up scope.5on675destro!7* ...8

• use controller 'hen !ou 'ant to e"pose an AP( to otherdirecti)es. 9ther'ise use lin-.

:irecti)e


10/41

Business logic

• ontrollersoShould not do :9; #anipulationsoShould ha)e )ie' beha)ior

• Ser)iceso Should not contain large :9; manipulationso a)e logic independent of )ie'o $or session,le)el cache !ou can

use 5cache$actor!. (Optimization tips)


11/41

• Scope is read,onl! in )ie', Scope #ust refer to the #odel not to be a

#odel 6#odel is +a)ascript ob+ect8

• Scope is 'rite,onl! in controller • 5rootScope nsubscribing 'atchers #anuall!

:e#o 'ith #odel

:e#o 'ithout #odel

5scope

http://plnkr.co/edit/9wMDDlPl4b95pX4qwe0n?p=previewhttp://plnkr.co/edit/CPxLfOFfE71pCvG8lPdz?p=previewhttp://plnkr.co/edit/CPxLfOFfE71pCvG8lPdz?p=previewhttp://plnkr.co/edit/9wMDDlPl4b95pX4qwe0n?p=preview


12/41

• se pro#ises 65s pro)ided ser)ices instead of nati)e *5ti#eout*5inter)al*5'indo'* 5docu#ent

• AngularJS reser)ed prefi" 5* don>t use it 'hen defining a)ariables

• (n :( order should be angular>s at first* then custo#s

• Prefer the usage of controllers instead of ng,init

?eneral


13/41

ool* What about perfor#ance @


14/41

9pti#iing angular

• ?uaranteed 'atchers count is 2.000* lin- to count'atchers

• i#it :9; filters 6Angular 1.2."8• =ach filter runs twice per 5digest c!cle

• se 5filter pro)ider , 5filter67filter786arra!* e"pression* co#parator8C

• $or content 'hat should be rendered onl! once usebindonce 6Angular 1.2."8 or %%#!Dar&& 6Angular 1.3."8

• 5ti#eout 4 5inter)al functions has third argu#ent 'hich

'ill s-ip 5digest loop

https://gist.github.com/manar007/58c09c29ba31e1c571c4https://github.com/Pasvaz/bindoncehttps://github.com/Pasvaz/bindoncehttps://github.com/Pasvaz/bindoncehttps://gist.github.com/manar007/58c09c29ba31e1c571c4


15/41

• :on>t 'rite cra! things in 5'atch callbac- it 'ill -ill !ourapp

• 5'atch has t'o co#parison #odes• referential 6default8 ,


16/41

• ng,repeat , trac- b! 5inde"• B! default* ng,repeat creates a do# node for each ite# and

destro!s that do# node 'hen the ite# is re#o)ed.

• With trac- b! 5inde"* it 'ill reuse do# nodes.

•Der! Bad Practice 55post:igest• 55 #eans pri)ate to Angular* so be a'are that the interface is not

stable

• $ires a callbac- after the current 5digest c!cle co#pletes

• 5ti#eout or 5e)alAs!nc @

9pti#iing angular


17/41

Angular 1.3


18/41

Angular 1.3

• $er%ormance &'()* %ater+• :9; #anipulation

• :irt! chec-ing

• ;e#or! usage

• Ani#ations

• $or#s• $le"ible )alidation

• :ebouncing

• =rror reporting• 9ther

• 5'atch?roup

• te#platea#espace


19/41

Perfor#ance


20/41

Perfor#ance


21/41

Perfor#ance

• 5httpPro)ider.useAppl!As!nc6true8C

• one,ti#e binding


22/41

for# , ng;odel

• ng;odel.5)alidators• 5parsers E 5for#atters

• ng;odel.5as!ncDalidators

• ng;odel.ng;odel9ptions


23/41

for# , ng;odel.5)alidators


24/41

for# , ng;odel.5)alidators


25/41


26/41

for# , ng;odel.ng;odel9ptions.debounce


27/41

for# , ng;odel.ng;odel9ptions,getterFsettter


28/41

for# , ng;odel.ng;odel9ptions.update9n


29/41

for# , ng;essages


30/41

for# , ng;essages


31/41

for# , ng;essages


32/41

for# , ng;essages


33/41

9ther , co#posable SD?


34/41

9ther , all9rothing


35/41

9ther , 5'atch?roup


36/41

9ther , strict:(

ng,europe 201G)ideo H follo',up post

https://www.youtube.com/watch?v=gNmWybAyBHIhttp://goo.gl/ZyUU3Qhttp://goo.gl/ZyUU3Qhttps://www.youtube.com/watch?v=gNmWybAyBHI


37/41

Angular 2.0


38/41

Angular 2.0

controllers

::9

5scope

angular.#odule

+


39/41


40/41

I4 A


41/41

Documents

Final 141113114649 Conversion Gate02