Upload
chaitu215
View
215
Download
0
Embed Size (px)
Citation preview
8/15/2019 Final 141113114649 Conversion Gate02
1/41
Superheroic JavaScript MVW Fram
8/15/2019 Final 141113114649 Conversion Gate02
2/41
Table of contents
•Short about AngularJS
• AngularJS Best practices• AngularJS 1.3
• AngularJS 2.0
8/15/2019 Final 141113114649 Conversion Gate02
3/41
• Modularity
• Dependency injection
• Two – way binding
• Directive
• Filter
• Templating
• Service
• Teting ready
!" #tc"
Why angular is
powerful
8/15/2019 Final 141113114649 Conversion Gate02
4/41
Best Practices
8/15/2019 Final 141113114649 Conversion Gate02
5/41
Directory structure
8/15/2019 Final 141113114649 Conversion Gate02
6/41
8/15/2019 Final 141113114649 Conversion Gate02
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/15/2019 Final 141113114649 Conversion Gate02
8/41
o' 'e ha)e po'erful te#plates
8/15/2019 Final 141113114649 Conversion Gate02
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
8/15/2019 Final 141113114649 Conversion Gate02
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)
8/15/2019 Final 141113114649 Conversion Gate02
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
8/15/2019 Final 141113114649 Conversion Gate02
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
8/15/2019 Final 141113114649 Conversion Gate02
13/41
ool* What about perfor#ance @
8/15/2019 Final 141113114649 Conversion Gate02
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
8/15/2019 Final 141113114649 Conversion Gate02
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 ,
8/15/2019 Final 141113114649 Conversion Gate02
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
8/15/2019 Final 141113114649 Conversion Gate02
17/41
Angular 1.3
8/15/2019 Final 141113114649 Conversion Gate02
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
8/15/2019 Final 141113114649 Conversion Gate02
19/41
Perfor#ance
8/15/2019 Final 141113114649 Conversion Gate02
20/41
Perfor#ance
8/15/2019 Final 141113114649 Conversion Gate02
21/41
Perfor#ance
• 5httpPro)ider.useAppl!As!nc6true8C
• one,ti#e binding
8/15/2019 Final 141113114649 Conversion Gate02
22/41
for# , ng;odel
• ng;odel.5)alidators• 5parsers E 5for#atters
• ng;odel.5as!ncDalidators
• ng;odel.ng;odel9ptions
8/15/2019 Final 141113114649 Conversion Gate02
23/41
for# , ng;odel.5)alidators
8/15/2019 Final 141113114649 Conversion Gate02
24/41
for# , ng;odel.5)alidators
8/15/2019 Final 141113114649 Conversion Gate02
25/41
8/15/2019 Final 141113114649 Conversion Gate02
26/41
for# , ng;odel.ng;odel9ptions.debounce
8/15/2019 Final 141113114649 Conversion Gate02
27/41
for# , ng;odel.ng;odel9ptions,getterFsettter
8/15/2019 Final 141113114649 Conversion Gate02
28/41
for# , ng;odel.ng;odel9ptions.update9n
8/15/2019 Final 141113114649 Conversion Gate02
29/41
for# , ng;essages
8/15/2019 Final 141113114649 Conversion Gate02
30/41
for# , ng;essages
8/15/2019 Final 141113114649 Conversion Gate02
31/41
for# , ng;essages
8/15/2019 Final 141113114649 Conversion Gate02
32/41
for# , ng;essages
8/15/2019 Final 141113114649 Conversion Gate02
33/41
9ther , co#posable SD?
8/15/2019 Final 141113114649 Conversion Gate02
34/41
9ther , all9rothing
8/15/2019 Final 141113114649 Conversion Gate02
35/41
9ther , 5'atch?roup
8/15/2019 Final 141113114649 Conversion Gate02
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
8/15/2019 Final 141113114649 Conversion Gate02
37/41
Angular 2.0
8/15/2019 Final 141113114649 Conversion Gate02
38/41
Angular 2.0
controllers
::9
5scope
angular.#odule
+
8/15/2019 Final 141113114649 Conversion Gate02
39/41
8/15/2019 Final 141113114649 Conversion Gate02
40/41
I4 A
8/15/2019 Final 141113114649 Conversion Gate02
41/41