Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

New Features in Angular 1.5

2,272 views

Published on

ng-japan 2016

Published in: Technology
  • Be the first to comment

New Features in Angular 1.5

  1. 1. New Features‘ ‘T in Angular l.5>
  2. 2. Kenichi Koenoei .4 -A AngularJS I177»: . . .
  3. 3. mll~z~y7 C '5’/ “(HfilCT6 ill’: v 7411.9 v AngularJS Japan User Group —r&9:r; %1r-are 59l4t= ==29l= i=t7)l~l{~y'7 (33%: 161*) at cw axe « xy/ “— EZt7)7‘)l«—7l-Zl$’7:)l«7:ll. X “/ t—J‘7J‘35'9 it/ us ‘7.r. )l«77A )<‘7t—‘/ "é5Efll1?‘E> I am looking for people interested in beta testing my latest project: https: lIssqsignon. oom. (1) l’EE£%: Piotr Wéjcik — 1 ltrmmrs. — 8 : “1— % : na+2*n1— H-‘. 'Jlo'E (5) l’E5lZ%: J= l=l$1¥ — 5 i#! D%9% — 57 E1- Webinar- Exploring the Power of Protractor (1) 1’Eli3Z%: Mohamed Yoosuf-1 l¢0)§S¥l7E3 - 19 ii‘: - : i 9 I~ l:1—5—Pa'c*HTMLIx'7—7én'cl. a ? (3) f’Eli‘2%: Takoogle - 3 i5l'-t7J? Q¥i§: - 49 E3. - 7;r—7:x%: E'c»x= eU 'J—7LrrL, :E-: » ltlilzaz Masanori Saki - 6 1¢<7>t9ie - as E; — Anyone going to Tokyo Developers Meetup this Sat (June 6 2015) 7 (1) i’Fli2%: Frode Egeland - 1 i¢#<7)? Hr'i§ - 38 51* (‘E9311protracotrI>X7t‘>&Iw7Jv9 (1) f’FE£%: Mizuho Sakamaki - 1 l¢<7}}Hy§ - 85 E1— ‘T Angularjs style Guide (mgechev) E$EIR’EIi’rb§l. aTl: (1) ' . l’FliE%: §B3iElfi‘-1 l#rI)tQi%~ 116 5;- Angular ng-con! 2015 vldeos 4» slides compilation (1) 1’ElilZ%: Gerard Sans — 1 i¢0)l9iF: % — 62 ti‘: — ng-japan 5fi§L/3?’ ! (1) f’Eli‘Z$: E77‘ -11¢0J? £-3% - 154 E1- 1’Fli‘ZE: Mizuho Sakamaki - 1 14’-0)l5ilv% - BB K 1 — Angu| arJS/ ‘y 7: ‘J ‘/03353] St maize: Mizuho Sakamaki - 2 ittmllixa - 108 E 1 — ng—repear‘t’&i§10?'l: json7J‘51‘iE’&H3l D l: l:l b f: L AI= :t9¥-HIEE5 74»+mtALs 411 Va,
  4. 4. _-.14 ‘ : ‘f: ~.*. :ismw= e*“‘‘'‘‘”’’ :
  5. 5. Agenda Abslrciclion - V1.5 New Features Migration to 1.5 from l. x
  6. 6. hiips: //angu| arjs. org/ A NCUL/ R 41 Home s arch NGULARJS by Google HTML enhanced for web apps! B View on GitHub E Design Docs & Notes Fallow +AnguIarJS on 6 " 131K'°”0W9f5 Learn Angular in your browser for free!
  7. 7. n9 function Welcome to the Ar facilitation. The documentatio directives. ssssss ei Angular Prefixr and names of p 2016/2/5 vl .5.o Anguiar 2016/3/16 vl .5.l . ’3§. .£. E.: '.. “f. 2016/3 / l 8 vi .5.2 Global APls
  8. 8. n9 function Angu | a Welcome to the A1 facilitation. The documehtatio directives. SO'. ’lCE}‘ Angular Prefixr and names of p 1.5.2 differential—recovery (2016-03-18) This release reverts a breaking change that accidentally made it into the 1.5.1 release. See fee7bac3 for more info. directive Stir‘/ it‘i)51 l. '1<: t<)ri<~, .<; vl.5.l ! ! Glolizil / Pl:1
  9. 9. Angular vl.5 M function anguiarbind anguiar. bootstrap angu ar. copy angu ar. e|ement angu anequals angu ar. extend angu ar. forEach angu ar. fromJson angu aridentity anguiariniector anguiar. isArray anguiar. isDate anguiar. isDefined angu ar. isElement angu ar. isFunction angu ar. isNumber angu ar. isObject angu ar. isString angu ar. isUndefined angu armerge angu armodule anguiarnoop anguiar. re| oadWithDebug| nfo anguiar. to. Json directive a form input input[checkbox] input[date] input[datetime~| oca| ] ir1put[emai| ] input[month] inputlnumberl input[radio] input[text] inputltime] input[ur| ] input[week] VTQADD . ... n;. ..i Angula Welcome to the Ar facilitation. The documentatio directives, service: Angular Prefix: and names of p Angubr ng(core This module is pro Directives Services / Factories Filters Global APIS
  10. 10. Abstraction - Angular vi .5 For migration to Angular2 "9 function directive Angula Welcome to the A1 facilitation. The documehtatio dllSCilVeS. SEl'VlC€‘. ‘ Angular Prefix: and names of p Angubr ng(core This module is pro Directives Services / Factories HliBl'S Global APls
  11. 11. Abstraction - Angular2 Component-based
  12. 12. Abstraction - Angular2 '9 7“—L Q sea W4 ><~ytz— . C ¢—a—r'ex o. I | Z“J1’—t~ _' txaeei. -re? Q éfo‘? ‘?0b1—tf—-ear-urea E$HP Pea _’{i: HP_PC_JP 11¢l; o)gfi§~y»f— lsiifi I ?37J‘5’)@TypeScript7J"1371'¥. .. . t.~ 7=tEl— : '‘-"f£l. ‘ lTmedla News @itmedia_news - 28$ ‘ ‘ — @can_i_ao_wen N ws 5ooRT ilfifiilciéfiv iia14i: n<i>i<iieii2 earsxuiamaae '3' 7“’= "3 / um, i. 7 , De 7 , g '7— itmedia. co. jp/ news/ articles/ . . . , ’ Z3 fig 0 @h7omake 1,131 505 462 « £1 ' ___ 3’/ "[§a_r I‘. 7,“: _ | _ by F _ fiE? é E cloud 55 @Cl0Ud55 ' 17li§i§l . . I H*. —flQ@kenichiromo. . @ No Chef, no Puppet. More time developing #Rai| s #apps and less time 1‘ _ : :t—5—zt—~/ x7*~3:5aa~‘/ ‘av configuring boxes 7*” 0 73 J5 BB/ Chocola BBlC3Z%>7El¥ -939 1" u T. :l. (93 N Hl')‘= ‘l. %IDl't§l. a.t 5 3 b <3ma1iI: e7l~‘i,1t§E»r*/ rrl—l~? %> itgfolil brim w L a FmmA to Z’ fr :5‘ : C J ‘C . . iltv)’ l~ lx lfiltlfifieé , ,v. ,m3,U. H,5./ ,,_ everything you need I 1 i / 4¢; —3zi1 to build, deploy and “%""5"*’5"T‘§’”””’ manage Rails apps 5 1*‘ @2016 Twitter rwmerizauz «/17 an #7’<EE"D5’r7‘/5"7’ 754/‘~‘/ — 7v$— ltlalcatxf #t1|~'J7 759%’ 71:17 z? —9x 77uee @712 ° Blfiillfifi I£‘§”ia‘§EE m‘. ’§l$fi2fii2‘. 7J5?t’r/ '| ~JL _ _ _ _ X-7-’»(7 rages Cloud 66 offers the convenience of Paas with flexible options c| oud66.com 4-: 11 U 2 «- D 7lIlE—~‘/37
  13. 13. Abstraction - Angular2 Evan @can_i, do_web 2,»_i— , v». i7— 505 462 l'~ l/ ‘/ H '§1“? €> #*z—5—l. i—‘/ xi‘: 358B): 7 D‘?335 BB/ Chocola BBlC$%z7Cl1E Ayax 1"‘Jf; Li tlaibou #E7:; f;lCL/ '(l$. l7£; l.lé: Ia‘%’/ A3A$+r5‘/ *l~ / «rfir4—3,ifi #£‘TF:7l? f:l7T’?5EE}= f‘9’é #7.K3§E0)5/7‘/ Sivy fit} is ‘)7 ‘2‘7l/ 7J57l’7/"l~)l/ I measure? 1l¢7)XfiE‘7‘f* l~¥: §'/ Tx lTmedia News l(medla_l1BWS 281“) 500RT 7!<1‘¥t: ti: iefi. $i§14tii: <i>l<l£¥ eaa1:u+r—; ~1-veg itmedia. co. jp/ news/ articles/ ... « :3 0 Cloud 66 cloud66 - 17llr*; f‘rfi No Chef. no Puppet. More time developing #Rails tfapps and less time configuring boxes FromA to Z, everything you need to build, deploy and manage Rails apps Cloud 66 offers the convenience of Paas with flexible options c| oud66.com 33§"9"6’D1—*f"— -%?11- ‘f’rfr, ',{7 EIKHP Pea HPAPC_JP @ bf. ‘<S7)@TypeScripl7Z‘ ‘/ :2 7 . . .9: 7xi: i— D 7i: £—~‘/ 2 *2 zit #E 0 hiototake 3: 7>t'El— EJkfi—flBa kenichiromo & 72 El- mbfabitfioltiba: -3 M Gmail7J57 wcxieer ~/11- we lt’£0}7 K‘ l, X1§iT.5§1‘%§'€> ©2D16Twitter Twiiierl: aiY ML7 751/ti 7w$— Efilcamt 71:17‘ X? -5"} 7"7Ui§E§ %‘"e“1¥Ei3J ififiifiiiifiili
  14. 14. Abstraction - Angular2 '0/mu Q em )'4><vt—>‘ 1l‘W)¥fiE‘7*f- btzifx lTmedia News l(medla_l1BWS 281“) N ws 5ooRT7!<1‘¥t: ti: iefi. $i§14tii: <i>l<l£¥ eaa1:u+r—; ~%-veg itmedia. co. jp/ news/ articles/ ... 5 ,3 g ? /“'(§zT ll eibtain (D .1 V In t’: u / ,»_i— 2 1,131 505 462 l'~ l/ ‘/ H ~ mass t¢t—5—l. i—‘/ xfz 358B/ :1 7 D ?3 35 BB/ Chocola BBlC$%z7Cl1E Cloud 66 cloud66 - 17llr*; f‘rfi @ No Chef. no Puppet. More time developing #Rails #apps and less time configuring boxes ‘DEV mm M iaioewsa-2i1:L. .:—3 Gmail7J57 r‘cx1§e4>m—r1;s "a“‘°“ From A to Z, aeamraizc-: i;ti7r. ;t~: .: . 7 _. ,. . . 3_a%w3}h$r5‘/ ifi everythlng you need 1&7); l~ l/7l§l«. ~§¥x§'é / ’f$4—3,3J": to build, deploy and "‘-‘~"‘5"? ’C‘”‘i’3‘*””'i’§’ manage Rails apps ‘ @2016 Twitter TwitlerlZ? lY M17 "”‘3§E‘7’5’7‘/5'7’ 751/t‘-‘ av: ~— ififil-ZULVI ”li1l“J7 71:7“ x? —5i; < 77u; §e§ 9‘7lx aeeeai iZ§‘E, flEiZ 7J57t’7/“i~Jl, Cloud 66 offers the convenience of Paas with flexible options M c| oud66.com K
  15. 15. Abstraction - Angular2 E35 E32015 (/ E3.next ) + Babel E32015 / E3.next + Type3cript
  16. 16. Abstraction - Angular2 E35 E32015 / E3.next + Type3cript 4-
  17. 17. Abstraction - Angular2 'Rl'P ‘RIP "RIP "Rl'P 'Rl'P angular . module 1011-119 2oo9.2o14 2009-2014 controllers DDO Sscope 2009-2014 2009-2014 2009-2014
  18. 18. Abstraction - Angular2 Controller _> Class Service , Factory _> Class Directiveltemplate ) _> Component Directive(tem plate ) -> Directive Filter '> Pipe
  19. 19. "9 function Controller -> Class Service , Factory -> Class My Directive -> Component , Directive directive Angula Welcome to the Ar facilitation. The documentatio directives. S€’VlC€3 Angular Prefixi and names of p Angular GlUb;1lAPl5;
  20. 20. Step v1.x —> v1.5 -> + ngUpgrade M function angu angu angu angu angu angu angu angu angu angu angu angu angu angu angu angu angu angu angu angu angu angu anbmd an bootstrap ancopy anelement anequab anextend anforEach ar. from. Json anidentity aninjector ar. isArray ar. isDate amsDefined anisE| ement amsFuncfion ar. isNumber angu anisobje angu ' JSSMQ . 0 anisundefined an merge ar. module an noop ar. re| oadWithDebuglnfo ar. toJson directive a form input inpuflcheckbofl input[date] input[datetime-local] mpuflemam input[month] input[number] input[radio] input[text] input[time] input[ur| ] inpufiweem n9Apio . ... n:. ... Angula Welcome to the Ar facilitation. The documentatio directives, service: Angularhellxl endnamesofp Angular ng (core This module is pro Directives Services / Factories Filters Global APls
  21. 21. n9 function Angu | a Welcome to the Ar facilitation. Step The documentatio directives. SO'. ’lCE}‘ Anaular Prefixt Time A Floom(#ng4'p #ngJp1) C+D Room(#ngJp #ngJp2) 12:00- OPEN 13:00-13:40 Angular1.5 ¥Frl§fiE / E33“ E— Angu| ar2<7)9E§SZb7§; L3lfi6’§75‘/ TEE : % 14:00-14:40 Progressive Web Apps / E511 EH13. Microsoft Openness TypeScript&: Angu| ar, % b‘CVisual Studio Code / ‘7'1FJ: E 15:00-15:40 Angu| ar2’EE§< 7': tV)(7JAngularJSf7J§‘57'J‘ / ‘E39 151’: Angu| ar2%E%7F'1 I EIE Q32 16:20-17:00 I‘/ ’i—7’5’fZ°Angu| ar0)H)Z‘9 $33} /7l7|< ? §—E3 7 ‘J I*f7'»r 7‘0)¥fifi7J"5l? i‘3%zAngu| ar20)Flfi'é'l$ / HEEEI fifi 17:20-18:00 RXJSEEE2: ‘J 777-4 7‘7—= ’—7—'7?1"0D%§/ Elf‘! -‘J DU? ngUpgrade<’:1§’l‘lE$W§/ $5 EXEB 18:20-19:00 Angular1.5 Component & ngComponentFlouter / 1'75) I I ilifilifi Angular1.4'C*l’l5 5 1’LT: El? i7*f 7 El 17- EX E Angular2/7’f0‘lz—9 El ‘J /11‘ ii- -20:0O CLOSE
  22. 22. New Features in v1.5 n9 function directive Angula Welcome to the Ar facilitation. The documentatio directives, service: Angular Prefixt and names of p Angubr ng(core This module is pro Directives Services / F8CtOl'| eS Filters Global AP| s
  23. 23. New Features in v1.5 component Directive n9 function directive Angula Welcome to the Ar facilitation. The documentatio dlY8CilVeS. SBl'V| C€f Angular Prefix: and names of p Angubr ng(core This module is pro Directives Services / Factories Filters Global APIs
  24. 24. n9 function We come 10 the / i facilitation New Features in v1.5 - component The d(}C. Jlilelll{lllC ilIL§, l!l1,. iIi" . . I'IlClCill| !l, .‘, -fl 1' sing» 1' . ijzcllllglélllfillliiil 'iiilr/ fLciimxuuanrti' . -ll: fc1.1.nio1t1.nL_c, i;: -: -{ 0 ~m. ii'ii; :-: == ._l_ _r <t: ciinr‘t: r'c. >‘l. ‘l_. ;I'r'A, ~;-: ‘/ "IV/ '*iT2I’| lp>l , i: :cnr'‘c: r'¢>‘l. ‘l. ;ui*'‘-: ; ‘: j:1~. v:1.nio1ic_i». «i' , ‘F‘linxi: r:t; .1.c_nnil. i§1~. vt1.ni(ici~. v/l-i 0 0 “r. :‘ri.1.: :_. «:1‘l-1.i: :t:31qrt: :i: sini ‘r‘I. I'm_. "‘r_: i.cn'ni i ll 0 €illt'[i. Il(l0ll. '/ _. :_i ‘l_. ;:'r*'t: l “r: ‘nl_1.. -._. ‘t: -_. ):-it l i l ‘J. _. r ‘i Fl-Ll , ‘t: ;ii‘iig> ‘l_. ar't: t-: -: ii 0 ' <2pP'*l: lililtl/ 'lTIIl| !l _. Ir, =.Ii'iif-:19‘; -<; ,i/ ‘ pl» ‘ 0. 0 '<:1.I| p1I. l“‘i. . “r_. ‘v/ gt-, i=-*"“t: -,. r:«“‘r_. "‘ ugi—-i'iim: l;>’l_: r"i'ilr/ r:i'iipi_. ‘t: ;r: -"if"--‘ , 0 0 '«: TonI. r“r. "‘t: r.-uni nigie-it: ‘l_-1.«t: te= "iiir/ <f: i‘iI9i. . it: ‘l__1.i: :t: §iIrtf‘t: qnnil Ti"--it: 'l_.1.<t: ‘ <'. /.‘oIIir“cf“r: c_i'nr-»' Ll . .flc.11.nil ' ') . ‘T. V)
  25. 25. n9 function Angu | a We come to the / i facilitation New Features in v1.5 - component , T. Il§l! l’[L. 'l ‘i*r'ui'ii ': ingi! i‘l. :ui*'; ;/czc-we'-; gm-r*‘c -iCll: lE_)i1I: lE'. C7i'iTtliiif-l ‘F‘l"tlI'Il '= .i: nLgiI. i‘l. ai. i"'; '.. r Cf,3lllllllCI'Il'-, ' l cg_iC. giiiigxuu; inrt: l «l: 0:17-*‘l. -.: <:r‘t: o-is-: 'I'll‘/ "Ciellillpltlllillfl‘l . “C‘eli'Il: > ‘l. :.i“r_: ;? -: 0 -:91» --lg -{, 'ni= .iiii¢—: .i-l ‘il"; ,/ig>- <: :‘_i. IigII. r‘i: “(TV/ ‘pI§| =“"“r.2‘q)I‘”E. "' llIlglF‘lC1ClE'l. .l; l=‘“‘iiGDI"‘i7"*‘ -zfuiurtftzoiui l 'l. .1.ii: t«, .>-= r" r: 'l_. i.it: t:§1lr‘tf: t:qini l l '‘--<: 'l. i.<t: t <‘. /iIl| .l““f_T"[ZC_l'Il>* Ell r: 'l, .=. I;; -L~_~; till 1 ~ -{ ~cgm‘. nIpIIir‘‘r. (l 'Il? ll'Il§? fl 9‘. "'[I’i'”1.ILg| -j 0 ‘t: -,->: -f‘‘r -: ;r‘t: i“1.Ilg| -,' . v, i. - rfl : i,. ~:t-: _:1I. r“rf“r: oi’ni i )1 ~ ‘ii 'l_. ;ii’r“‘cj l “r: ‘nLi. :; _. ‘‘(: ;): «f‘‘t1 1)
  26. 26. n9 New Features in v1 5 - component ’“"“'°" Angula . Welcome to the Ar facilitation. _ _ ' _ _ _ _ _ _ documentatio Comparison between Directive definition and Component definition -mes. sew~ce~ Directive Component nguiar Prefiyu id names of p bindings No Yes (binds to controller) bindToControIIer Yes (default: false) No (use bindings instead) compile function Yes No 1 gu la r controller Yes Yes (default function() (1-) controllerAs Yes (default: false) Yes (default: $ct rl) link functions Yes No § (C 0 re _ module is pro multiElement Yes No -. r:iivi'-s priority Yes No require Yes Yes restrict Yes No (restricted to elements only) scope Yes (default: false) No (scope is always isolate) template Yes Yes, injectable HS templateNamespace Yes No temp| ateUr| Yes Yes, injectable mi / (pig; terminal Yes No transclude Yes (default: false) Yes (default: false)
  27. 27. New Features in v1.5 - component component Directive - $on| nit "9 function directive Angula Welcome to the Ar facilitation. The documentatio dlfECilVeS. SEl'VlCe‘ Angular Prefixc and names of p Angubr ng(core This module is pro Directives Services i’ Factories l’| liF£fS Global APls
  28. 28. rig function We tjolllt-. ‘ 10 the Ar facilitation New Features in v1.5 - component _ nn. n.. .,. ... .i. ii. . «: ;'. r: i‘”1.§t“r_2>- = .Iu, g_| I.i'l. =_iir; i iiicIcilI. i'l, .-—. ~l ‘= .I‘gipi‘ , _li_| l , . <j: cii'iJgxmi; IIi“"[: l 'iw/ ‘(TLCIilltlcluelnri: ' , -ll: fot1.nio1t‘1.ugi. ,-: -: -{ I l ‘ ‘ Ilillillfil :1 5 :1. : l’ i i: :cur‘t: i"afl. ‘t. :—: i“-: l °i‘iInut-r‘t: .i. cnii ( l i i "l’Ti“Li. :l_. {}lcIlLI. Il. i‘lI = : ‘f‘Iinu<~r‘t: .1.cniil ll 0 <t: oiiLtIe: i‘l. ;>, . ‘Lcxgil ‘-'I§‘icI'ni? _l‘_'ni1“t: ‘ la: -i: “t: (* I i i: i‘l. ;. ‘r: :‘nt.1.. ~;_. I‘_-‘. ll'll‘g}l-I fil- l ‘ificl/ IL_‘Wil_-‘vi. .. ‘l. cIsll ‘ifzclnri: i*~ci‘l_ft, .;: i~" l El-Ll . itzcmtz i"ci‘t. ‘t. ;:i-as 2: ‘ 219:9 ' ) ‘‘i: ;ii‘iigi‘l. .:r‘t: ;> -: ' «zgi---ii -{august . i Ir. -:ii'ii*s: f-l~ “rl-<‘. /‘ 9*: ' l -j <‘. / ~_~'-r: :i”1., ct“t2--
  29. 29. New Features in v1.5 - component component Directive - One-way bindings "9 function directive Angula Welcome to the Ar facilitation. The documentatio CllfECilV8S. S€fVlCe‘ Angular Prefixi and names of p Angumr ng(core This module is pro Directives Services I Factories filters Glot). '1lAPls
  30. 30. New Features in v1.5 - component "9 function Angula Ne ctriie :4; the Pti facilitation 4.§IOlr‘1OIxLZ> filllglllhilr‘ . .IIl0lill. lll‘vll "=1,-lsi‘ , Cl > A fiiif$iIwi: Lr ‘r~Ct~‘7/ , gimii: r'uIl. ik; I'r‘l "= J,m1 , :r'l ‘ , ~foI,1nioit: _1a1gL-I-r<{ ~n= _iiiiaI-I Er‘ ‘t '1‘ l X1 . i/ ‘”l'elIIl. " - 1 ~£ilIl,0l| .I'i : l:o". .l-! ‘='"'A('! ,:‘C: l.m }l~) -; maxim» <iTl'rlowr=1'/ eololiilplmlenii A-- soluliilpiolulalniizl "‘iliriutiitawfioiiilpiolnlaluii. ' , ~l -~qroinI‘i, :r'oll. Ili-gI1e': ._-I-: ‘uni-. mavf' , f“iI. I|Icrit:1tulII( H 3 2 or= .Ir'aniii‘i= .iiiia- ' -; ~<e(IllIi. Zr'oIl. Ik‘gIl. ‘.-fl-I "“_| l1lIt'r: ,|V/ ", nL_gr—-iiloioil‘-lh= t"“i'uni. vl: w—matrix? " F ; l <) 0 " 4-Iaiaiv. vr= w—-oioiiiigioinialnit A-« . qmiiI, -i-iu-. in‘i_: ( "olllilhllfilllcitllllpfllllfillii ' , -l -fujnioitilmgi-. -Ii-r~l_ "‘ll’= _lIIl‘yI-l < Ilg)-'lll0lili‘5=""Il| l$l‘. 'l= jV . II= .llIl‘s"' A» ie (lL}L7_l'll‘. “‘ltll‘C ingumr . izitliile M [iv
  31. 31. New Features in v1.5 - component / 90 Q3 "9 function Two-way binding String Funcfion directive One-way binding Angula Welcome to the Ar facilitation. The documentatio directives. service Angular Prefixi and names of p Angumr Global APls
  32. 32. New Features in v1.5 - component component Directive - Multi-slot transclusion "9 function directive Angula Welcome to the Ar facilitation. The documentatio ClllECilV8S. S€fVlCe‘ Angular Prefixi and names of p Angumr ng(core This module is pro Directives Services I Factories filters Glot). '1lAPls
  33. 33. rig function Angu | a We Collie to the / i facilitation New Features in v1.5 - component The dC<Jcl'lll: “‘ldll(/ ‘I-_"-‘Ti i"i. §l‘tZ>- ', .-. .i‘nit_g: ii. i‘l. .=_i. i", i i'iirIcilLi‘l, .a: ll ". -'. I;i‘i, :» ‘ ll l ifitlélifftll l E| —‘g" ; |gI; :1lff“[il'”l_. , _l: ‘i'“l. .I'riii'. '‘‘[1i. if: i'ril ) . . i: :c, ii‘il’gIc,1'n. i;iIr“ti t ' i'ilL. i'l. “‘t: .i. ‘}i'fl_. U"'tiT‘ il"‘. -‘. I'l‘l1§'i-CI‘l, .LE§3j. 'Z| El ‘ T. ={ I I «: :c_. iini‘t: l"(-_-l‘l_. .l_. ?.“l"1t5.. _‘iTi mu‘| ,.‘t:1fé'l_. ci°‘t: ‘t: ;iii. i§> ‘. .ar‘t: ;> 2: «mil W ‘. _l; .‘? t<. cl l V-
  34. 34. New Features in v1.5 - component Demo n9 function directive Angula Welcome to the Ar facilitation. The documentatio directives, service: Angular Prefixe and names of p Angubr ng(core This module IS pro Directives Services / Factories Filters Global APls
  35. 35. New Features in v1.5 - ngAnimate ngAnimate ( v1.5.x ) - ngAnimateSwap Directive "9 function directive Angula Welcome to the Ar facilitation. The documentatio directives. service Angular Prefixi and names of p Angular Gltit);1lAPls
  36. 36. New Features in v1.5 - ngAnimate Demo2 n9 function directive Angula Welcome to the Ar facilitation. The documentatio directives, service: Angular Prefix: and names of p Angumr ng(core This module IS pro Directives Services / Factories Filters Global APls
  37. 37. New Features in v1.5 - $cancelRequ铧i‘ ngResource ( v1.5.x) - $cancelRequest n9 ion directive Angula Welcome to the Ar facilitation. The documentatio directives. service Angular Prefixi and names of p Angular Glot). '1lAPls
  38. 38. New Features in v1.5 - $cancelRequ铧i‘ Demo3 n9 ion directive Angula Welcome to the Ar facilitation. The documentatio directives. service: Angular Prefix: and names of p Angubr ng(core This module is pro Directives Services / Factories Filters Global APls
  39. 39. New Features in v1.5 - Routing Component Router "9 function directive Angula Welcome to the Ar facilitation. The documentatio directives. service: Angular Prefix: and names of p Angubr ng(core This module is pro Directives Services / Factories Filters Global APls
  40. 40. n9 function Angu | a We come to the Ar facilitation. New Features in v1.5 - Routing The documentatio ’1lV(7 Carr n, -_. Time A Floom(#ngJp #ngJp1) C+D Room(#ngJp #ngJp2) 12:O0- OPEN 13:00-13:40 Angular1.5 ¥fit&i‘a‘E/ fialt fi- Anguiar2o>9E?6zL,7‘. ;ti: éi‘<v>/ a/tlEi’Z. .E2 % 14:00-14:40 Progressive Web Apps / 39¢ EH13 Microsoft Openness TypeScripttAngular, % LFCVisual Studio Code / #J: E 15:00-15:40 Angu| ar2’zE§< 7'i: l¢)0JAngularJSOD €73" / ‘SEE ifii Angu| ar2¥fi7F"1 / EIE {£3511 16:20-17:00 I‘/7 -7’5’fZ“Angular0JHX‘9 l‘iHv7>* / ’i7F 1§—fil5 5 '7 I474 7‘U)1El#. "i7J‘5l? i'3éAngu| ar20)filfiE'l$ / $t13EE iffi 17:20-18:00 FlxJSlfl¥t ‘J 777"»r7'7-= l=7T‘7?1'0J%§ IF‘. -i3l¥] K1? ngupgradetfilfifififi/ fig EXEB 18:20-19:00 Angular1.5 Component & ngComponentRouter / iii} I I 9E%I2§ Angular1.4‘C*l’l5 5 HT: E1774 7 El 17- E1 ‘E Angular2’? -f 712-) El ‘/ /1711 ii- -20:00 CLOSE liriliil / l’l: .
  41. 41. Migration to 1.5 from 1.x n9 function directive Angula Welcome to the Ar facilitation. The documentatio directives, service: Angular Prefix: and names of p Angumr ng(core This module is pro Directives Services / Factories Filters Global APls
  42. 42. no function Goal ngula ‘t]'lit-, ‘ to the Ar facilitation Migrating from 1.4 to 1.5 Angular 1.5 takes a big step towards preparing developers for a smoother transition to Angular 2 in the future. Architecturing your applications using components, multi-slot transclusion, one-way bindings in isolate scopes, using lifecycle hooks in directive controllers and relying on native ES6 features (such as classes and arrow functions) are now all possible with Angular 1.5. This release includes numerous bug and security fixes, as well as performance improvements to core services, directives, filters and helper functions. Existing applications can start enjoying the benefits of such changes in $compile , $pa rse , sanimate , sanimatecss , ssanitize , ngoptions , currencyFilter , numberFilter , copy() (to name but a few) without any change in code. New features have been added to more than a dozen services, directives and filters across 8 modules. Among them, a few stand out: angular. componentl ) : Introducing "components", a special sort of directive that are easy to configure and promote best practices (plus can bring Angular 1 applications closer to Angular 2's style of architecture). Multi-slot transclusion: Enabling the design of more powerful and complex Ul elements with a much simpler configuration and reduced boilerplate. $onInit lifecycle hook: Introducing a new lifecycle hook for directive controllers, called after all required controllers have been constructed. This enables access to required controllers from a directives controller, without having to rely on the linking function. ngAn imateswap : A new directive in ngAnimate , making it super easy to create rotating banner—Iike components. Testing helpers: New helper functions in ngM0ck , simplifying testing for animations, component controllers and routing. Also, notable is the improved support for ES6 features, such as classes and arrow functions. These features are now more reliably detected and correctly handled within the core. All this goodness doesn't come without a price, though. Below is a list of breaking changes (grouped by module) that need to be taken into account while migrating from 1.4. Fortunately, the majority of them should have a pretty low impact on most applications. https: //docs. angularis. org/ guide/ migration
  43. 43. "9 function Controller -> Class Service , Factory -> Class My Directive -> Component , Directive directive Angula Welcome to the Ar facilitation. The documentatio directives. service Angular Prefix: and names of p Angular Gltit);1lAPls
  44. 44. ng _ function Welcome to the Ar facilitation. The documentatio ES5 -= r E32015 + TypeScript - Controller -> Class A“g”'al - Service , Factory -> Class directiv - My Directive -if Component , Directive. ui-router - Component Router
  45. 45. (3oal 99 function angulanbind angulan bootstrap angulancopy angulanelement angulanequals angulaitextend angular. forEach angular. from. Json angulaitidentity angulaitinjector angular. isArray angular. isDate angulanisDefined angulanisE| ement angulanisFunction angular. isNumber anguIar. isObject angular. isString angular. isUndefined angular. merge angularmodule angular. noop angular. reloadWithDebug| nfo angular. toJson directive a form input inputlcheckbox] inputldate] input[datetime-local] input[emai| ] input[month] input[number] input[radio] input[text] input[time] input[url] inputlweek] rigApp . ... n:. ...4 Angub Welcome to the Ar facilitation. The documentatio directives, service. - Angular Pnrbu and names of p Angular ng (core This module is pro Directives Services / Factories Filters Global APls
  46. 46. (3oal 99 function angulanbind angulan bootstrap angulancopy angulanelement angulanequals angulaitextend angular. forEach angular. from. Json angulaitidentity angulaitinjector angular. isArray angular. isDate angulanisDefined angulanisE| ement angulanisFunction angular. isNumber anguIar. isObject angular. isString angular. isUndefined angular. merge angularmodule angular. noop angular. reloadWithDebug| nfo angular. toJson directive a form input inputlcheckbox] inputldate] input[datetime-local] input[emai| ] input[month] input[number] input[radio] input[text] input[time] input[url] inputlweek] rigApp . ... n:. ...4 Angub Welcome to the Ar facilitation. The documentatio directives, service Angular Pnrbu and names of p Angular ng (core This module is pro Directives Services / Factories Filters Global APls
  47. 47. "9 function Angula ‘We come :0 the Ar facilitation 7"“ dccwieiiiaiic ii = J.l, °i/ 1' *= J2)sn. um-il1lka. . 3% 4jp)px. .qolIiI“:1gL. 1! ~! l9i| i|, oIolIl‘ylIif, :-7i/ 9'» M ~qr= jkaIIio‘I—| r' . éffl«. »r"eI! |Yf. 'ZlVl= ,h- 1: 5» M M M "Kali? ! ' ‘ flh: ;v; oII. I‘i; / *1 M ”K9l,0lIl= .lVA . .'| I"! InIl 9 M “', l0l9lIl*§lVI- . .9(9)IiE: r'9I[. l_i; Ir‘ i LW ~, oIeIoipI. k=, v/ ‘Li ~_u-. m,-Ihas. F’-II-‘im-. ~'-. ‘. ,., ’ M : l,oIa= .I{(= ,Ir'; ‘». |I! II| lL L"e'i M M MM; i9I; r:J{(; Ir'; '.. .qlmii: r'9l[. Ih; Ir‘ i Li-A! '»1pl‘gl’= .l{(‘vIr"-' -r= .e1?; l.. iiiuiiIl. '. _l; » M~; |pl; l§l{(5Ir‘4QI$lliL‘1.. L.4q(0IIiiZr'ui[. fh; lf' . ; l=» ~; l;Ir‘V[’iI(= I-, ‘i/ ‘J2’ -t= .s. .:Iaur~vz1«a». 1:1. ‘kolcrilil-, ‘I”! (Ilr‘: j.gK6h-~3%Ir‘V£il9lih» 12> ‘ho1sLgI*—Ir' . -_-Ialrwziuqa. Ifli M‘; l9I: IuIul= _Ir' . ..:1-gurwrilnglta. I421 '.1iI~f| ~_‘EI_olu-7r/ 14.4’ "s‘| ‘!| ~."| -.‘i. 'I‘_KIlIl-3-->lI’: lIIIl. i 13*» M: Ia-: I-rr: Imu-rs-aoini‘~r'9Il. ih; IrM i I‘! "s‘| ‘sI~. ‘l-. ‘fil! lI| y‘~. r'9ll. I 4-6.. wgular ‘riruciiiia, 5; pm
  48. 48. admin ——— home—dashboard. component. ts ——— home—dashboard. component. htm1 ——— home—dashboard. component. css ——— home—dashboard. component. spec. ts shared ——— components avatar. component. ts avatar. component. html ——— directives form—va1idator. directive. ts form—va1idator. directive. spec. ts ——— services L—— authorization. service. ts pipes ——— format—order—name. pipe. ts ——— format—order—name. pipe. spec. ts shop ——— components home. component. ts home. component. spec. ts home. component. htm1 ——— models shopping—cart. model. ts shopping—item. mode1.ts user. model. ts ——— services function
  49. 49. 0AwgL. lar. JS 977 Z/ -all‘: -3 ‘i 5 Z ‘C‘§'o Angu| arJSO)/ ‘—J‘3 ‘/1.5.073") U -1 E11? bfcilal http: //angu| arjs. b|ogspot. jp/2016/O2/angu| ar—150—ennob| ement—faci| itation. htm| Il—l“= r‘<—Al$ ennoblement-facilitation‘ ? }"5< D§R?72£5 rféiiéfilbififii T‘L; J:57J° Ii‘/7i'5—*> l~Fi'~: 'l-‘=10? iaréfii 7Zi77"J’f—‘/ El>§Q§+’0J¥§fi’°é*7‘fl‘{’—l~§'§/ t—§E| >7‘£. «‘; L'3Z: &:'0bA:5o Afiwtfififi _ __ , _. {E fl 1.5.0'Gl2t component 0)5E7Jl]’E X *( -/ L: Angu| ar2’U)X1x—? C7$t§1T’<E? ‘ID 7‘c67)0)/ EfJ‘7‘J‘ D <‘: 7357 ‘V 77- l~ ’C‘ :3, ; (:23 3'9 bl»l%%7I+‘0)‘Cx ‘-“;0)E5:WJAngu| arJSO){§l: 7': 'fJ‘<‘31‘l. < 5 bEi: 0)': ‘J‘ ‘E f I ‘Y 7 LA 8033: '3 lC‘E’7“/ if. L; kuromoitisfiv ’Cl, l7‘l: fl/ l, 0J7‘J"&%I]5'(Ei‘3§§bA:5° ‘£; EZ°'V”“°"“*‘ Voleyéliitz 5H<7$~iC 1.4i—C‘lZ§§ UTE AngularJS’E’$"“/7'57?»r X - Qiita E’; /3%iE‘9k5 C JZz'C‘L/ J: 5:: Angu| ar2l3l, fJ‘ : w»Es*>7a7?; ,fi: ;,@¢/ :,*m}. — g‘. 'i. *.; A.*—. ,,' ‘.3 Mgric M. ~ /41f; .3j1’, ‘3}5’gg’§| fi.f§9DLg»’¢}“': fi’, Z 13 -gm-r:3.. .t; .. m““"‘°‘ Organization (fr Gm-: ¥'Ji¥ E’i% - component() 1 1-‘. n*hiZF| 'éi. l€l. ‘ frl rnmnnnnnf-l I. ‘ J'Z+i 7 / J l E$mT-Eilfi/ Pm J- —‘1l. “§T-'-‘JRI . $‘: t‘
  50. 50. Angular 2 M function angular. bind angulanbootstrap angu ancopy angu anelement angu anequals angu anextend angu ar. forEach angu ar. from. Json angu ar. identity angu aninjector arigular. isArray angular. isDate arigulanisDefined angu ar. isElement angu ar. isFunction angu ar. isNumber angu ar. isObject angu ar. isString angu ar. isUncletined angu armerge angu armodule angu amoop angular. re| oadWitnDebug| nfo arigular. toJscin directive a form input input[checkbox] input[date] input[datetime-local] input[emai| ] input[month] input[number] input[radio] lnput[text] input[time] input[ur| ] input[week] HQAPP . ... n:. ... . Angula Welcome to the Ar facilitation. The documentatio directives, service: Angular Prefix: and names of p Angubr ng(core This module is pro Directives Services / Factories Filters Global APls
  51. 51. Angular vl.6 M function angular. bind angulanbootstrap angu ancopy angu anelement angu aneauals angu anexterid angu ar. forEach angu ar. from. Jsori angu ar. identlty angulaniniector angular. isArray angular. isDate angular. isDefined angu ar. isElement angu ar. isFunction angu ar. isNumber angu ar. isObject angu ar. isString angu ar. isUndefined angu armerge angu armodule angularnoop angular. re| oadWitnDebug| nfo angular. to. Json directive a form input input[checkbox] input[aate] inputldatetimelocal] input[emai| ] input[month] input[number] input[radio] input[text] input[time] input[ur| ] input[weel<] VTQADD . _.. n;. ..4 Angula Welcome to the Ar facilitation. The documentatio directives, service: Angular Prefix: and names of p Angubr ng(core This module is pro Directives Services / Factories Filters Global APls
  52. 52. Angular l. x Meeting Notes February 29 2016 Present Martin, Matias, Peter, Lucas, Georgios, Michal, Igor Minutes 0 sync/ release status (1 .4,1 .5) o Matias to run sync today o Georgios to run release tomorrow o 1 .6 status o there will be a 1.6 release later this year o o 1.5 due to breaking changes o src attribute security question (https: //github. com/ angular/ angulanjs/ pull/14019) 0 Igor to contact security a animation issue o https: //github. com/ angular/ angu| ar. js/ issues/14120 o Matias to take a look 0 ngOpen issue o htt : |nkr. co edit FzVP4tHZYNnXWoJNM G0? = review o Lucas to create an issue to track this n niihlichinn nauu rruifnr tn nnrn
  53. 53. Try / -rigular I5 I
  54. 54. Thank you!

×