モダンAngularJS @ GDG中国2014.12.6

1. ٌتٝAngularJS %FD 痥㔐(%(⚥㕂⹈䓼⠓

2. 荈䊹稱➜ ˖ 㤴ꅿ颩㣕龤0LVOP,FOUBSP ˖ ❨鿪䋐ַ׵勻ת׃׋

3. 鹈꟦أزحؙ侧501חג "OHVMBS+4،ٝثػة٦ٝ꧊ָ ⡘׾ְ׋׌ֹת׃׋ http://qiita.com/armorik83/items/b00818ecaf2e93734b36

4. ?AngularJS ׀㶷濼דׅ״י

5. ?兛媮噟⹡ծ׉׸⟃㢩ろ׬ "OHVMBS+4׾剅ְגְ׷הְֲ倯

6. ׉ֲד׃׳ֲ

7. ֶׁ׵ְ"OHVMBS+4הכ ˖ +BWB4DSJQUؿٖ٦يٙ٦ؙ (PPHMFָꟚ涪Ⱅ䒭חכ.788IBUFWFSה׃גְ׷ ˖ )5.-ك٦أךذٝفٖ٦ز ˖ 剅ֹװְׅر٦ة٥غ؎ٝر؍ؚٝ ˖ ٕ٦ذ؍ؚٝ堣圓 41"ח剑黝 ˖ "KBY؟ه٦ز 3&45"1*ך؟٦غ،فٔ؛٦ءّٝה湱䚍ָ葺ְ

8. 㖇⦜涸 ˟BOHVMBSKT CBDLCPOF LOPDLPVU FNCFS WVFחKBWBTDSJQU׾➰♷׃ג嗚稊

9. չד׮"OHVMBS+4׏ג㱾ְպ ִ׏㱾׻׸ג׷ך ׄׯ֮姺׭גֲֶַֿ˘

10. չד׮"OHVMBS+4׏ג㱾ְպ ׍׳׏ה䖉׏ג ִ׏ ׄׯ֮

11. "1*ָמוְ 鋙ִ׷ֿה㢳ֺׅ 㼪Ⰵ؝أز넝ְ ׉׿זֿהכזְ

12. 植屣׾濼׹ֲ ˖ הכְִծ䩛佝׃דكة釈׭דֹ׷׻ֽדכזְ ˖ ד׮׉׸כו׿זؿٖ٦يٙ٦ؙ׮♧筰 ˖ "OHVMBS+4ך植屣׾椚鍑׃ծ涸然חⵃ欽ׅ׷ ˖ "OHVMBSث٦يך湡䭷ׅ倯ぢ䚍׾濼׶ 䖓ղ꬗⦜חז׵זְ׋׭חכ

13. ،ؐزٓ؎ٝ "OHVMBS+4Y禸ַ׵禸פ ⡦חぢְגְ׷ךַ 鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך 縐 Ꟛ涪橆㞮ך⢽

15. ׀㶷濼דַׅ "OHVMBSָꟚ涪⚥דׅ

16. K2VFSZٔٔ٦أ "OHVMBS+4 "OHVMBS+4 YY"OHVMBS הכְִծٔٔ٦أ儗劍כ劢㹀 ֶֶ״׉ך儗劍ׅ׵僇鎉ׁ׸גְתׇ׿

17. 禸ך暴ꞿ ˖ 䎃剢傈חꟚ⪵ׁ׸׋OHFVSPQFחג ؽآָّٝ爙ׁ׸׋ ˖ ٌتٝـٓؐؠ׾䠐陎 &4 &$."4DSJQU ד圓眠ծ&4ד׮ⵃ欽〳腉 ˖ "U4DSJQUהְֲ䭁䓸鎉铂㘗➰ֽծ،ظذ٦ءّٝծ㣐鋉垷⻉פך佄䴂 ˖ KR-JUFך䐖姺ծػؿؓ٦وٝأぢ♳ K2VFSZ⢪欽♶〳הז׷׻ֽדכזְ ˟䎃剢植㖈ך䞔㜠

18. 遼䷼涸ז䞔㜠׮ ˖ $POUSPMMFSָ搀ֻז׷ %JSFDUJWFה)5.-ذٝفٖ٦زָ㼎הז׷ ˖ $TDPQFָ搀ֻז׷ 顑⟣ⴓ䬐ծ䞔㜠ך⿫撑ծⰟ剣ך➬穈׫׾״׶僇然חׅ׷ ˟䎃剢植㖈ך䞔㜠

19. ؖٓحה㢌׻׷הַ䙳ְ ׄׯ֮姺׭גֲֶַֿ˘

20. ؖٓحה㢌׻׷הַ䙳ְ ׄׯ֮ ׍׳׏ה䖉׏ג

21. ךٔٔ٦أ傈כ劢㹀דׅ ˖ ׇ׏ַֻ"OHMVBS+4TUBCMFָ֮׷ךחծٔٔ٦أ傈劢㹀ך"OHVMBSך㢌⻉׾䛊׸ג姺׭תַׅ ˖ ⡦⢪ֲ׿דַׅ ˖ "OHVMBSךؽآّٝכծꟚ涪ث٦يָ չ״׶"OHVMBS׵׃ֻպ׾湡䭷׃׋穠卓 ˖ ׉ך䠐㔳׾穈׿ד植㖈ך"OHVMBS+4׾剅ֽל 㼛勻㣐ֹז幉✉חכ荚׵זְךדכ

22. "OHVMBSث٦يָ ?דؖٓٔה㢌ִ״ֲה׃גְ׷椚歋כ

23. "OHVMBSָ湡䭷ׅ׮ך ˖ ٌتٝ٥ؿٖ٦يٙ٦ؙפ ˖ &4 &$."4DSJQU דך㹋鄲 ˖ "U4DSJQUח״׷㣐鋉垷فٗتؙزך鎸鶢佄䴂 ˖ ״׶侭椚ׁ׸׋"1* ˖ 鋙ִ׷ֿה㢳ֺׅ׏גEJT׵׸׷ךծ荈鋙׃ג׷׵׃ְ

24. &4׏ג⡦ ˖ &$."4DSJQUؙؒو٥أؙٔفزהכ+BWB4DSJQUך垥彊鋉呓䧮ղָ+BWB4DSJQUהㄎע鎉铂כـٓؐؠ嫣ח倯鎉׌׵ֽ ˖ 植㖈ךٌتٝـٓؐؠ *& כ&4ח㼎䘔 &4׾Ⰻג㹋鄲ׅ׷ـٓؐؠכ植㖈搀׃ ˖ DMBTT祩邅圓俑ծNPEVMF堣圓ծ1SPNJTFך垥彊⻉זוזו ˖ 鑫稢כؚؚ׏גי http://kangax.github.io/compat-table/es6/ؔأأً

25. "U4DSJQU׏ג⡦ ˖ ׉ך⵸ח5ZQF4DSJQU.JDSPTPGU爡 ֿ׸כ꫼涸㘗➰ֽ圓俑׾⪒ִծ؝ٝػ؎ٓח״׏ג 㢌䳔儗חؒٓ٦׾ثؑحؙ׃+BWB4DSJQU׾欰䧭ׅ׷鎉铂 ˖ ֿך5ZQF4DSJQU׾ׁ׵ח䭁䓸׃׋ "OHVMBSث٦يָ䲿周ׅ׷圓俑刹ֻ倜鎉铂דכזְ ˖ "U4DSJQUדכ㘗➰ֽח⸇ִגծ ًةر٦ة鎸鶢ծ،ظذ٦ءّٝך圓俑׾酡䓼 @Directive({ selector: '[blink]' }) class Blink { constructor(elment: Element, options: Options, timeout: Timeout) { // ... } }

26. "OHVMBS+4

27. 5ZQF4DSJQU ˖ 5ZQF4DSJQUכ&4ך圓俑׾⯓遤㼪Ⰵ׃גְ׷ ˖ DMBTT NPEVMFזו ˖ ׮׍׹׿㢌䳔ׅ׷ךדծ&4ךـٓؐؠד⹛ֻ ˖ ꫼涸㘗➰ֽה؝ٝػ؎ٓח״׷ؒٓ٦ثؑحؙ ˖ 㣐鋉垷Ꟛ涪קו؝ٝػ؎ٓך佄䴂ָꅾ銲ח ˖ "OHVMBSד䲿周ׁ׸׷"U4DSJQUח➙ַ׵䢪׸׷ז׵ֿ׸ ˖ 5ZQF4DSJQU荈⡤ծⰋגך+BWB4DSJQUח崞ַׇ׷ךד 鋙ִגְֶג䴦כזְ

28. ٌتٝAngularJS 1 ➙ַ׵&4俑岀ָ⢪ִ "OHVMBSث٦ي׮㛇燉ה׃ג䱰欽׃׋ 5ZQF4DSJQUד剅ֻ

29. $POUSPMMFS搀ֻז׏׍ׯֲ׿ ˖ 搀ֻז׷״ֲדׅ ˖ "OHVMBSךٔٔ٦أכ劢㹀זךח 䎃חֶ❕ֻז׶הׁ׸׋ ˖ את׶ך儗挿ד׮䐖姺׾ 鋅馉׃׋קֲָ״ְ

30. OHDPOUSPMMFS׏ג ˖ ➙זֶ㢳ֻךثُ٦زٔ،ٕװـؚٗד稱➜ׁ׸גְ׷ OHDPOUSPMMFS ˖ ֮׸כ)5.-ך"UUSJCVUFTדכזֻ ⽃ז׷%JSFDUJWFך♧珏ד֮׷ ˖ ֿ׸׏ג䗳갭זךַ <div ng-controller="MainCtrl">...</div>

31. ׾鋅馉׃׋$POUSPMMFS ˖ %JSFDUJWFח׮DPOUSPMMFS"1*ָ֮׶תׅ ˖ %JSFDUJWF׾⡲׏גծ%JSFDUJWF$POUSPMMFSהׅ׷ ˖ OHDPOUSPMMFS׌ה<div>ח♧⦐䭷㹀׃ג 䖓כؤٓؤٓⳢ椚׾剅ָֹ׍ ˖ ֿךٕ٦ٕחׅ׷ֿהד⦐ղך%JSFDUJWF׾넝Ⳕ꧊פ .77.ך罋ִ倯 ˖ OH3PVUFٕ٦ذ؍ؚٝד׮DPOUSPMMFS䭷㹀כ׃זְ ̔7JFX׌ֽ׾䭷㹀׃ծ׉ך7JFXח%JSFDUJWF׌ֽ縧ֻ

32. ٌتٝAngularJS 2 OHDPOUSPMMFS׾⢪׻׆ %JSFDUJWFDPOUSPMMFS׾欽ְ׷

33. $TDPQF搀ֻז׏׍ׯֲ׿ ˖ 搀ֻז׷״ֲדׅ ˖ 植㖈חְֶג׮DPOUSPMMFS"T圓俑ָ 钠濼ׁ׸גַ׵⳿殢ָ慧幾 ˖ $TDPQFך"1*XBUDIװCSPBEDBTU POכ➙ד׮⢪ֲ

34. ׾鋅馉׃׋$TDPQF ˖ 植㖈㹋鄲⚥ת׋כ珩⫴⚥ךءأذيחOHDPOUSPMMFSָ ֮׏ג$scope׮⢪׏גתׅהְֲ倯 ˖ 獳遤ָ㣐㢌׉ֲז׵ծת׆כDPOUSPMMFS"T圓俑ך䱰欽פ <div ng-controller="MainCtrl as main">...</div> ˖ 鋵㶨꟦ד幉✉ׅ׷קו$scopeך䞔㜠׾װ׶ה׶ ׃ג׋׵ծ׉׶ׯ鏣鎘ך㉏겗

35. $CSPBEDBTU PO׾⢪ֲ ˖ ⦐ղך%JSFDUJWFכהחַֻ⡚穠さד⡲׷ ˖ ⡦ַך؎كٝزךزٔؖ٦ח$broadcast׾⢪ְ 꽀⹛⩎כ$onד「ֽ׷ ˖ 涪⥋⩎כծ➭ך؝ٝه٦طٝزָוֲ⹛ַֻ 「⥋⩎כծוךة؎ىؚٝד؎كٝزָ涪ׇ׵׸׷ַ ֶ✼ְ濼׵זֻגְְ⡚穠さ

36. ׋׌׃剑㊣דכזְ ˖ $broadcast, $onכ剑㊣ך،فٗ٦ثדכזְ ˖ 俑㶵⴨ٔذٕٓדװ׶ה׶ׅ׷ַ׵ד֮׷ ! $scope.$broadcast('EventNameString', args); ˖ *%&ך佄䴂׮「ֽחְֻ ˖ 鍑寸岀ה׃גכծ$broadcast荈⡤׾ ׅץגTFSWJDFדٓحؾؚٝ׃ծًاحسה׃ג䪔ֲ $onח剅ֻ؎كٝزせ׮ծ׉ךTFSWJDFַ׵《䖤ׅ׷ ًاحسせז׵*%&ָ钠陎׃ג酡㸣׃גֻ׸׷

37. ׋׌׃剑㊣דכזְ ˖ $broadcastךTFSWJDFٓحؾؚٝכ➙ךהֿ׹♳䩛ֻ ְ׏גְ׷ ˖ ׃ַ׃؎كٝز꽀⹛ךⰋג׾♧אךTFSWJDFדٓحف ׅ׷הծ׉׸כ׉׸ד㉏겗 荈ⴓכⴓꅿⴽח黝㹅㼭ⴓֽח׃גְתׅ ˖ $scopeךفٗػذ؍׾搀꠹ח鋵㶨דⰟ剣׃ 铣׫剅ֹׅ׷״׶כ然㹋劤갈׾鎉ֲהד׮׏הְְ堣圓実׬

38. ٌتٝAngularJS 3 鋵㶨ד$TDPQFךⰟ剣כ⽬ꤹ ⡚穠さח⡲׶ ؎كٝز꽀⹛׾䠐陎

39. ׮何葺ׁ׸תׅ ˖ "OHVMBS+4Y禸׮ծָٔٔ٦أׁ׸ג穄׻׶דכזְ ˖ ׅדחךو؎ش٦،حفر٦زָٔٔ٦أ ˖ ך湫禸ד֮׷׮鹌遤⚥ ˖ ٕ٦ذ؍ؚٝծؿؓ٦يծ"KBYך何葺זוָ 嗚鎢ׁ׸גְ׷垷圫 http://www.linkplugapp.com/a/1042855 ˟䎃剢植㖈ך䞔㜠

41. 猘荈魦ך؛٦أ ˖ 荈ⴓָוך״ֲח"OHVMBS+4׾⢪׏גְ׷ַ ˖ 噟⹡ءأذي

42. 噟⹡خ٦ٕծ،ؙإ؟ٔך㹋鄲 ˖ 㼛勻涸חֿך䪮遭ך♧鿇׾♧菙ⰕꟚׅ׷ֿה׾ 湡锷׿׌㛇湍⡲׶ ֿ׿ז䠬ׄד⡲׏גתׅ

43. ⦐➂涸ז䠬䟝דכ֮׶תָׅ ˖ Ꟛ涪כ鸞ְדׅ ˖ ر٦ة٥غ؎ٝر؍ؚٝワ׶ָ侭׏גְ׷ךד ؛٦أךفٗزة؎فָּׅ⳿勻׷ ּׅ⹛ֻךדٌثك٦ءّٝכ笝䭯׃װְׅ ˖ 3&45"1*ה鋵ㄤ䚍ָ넝ְךד傀㶷ךءأذيַ׵ 獳遤׃װְׅכ׆ 猘כ$BLF1)1ַ׵OPEFKTח獳遤׃׋

44. 41"ד׮ծ♧皘䨽׌ֽד׮ ˖ %JSFDUJWFז׿ג⢪׻זְծIUNMⰻח湫䱸縧ְג ؿؓ٦يךغٔر٦ءّٝה׃ג׌ֽ⢪ְ׋ְ ְְ̔ה䙼ְתׅ ˖ ٕ٦ذ؍ؚٝ׮Ⰻג"OHVMBS+4 ؿٕח堣腉׾⢪׏ג4JOHMF1BHF"QQMJDBUJPO׾Ꟛ涪ׅ׷׊ ׅ̔ל׵׃ְ ˖ "OHVMBS+4ך䖤䠐הׅ׷ر٦ة٥غ؎ٝر؍ؚٝծ 3&45GVMծٕ٦ذ؍ؚٝהְ׏׋ⴓꅿַ׵⡦ָ⢪ִ׷ַ 鋅噰׭׷

45. ذأز׃װְׅ ˖ 41"Ꟛ涪דכ%JSFDUJWF׮4FSWJDF׮ו׿ו׿㟓ִתׅ ˖ "OHVMBSث٦يכذأزך׃װׁׅח ꅾ挿׾縧ְגְ׷ ˖ %*ك٦أךٌآُ٦ٕ鸬䵿הծٌحؙ岣Ⰵ ˖ ذأزٓٝش٦,BSNB ˖ &&ذأز1SPUSBDUPS ذأز剅ְגזְהֶַ⵸׉׸˘

46. ٌتٝAngularJS 4 ,BSNB 1SPUSBDUPSד ذأز׮䫙ַ׶זֻ

48. 鋙ִ׷ֿהָ㢳ֺׅ׷ ׉ֲד׮זְ

49. ת׆%JSFDUJWF鋙ִגֻ׌ְׁ

50. %JSFDUJWFח״ֻ֮׷铎鍑

51. %JSFDUJWFח״ֻ֮׷铎鍑 ˖ ꨇ׃ְ׵׃ְ

52. %JSFDUJWFח״ֻ֮׷铎鍑 ˖ ꨇ׃ְ׵׃ְ ˖ ꬗⦜ְֻׁ׵׃ְ

53. %JSFDUJWFח״ֻ֮׷铎鍑 ˖ ꨇ׃ְ׵׃ְ ˖ ꬗⦜ְֻׁ׵׃ְ ˖ "1*ָ醱꧟ֺׅ׷׵׃ְ

54. %JSFDUJWFח״ֻ֮׷铎鍑 ˖ ꨇ׃ְ׵׃ְ ˖ ꬗⦜ְֻׁ׵׃ְ ˖ "1*ָ醱꧟ֺׅ׷׵׃ְ "1*Ⰻ鿇ז׿ג⢪׻זְ

55. 穗꿀锑ַ׵ך%%0 ˖ %%0%JSFDUJWF%FGJOJUJPO0CKFDU ֮ךꞿְꞿְؔفءّٝծ%JSFDUJWFכ꬗⦜ה䙼׻׸׷♧殢ך⾱㔓 ˖ SFTUSJDU%JSFDUJWFך邌鎸倯岀ծ㾩䚍せַծ銲稆せַ˘ ˖ ֿ׸כ"㾩䚍せה׃גה&銲稆せה׃ג ׌ֽ鋙ִגֶֻ֮הכ⢪׻זְ ˖ TDPQF4DPQF׾欰䧭ׅ׷ַⰟ剣ׅ׷ַ ˖ 䌢חؔـآؙؑز٥ٔذٕٓד䭷㹀 A new "isolate" scope. ˖ Ⱏ剣⵸䲿ך鏣鎘כ鼘ֽ׋קֲָ葺ְ scope: { attr: '@myAttr', foo: '=myFoo', bar: '@myBar' },

56. ⢪׻זְ"1* ˖ SFQMBDFEFQSFDBUFE ˖ USBOTDMVEF䮙⹛ָ湫䠬涸דזֻծ嗚鏾ך䩛꟦׾㟓װׅז׵ל ⢪׻זֻג׮ְְךדכ"1*׾铣׿ד׮䗳銲ה䠬ׄ׋ֿהָזְ ˖ NVMUJ&MFNFOU䗳銲חז׏׋ֿהָזְ ➭ךٌآُ٦ٕ׾錁㻊׃ג׮鋅ַֽ׋ֿהָזְ ˖ QSJPSJUZ⮚⯓䏝׾孡חׅ׷䗳銲ך֮׷Ⰵ׸㶨כٔأؙ QSJPSJUZ׾⢪׻׆SFRVJSF׾⢪ֲ ˖ MJOLDPNQJMFך䨱׶⦼ַ׵ꟼ侧׾鵤ׇל״ְ ˟⦐➂ך䠬䟝דׅ

57. UFNQMBUF ˖ 䌢חUFNQMBUF6SM׾⢪׏גְ׷ ˖ ֮ת׶+4ا٦أⰻח俑㶵⴨ה׃גꞿְ)5.-׾ 剅ֹ׋ֻזְ ˖ ׋׌׃ծ㼭ׁזػ٦خ遤ד幥׬״ֲזכDPNQJMFⰻח $templateCache.put()׾⢪׏ג剅ֻֿהָ㢳ְ

58. ٌتٝAngularJS 5 "OHVMBSח⪒ִ׷ז׵ %JSFDUJWF׾琎噰涸ח荈⡲

59. ս剼㜠վ %%0 %JSFDUJWF%FOJUJPO0CKFDU כ "OHVMBSד䐖姺ׁ׸תׅ

60. 如ח4FSWJDF 'BDUPSZך麩ְ׾ 鋙ִגֶֻךָؔأأً

61. 4FSWJDFה'BDUPSZ ˖ 4FSWJDF؝ٝأزؙٓةꟼ侧׾♷ִג"OHVMBS+4ָ ؎ٝأةٝأ׾欰䧭 4JOHMFUPOה׃ג婍׷ ˖ 'BDUPSZ♷ִ׋ꟼ侧׾ 㹋遤׃䨱׶⦼׾鵤ׅ function MyComponent() { // ... } ! angular.module('myModule') .service('MyComponent', MyComponent); ! angular.module('myModule') .factory('MyComponent', function() { return MyComponent; });

62. ٗحؙ؎ٝ眔㔲׾㼰זֻ ˖ "OHVMBS+4כ䊬㣐זؿٖ٦يٙ٦ؙ ♧䏝⢪ֲהٗحؙ؎ׁٝ׸׷ַ׵˘הְֲ䠐鋅׾耀ֻ ˖ ׃ַ׃"OHVMBS+4׾⢪׏גְג׮ 㼛勻涸חYַ׵חכ獳遤⡲噟ָ涪欰ׅ׷כ׆ ˖ "OHVMBS+4הꟼ⤘זְٗآحؙכ ז׷ץֻ"OHVMBS+4ך㢩ח剅ֻץֹׄׯי

63. .PEFMה*OKFDU ˖ .7$ׅץג׾"OHVMBS+4דװ׹ֲהׅ׷ַ׵ ٗحؙ؎ָٝ孡חַַ׏גֻ׷ ˖ "OHVMBS+4כ׋׌⽃ח3&45

64. 7JFX.PEFM

65. 5FNQMBUF ח暴⻉ ˖ .PEFMծؽآطأٗآحؙכ"OHVMBS+4"1*׾♧ⴖろתזְ 秪磏ז+4ה׃ג㹋鄲 ⟎ח"OHVMBS+4ָهءٍ׏ג׮➭'8ד⢪ְת׻ׇ׷״ֲח

66. .PEFMה*OKFDU ˖ ֿך秪磏ז+4ךٓ؎ـٓٔ׾"OHVMBS+4ד欽ְ׷㜥さ 'BDUPSZ穗歋ד鵤ׅ ˖ ؚٗ٦غٕ㢌侧ח縧ְג"OHVMBS+4ד⢪ֲֿה׮⳿勻׷ָ ٌحؙ⻉דֹזְךדذأزך♳ד㉏겗ָ饯ֿ׷ ˖ "OHVMBS+4ךِصحزذأزכ䮶׷莸ְך嗚鏾ח殅׭גծ &&ذأزח״׷㣐ֹז笨הծؽآطأٗآحؙך稢ַז ِصحزذأزד⥂א angular.module('myModule') .factory('MyBusinessLogic', function() { return MyBusinessLogic; // インスタンスではなくコンストラクタ自体を返す });

67. ؔـآؙؑز䭷ぢ ˖ չ؎ٝأةٝأדכזֻ؝ٝأزؙٓة荈⡤׾鵤ׅպ הְֲ邌植ծ+BWB4DSJQUדכ׍׳׏ה꼧厩׫ָזְַ׮ ˖ 5ZQF4DSJQUדכDMBTT DPOTUSVDUPSװ㘗➰ֽך嚊䙀ָ֮׷ ˖ 㢌䳔䖓ָ+BWB4DSJQUד֮׶זָ׵׮ծ+BWBװ$涸ז ؔـآؙؑز䭷ぢך罋ִ倯ד鹌׭׷ֿהָדֹ׷ +BWB4DSJQU׌ֽד׮⳿勻׷ֽוQSPUPUZQFהְַ׹ְ׹剅ֻֿהָ꬗⦜ ˖ 4FSWJDF׮'BDUPSZ׮ծ5ZQF4DSJQUהך湱䚍כהג׮״ְ "U4DSJQUָ涪邌ׁ׸׋ֿה׮ծ׉׸׾鏾僇׃גְ׷

68. ٌتٝAngularJS 6 'BDUPSZח״׷JOKFDU׾崞欽׃ג "OHVMBS+4"1*׾ ⢪׻זְⳢ椚כ㢩פ

69. 4FSWJDFכ"OHVMBS+4ⰻח暴⻉ ˖ ♧倯ד4FSWJDFכ"OHVMBS+4"1*ך琎噰涸זⵃ欽ח暴⻉ ˖ $resource, $routeParams, $locationכ穗꿀♳ ؝٦سךꅾ醱ָ欰ת׸װְׅ ˖ $PSF"1*׾ٓحف׃׋ծ荈ⴓ٥荈ث٦يָ⢪ְװְׅ 4FSWJDF׾欽䠐׃גⳢ椚׾♧⯋⻉ ˖ %JSFDUJWFDPOUSPMMFSכֻ֮תד׮醱侧ך4FSWJDFךⳢ椚ה 7JFX &WFOU׾穠ןאֽ׷؎ٝةؿؑ٦أח䗡ׅ׷

70. ٌتٝAngularJS 7 $PSF"1*׾⢪ְװֻׅٓحف 荈⡲4FSWJDFד Ⳣ椚ךꅾ醱׾鼘ֽ׷

71. Ⰻ鿇鋙ִ׷䗳銲כזְ

73. 䢪׸׷ה䙳ֻזְדָׅ ׍׳ְ׍׳ְ縐ָ֮׶תׅ

74. 1. minify対策 ˖ %*،ظذ٦ءّٝכ䗳׆剅ֹת׃׳ֲ ׁ׮זֻלNJOJGZ儗ח岛ֹתׅ ˖ %*،ظذ٦ءّٝהכծ؎ٝأةٝأ欰䧭儗ח ؎ٝآؙؑزׅ׷4FSWJDF׾寸㹀ׅ׷׋׭ך䞔㜠 ˖ 䒷侧׾俑㶵⴨דػ٦أ׃ג铣׿ד׷׵׃ְ׈˘ ה㢌䡾㹋鄲ָ鑧겗חז׶ת׃׋ָծ㣐㢌״׹׃ֻזְדׅ angular.module('myModule') .service('MyService', function(OtherService) { // ... ↑ここに無い!! }); ! angular.module('myModule') .service('MyService', ['OtherService', function(OtherService) { // ... }]); 罠

75. 1. minify対策 ˖ ⦐➂涸חכֿ׏׍ך剅ֹ倯ךקֲָ㥨ֹ ! ! ! ˖ .service()ⰻחꞿղה剅ֻ״׶طأز׮幾׏גأحؗٔ ˖ "OHVMBS+4ַ׵ng-strict-diָ鷄⸇ׁ׸׋ ،ظذ٦ءّٝ鎸鶢怩׸׾ؒٓ٦ה׃ג䭷䶯ׅ׷ 罠 function MyService(OtherService) { // ... } MyService.$inject = ['OtherService']; ! angular.module('myModule') .service('MyService', MyService); <body ng-app="myApp" ng-strict-di> ... </body>

76. 2. Filter ˖ ٕ٦فⳢ椚כ縐הז׶װְׅ ˖ ַ׵חז׶鸞䏝ָ何㊣ׁ׸׋ָ ֮ת׶㢳欽ׅ׷ה䕦갟ך⳿׷䛊׸ָ֮׷ ˖ "OHVMBS+4#BUBSBOHהְֲ$ISPNF堣腉䭁䓸׾⢪׏ג ػؿؓ٦وٝأָ孡חז׏׋׵鎘庠׃״ֲ ˖ +40/欰䧭儗ח؟٦غ⩎ד㢌䳔ׅ׷קֲָ 僇׵ַח鸞ְךדծֿ׍׵׮銲嗚鎢罠

77. 3. $routeProvider ˖ ꬊず劍Ⳣ椚ך鍑寸׾䖉׏גַ׵ٕ٦ذ؍ؚٝⳢ椚׾遤ֲ"1* SFTPMWFחכ岣䠐 ˖ Ⳣ椚ָ$routeProviderה$POUSPMMFSדⴓꨄ׃ծ֮ה֮ה⥂㸚♳ד ٔأؙהז׷〳腉䚍׾ろ׬ ˖ ثُ٦زٔ،ٕ鸐׶חSFTPMWF׾剅ְג׃תֲה ذأز׃חְֻ鎸鶢פ 罠 ˖ %JSFDUJWFDPOUSPMMFSך罋ִ倯דְֻז׵㉏겗הז׶חְֻ ˖ "OHVMBS6*3PVUFSהְֲ044׮֮׷ךד嗚鎢׃ג׮״ְַ׮

78. 4. AngularUI ˖ ׋׌׃ծ׉ך"OHVMBS6* ׭׍ׯ⤑ⵃז؟٦سػ٦ذ؍٥ٓ؎ـٓٔ׌ָ "OHVMBS+4ךٔٔ٦أ٥أؾ٦سח㼎׃ג䗍㦩ח刿倜ָ鹼ְ ˖ ו׿ז׮ךח׮鎉ִ׷ָծٓ؎ـٓٔך؝ىُصذ؍ך 崞䚍䏝װ刿倜걼䏝׾׫זָ׵ך䱰欽׾ ˖ 㹋ꥷծ"OHVMBS6*ח駈׾䲕ת׸ג׃ל׵ֻךתתד׃׋ ˖ ֮׏ծד׮6*3PVUFSכ⮚猕דׅ 罠

79. 5. directive処理順 ˖ ng-repeatװ%JSFDUJWFךcompile, link׾㢳欽׃גְ׷ה 넝然桦ד幉✉ׅ׷ ˖ K2VFSZ׮⢘欽׃גٔحثז6*׾邌植׃״ֲ הַ䙼ְ㨣׭׷הծ劍䖉ׅ׷銲稆ָundefined׌׏׋הַؠٓ ˖ ⹞׾אַ׬תדכ嗚鏾ָ㣐㢌罠 ˖ ⯓傈剢傈ⰕꟚ׃׋2JJUB"EWFOU$BMFOEBSך䬴鎸✲ חגծֿךװװֿ׃ְⳢ椚갫׾Ⰻגתה׭גְתׅ ׈מ׀⿫罋ח

80. ٌتٝAngularJS 8 عو׶וֿ׹כ⯓➂ָعو׏ג׷ 縐׾䛊׸׆鹌׭

82. 剑䖓ח猘⦐➂ך Ꟛ涪橆㞮ך⢽׾稱➜׃ג 箍׭ֻֻ׶תׅ ׋ע׿꽀ֽ駈

83. 圓䧭 4FSWFS OPEFKT .POHP%# &YQSFTT "OHVMBS+4 JOKFDU -PDBM.PEVMFT 6UJMJUJFT .PEFM 3&45"1*

84. ⴱ㔐כ HFOFSBUPSBOHVMBSGVMMTUBDL

85. 植㖈ךر؍ؙٖزٔ root ├── Gruntfile.js ├── app │ ├── bower_components │ ├── my_components │ │ └── * │ ├── my_modules │ │ └── * │ ├── favicon.ico │ ├── fonts │ ├── images │ ├── robots.txt │ ├── scripts │ │ ├── app.js │ │ ├── controllers │ │ ├── directives │ │ ├── filters │ │ ├── injectors │ │ ├── modules │ │ ├── routes.js │ │ ├── run.js │ │ └── services │ ├── styles │ │ ├── sass │ │ └── screen.css │ └── views │ ├── 404.html │ ├── index.html │ ├── partials │ └── parts ├── bower.json ├── common │ └── * ├── doc ├── e2e.conf.js ├── karma.conf.js │ ├── lib │ ├── bootstrap-models.js │ ├── config │ │ └── * │ ├── controllers │ │ └── * │ ├── middleware.js │ ├── models │ │ └── * │ └── routes.js ├── log ├── node_modules ├── package.json ├── server.js ├── test │ ├── client │ │ ├── e2e │ │ ├── mock │ │ └── spec │ └── server │ ├── mock │ └── spec ├── tsd.json └── typings ├── e2e.d.ts └── tsd.d.ts 㶵ָ㼭ֻׁגְׅתׇ׿

86. Ꟛ涪ך剑ⴱחװ׏׋ֿה ˖ ⡦״׶׮ؚٗ⳿⸂ת׻׶׾䲧ִ׋ ˖ 䧭⸆٥㣟侁׾ろ׭ג宕竲涸ח婍ؚׅٗך⳿⸂הծ ؒٓ٦ך׋ןחة٦ىشٕװـٓؐؠ٥؝ٝا٦ٕח 邌爙ׇׁ׷ؚٗワ׶ך⳿⸂ה侭䕎 ˖ OPEFKTך&YQSFTTה"OHVMBS+4חֶֽ׷"1*ך鸐⥋כ 暴ח稢ַֻ鎸ꐮ ˖ .POHP%#׾䪔ֲٓ؎ـٓٔ.POHPPTFָ׉ֿ׉ֿؚٗ׾ ちֻךדծر٦ةك٦أ٥؝طؙءّٝת׻׶ד鷿倯ח 凃׸׷ֿהכ㼰זַ׏׋

87. ؝٦ر؍ؚٝ٥أة؎ٕ ˖ angular.module()ך剅ֹ倯׌הַծinjectך剅ֹ倯׌הַ ׫׿זֽ׏ֲֿغٓغٓ ˖ 剑ⴱח鋅׋ثُ٦زٔ،ٕךأة؎ٕד׉ךתת鹌׭ג׃תֲ؛٦أ ֿ׸כהג׮⽬זְ ثُ٦زٔ،ٕכꞿ劍鏣鎘׾䠐陎׃גְזְ ˖ ؚؚ׏׋׵侧珏겲ך؝٦ر؍ؚٝ٥أة؎ָٕ⳿גֻ׷ BOHVMBSKTTUZMFHVJEF<嗚稊> ˖ ׉׸׵ח׮䊴כ֮׷ָծⰟ鸐׃ג鶢ץגְ׷✲갪׮֮׷ךד ׉ך鴟䖞ֲץֹ ˖ ⦐➂涸חכ function(){funtion(){function(){... ָ 㜔ִ׵׸זְךדծ〳腉זꣲ׶䎂׵ח剅ְגְ׷ ׉ך倯ָꬊず劍窃׫ךذأزװ䊴׃剏ִ׮׃װְׅ

88. OQN CPXFS ˖ ZPBOHVMBSGVMMTUBDLָ欽䠐׃׋QBDLBHFKT׾ك٦أח׃גְ׷ ˖ ؝ىُصذ؍ך崧׸װ䐖׸גְזְַ׾鋅זָ׵傈ղ鑐遤ꐪ铎 ˖ OPEF@NPEVMFTכ express, lodash, log4js, mongoose, mongoose-auto-increment, passport זו ˖ CPXFS@DPNQPOFOUTכ angular, angular-animate, angular-ui-bootstrap, d3, es5-shim, jquery, lodash, node-uuid, underscore.string זו

89. HSVOU ˖ ؽٕسخ٦ٕחכHSVOU׾⢪欽 ˖ &YQSFTT؟٦غך饯⹛װذأزծ؝ٝػ؎ٕזוծׅץגHSVOUח ⟣ׇגְ׷ ˖ connect-livereload, grunt-este-watch, grunt-express-server, grunt-karma, grunt-ng-annotate, grunt-ts, grunt-typedoc, karma, karma-phantomjs-launcher, load-grunt-tasks, protractor, time-gruntזו ˖ ♧⦐♧⦐铡僇דֹתׇ׿ָծJOKFDUך،ظذ٦ءّٝ鎸鶢׾荈⹛ ⻉ׅ׷grunt-ng-annotateכֶׅׅ׭

90. ذأز ˖ OPEFKT⩎כ׉ךתת.PDIB "OHVMBS+4⩎כ,BSNB

91. 1IBOUPN+4

92. +BTNJOF ˖ "OHVMBS+4Ⱅ䒭דכذأز٥ؿٖ٦يٙ٦ؙח +BTNJOF׾⹻׭גְ׷ָ.PDIBָ⹛ַזְ׻ֽדכזְ ˖ &&ذأز1SPUSBDUPSחꟼ׃גכ +BTNJOFח✲㹋♳ꣲ㹀ׁ׸׷ ˖ ،؟٦ءّٝכQPXFSBTTFSU ٌحؙذأزכ4JOPO+4ծ+BTNJOF4QZ׾⢘欽 ➙䖓4JOPO+4⩎ח♧劤⻉׃״ֲה䙼׏גְ׷

93. 㣐鋉垷⻉ך䝢׫ה鍑寸 ˖ 䎃דֽ׏ֲֿ花׵׿ד׃ת׏׋ 植㖈♰遤קו瑞遤ծ؝ًٝز׾ꤐֻ ˖ ذأزך㹋遤ָ鹼ַ׏׋׶ծמהאך%JSFDUJWFך嗚鏾ָ ꬗⦜חז׏גֹ׋׶ծرًٔحزָ湡甧׍㨣׭׋ ˖ 琎噰涸ח㢩鿇ٌآُ٦ٕ⻉ծ(JUךٔهآزٔ׮ⴓֽ 㢌刿׾鷄ְװֻׅ׃ծذأزך顑⟣眔㔲׮ꣲ㹀׃׋ ˖ ꬗⦜ז㢩鿇ٌآُ٦ٕ⻉חכ:FPNBO(FOFSBUPS׾荈⡲׃⼱荈⹛⻉ ˖ 穠卓ծ何葺ׅץֹ挿ծ倜堣腉ך㹋鄲ծغؚ涪欰皘䨽ָ ּׅⴓַ׷״ֲחז׶؎؎ֿהל׏ַ׶דׅ 剑ⴱַ׵׉ֲׅץֹ׌׏׋

94. ٌتٝAngularJS 9 ػح؛٦آ盖椚ծؽٕسخ٦ٕד ؝ٝػؙزז㹋鄲ח㼔䙀

95. ⿫罋项俱٥鎸✲갫♶ず ˖ OHFVSPQFIUUQOHFVSPQFPSH ˖ "OHVMBS+4ؕٝؿ؋ٖٝأOHFVSPQFךأٓ؎سתה׭ IUUQBOHVMBSKTOJOKBDPNCMPHTMJEFTBUOHFVSPQF ˖ 傈劤铂鏬OHFVSPQF "OHVMBS BOE#FZPOE IUUQBOHVMBSKTOJOKBDPNCMPHOHFVSPQFBOHVMBSBOECFZPOEJOKBQBOFTF ˖ ⚅歲ך+BWB4DSJQU׾铣׮ֲIUUQB[VHJUIVCJPTMJEFKTFSKBWBTDSJQUIUNM ˖ 2JJUB]"OHVMBSًٌIUUQRJJUBDPNTIVIFJJUFNTCEDBBG ˖ #SBDFZPVSTFMWFT GVUVSFJTDPNJOH&4 "U4DSJQUBOE"OHVMBS IUUQCMPHMJOHPIVCDPNCSBDFGVUVSFDPNJOHFTBUTDSJQUBOHVMBS ˖ "OHVMBS+4ָ㱾ְIUUQNJ[DIJIBUFOBCMPHDPNFOUSZ ˖ "OHVMBS+4㱾ְז➂ָ㢳ְ僴➙חאְגIUUQCMPHQPSHFOUSZ ˖ "OHVMBS+4חאְגך䨽䠬IUUQIBWFMPHBZVNVTBUPDPNEFWFMPQKBWBTDSJQUFBOHVMBSKT@UIPVHIUIUNM ˖ ז׈"OHVMBS+4׾讂׭׷ךַ٦⦐➂涸ז䙼ְIUUQCMPHNJUTVSVPHJOGPBOHVMBSKTIUNM ˖ %BGU.POLHFOFSBUPSBOHVMBSGVMMTUBDLIUUQTHJUIVCDPN%BGU.POLHFOFSBUPSBOHVMBSGVMMTUBDL ˖ -*(⚺⪵ך"OHVMBS+4⹈䓼⠓OH$VSSZָꟚ⪵ׁ׸ת׃׋IUUQMJHJODDPKQXFCKTPUIFSKT ˖ 5PEE.PUUPIUUQUPEENPUUPDPN ˖ UXBEBQPXFSBTTFSUIUUQTHJUIVCDPNUXBEBQPXFSBTTFSU

96. 闐鳤 5ZQF4DSJQUٔؿ؋ٖٝأ ׻ַ׭תׁמ׹衼 "OHVMBS+4ٔؿ؋ٖٝأ 寑幐僇㸩ծꆃ❁⨳♧ծし歊䗡欰Ⱏ衼劤闌怴ח荚׷תדծׁתׂתז׀䭷㼪׾갥ְ׋׻ַ׭孑ծ寑幐孑ח 䖴爝歍׃♳־׋ֻ闐鳤חִַׇׁגְ׋׌ֹתׅ

97. ➙傈ך䗁统

98. ٌتٝAngularJS 1 ➙ַ׵&4俑岀ָ⢪ִ "OHVMBSث٦ي׮㛇燉ה׃ג䱰欽׃׋ 5ZQF4DSJQUד剅ֻ ٌتٝAngularJS 2 OHDPOUSPMMFS׾⢪׻׆ %JSFDUJWFDPOUSPMMFS׾欽ְ׷ ٌتٝAngularJS 3 鋵㶨ד$TDPQFךⰟ剣כ⽬ꤹ ⡚穠さח⡲׶ ؎كٝز꽀⹛׾䠐陎 ٌتٝAngularJS 4 ,BSNB 1SPUSBDUPSד ذأز׮䫙ַ׶זֻ ٌتٝAngularJS 5 "OHVMBSח⪒ִ׷ז׵ %JSFDUJWF׾琎噰涸ח荈⡲ ٌتٝAngularJS 7 $PSF"1*׾⢪ְװֻׅٓحف 荈⡲4FSWJDFד Ⳣ椚ךꅾ醱׾鼘ֽ׷ ٌتٝAngularJS 8 عو׶וֿ׹כ⯓➂ָعو׏ג׷ 縐׾䛊׸׆鹌׭ ٌتٝAngularJS 6 'BDUPSZח״׷JOKFDU׾崞欽׃ג "OHVMBS+4"1*׾ ⢪׻זְⳢ椚כ㢩פ ٌتٝAngularJS 9 ػح؛٦آ盖椚ծؽٕسخ٦ٕד ؝ٝػؙزז㹋鄲ח㼔䙀

99. ٌتٝAngularJS 10 ׉׸דכ Have a goodٌتٝAngularJS!

100. ׀幠耮֮׶ָהֲ׀ְׂת׃׋ %FD 痥㔐(%(⚥㕂⹈䓼⠓

SlideShare for iOS

Views

Actions

Embeds 2

Report content

Transcript