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.

モダンAngularJS @ GDG中国2014.12.6

GDG中国2014.12.6発表資料

モダンAngularJS @ GDG中国2014.12.6

  1. 1. ٌتٝAngularJS %FD 痥㔐(%(⚥㕂⹈䓼⠓
  2. 2. 荈䊹稱➜ ˖ 㤴ꅿ颩㣕龤0LVOP,FOUBSP ˖ ❨鿪䋐ַ׵勻ת׃׋
  3. 3. 鹈꟦أزحؙ侧501חג OHVMBS+4،ٝثػة٦ٝ꧊ָ ⡘׾ְ׋׌ֹת׃׋ http://qiita.com/armorik83/items/b00818ecaf2e93734b36
  4. 4. ?AngularJS ׀㶷濼דׅ״י
  5. 5. ?兛媮噟⹡ծ׉׸⟃㢩ろ׬ OHVMBS+4׾剅ְגְ׷הְֲ倯
  6. 6. ׉ֲד׃׳ֲ
  7. 7. ֶׁ׵ְOHVMBS+4הכ ˖ +BWB4DSJQUؿٖ٦يٙ٦ؙ (PPHMFָꟚ涪Ⱅ䒭חכ.788IBUFWFSה׃גְ׷ ˖ )5.-ك٦أךذٝفٖ٦ز ˖ 剅ֹװְׅر٦ة٥غ؎ٝر؍ؚٝ ˖ ٕ٦ذ؍ؚٝ堣圓 41ח剑黝 ˖ KBY؟ه٦ز 3451*ך؟٦غ،فٔ؛٦ءّٝה湱䚍ָ葺ְ
  8. 8. 㖇⦜涸 ˟BOHVMBSKT CBDLCPOF LOPDLPVU FNCFS WVFחKBWBTDSJQU׾➰♷׃ג嗚稊
  9. 9. չד׮OHVMBS+4׏ג㱾ְպ ִ׏㱾׻׸ג׷ך ׄׯ֮姺׭גֲֶַֿ˘
  10. 10. չד׮OHVMBS+4׏ג㱾ְպ ׍׳׏ה䖉׏ג ִ׏ ׄׯ֮
  11. 11. 1*ָמוְ 鋙ִ׷ֿה㢳ֺׅ 㼪Ⰵ؝أز넝ְ ׉׿זֿהכזְ
  12. 12. 植屣׾濼׹ֲ ˖ הכְִծ䩛佝׃דكة釈׭דֹ׷׻ֽדכזְ ˖ ד׮׉׸כו׿זؿٖ٦يٙ٦ؙ׮♧筰 ˖ OHVMBS+4ך植屣׾椚鍑׃ծ涸然חⵃ欽ׅ׷ ˖ OHVMBSث٦يך湡䭷ׅ倯ぢ䚍׾濼׶ 䖓ղ꬗⦜חז׵זְ׋׭חכ
  13. 13. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ׵禸פ ⡦חぢְגְ׷ךַ 鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך 縐 Ꟛ涪橆㞮ך⢽
  14. 14. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ׵禸פ ⡦חぢְגְ׷ךַ 鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך 縐 Ꟛ涪橆㞮ך⢽
  15. 15. ׀㶷濼דַׅ OHVMBSָꟚ涪⚥דׅ
  16. 16. K2VFSZٔٔ٦أ OHVMBS+4 OHVMBS+4 YYOHVMBS הכְִծٔٔ٦أ儗劍כ劢㹀 ֶֶ״׉ך儗劍ׅ׵僇鎉ׁ׸גְתׇ׿
  17. 17. 禸ך暴ꞿ ˖ 䎃剢傈חꟚ⪵ׁ׸׋OHFVSPQFחג ؽآָّٝ爙ׁ׸׋ ˖ ٌتٝـٓؐؠ׾䠐陎 4 $.4DSJQU ד圓眠ծ4ד׮ⵃ欽〳腉 ˖ U4DSJQUהְֲ䭁䓸鎉铂 㘗➰ֽծ،ظذ٦ءّٝծ㣐鋉垷⻉פך佄䴂 ˖ KR-JUFך䐖姺ծػؿؓ٦وٝأぢ♳ K2VFSZ⢪欽♶〳הז׷׻ֽדכזְ ˟䎃剢植㖈ך䞔㜠
  18. 18. 遼䷼涸ז䞔㜠׮ ˖ $POUSPMMFSָ搀ֻז׷ %JSFDUJWFה)5.-ذٝفٖ٦زָ㼎הז׷ ˖ $TDPQFָ搀ֻז׷ 顑⟣ⴓ䬐ծ䞔㜠ך⿫撑ծⰟ剣ך➬穈׫׾״׶僇然חׅ׷ ˟䎃剢植㖈ך䞔㜠
  19. 19. ؖٓحה㢌׻׷הַ䙳ְ ׄׯ֮姺׭גֲֶַֿ˘
  20. 20. ؖٓحה㢌׻׷הַ䙳ְ ׄׯ֮ ׍׳׏ה䖉׏ג
  21. 21. ךٔٔ٦أ傈כ劢㹀דׅ ˖ ׇ׏ַֻOHMVBS+4TUBCMFָ֮׷ךחծٔٔ٦أ傈 劢㹀ךOHVMBSך㢌⻉׾䛊׸ג姺׭תַׅ ˖ ⡦⢪ֲ׿דַׅ ˖ OHVMBSךؽآّٝכծꟚ涪ث٦يָ չ״׶OHVMBS׵׃ֻպ׾湡䭷׃׋穠卓 ˖ ׉ך䠐㔳׾穈׿ד植㖈ךOHVMBS+4׾剅ֽל 㼛勻㣐ֹז幉✉חכ荚׵זְךדכ
  22. 22. OHVMBSث٦يָ ?דؖٓٔה㢌ִ״ֲה׃גְ׷椚歋כ
  23. 23. OHVMBSָ湡䭷ׅ׮ך ˖ ٌتٝ٥ؿٖ٦يٙ٦ؙפ ˖ 4 $.4DSJQU דך㹋鄲 ˖ U4DSJQUח״׷㣐鋉垷فٗتؙزך鎸鶢佄䴂 ˖ ״׶侭椚ׁ׸׋1* ˖ 鋙ִ׷ֿה㢳ֺׅ׏גEJT׵׸׷ךծ荈鋙׃ג׷׵׃ְ
  24. 24. 4׏ג⡦ ˖ $.4DSJQUؙؒو٥أؙٔفزהכ+BWB4DSJQUך垥彊鋉呓 䧮ղָ+BWB4DSJQUהㄎע鎉铂כـٓؐؠ嫣ח倯鎉׌׵ֽ ˖ 植㖈ךٌتٝـٓؐؠ * כ4ח㼎䘔 4׾Ⰻג㹋鄲ׅ׷ـٓؐؠכ植㖈搀׃ ˖ DMBTT祩邅圓俑ծNPEVMF堣圓ծ1SPNJTFך垥彊⻉זוזו ˖ 鑫稢כؚؚ׏גי http://kangax.github.io/compat-table/es6/ؔأأً
  25. 25. U4DSJQU׏ג⡦ ˖ ׉ך⵸ח5ZQF4DSJQU.JDSPTPGU爡 ֿ׸כ꫼涸㘗➰ֽ圓俑׾⪒ִծ؝ٝػ؎ٓח״׏ג 㢌䳔儗חؒٓ٦׾ثؑحؙ׃+BWB4DSJQU׾欰䧭ׅ׷鎉铂 ˖ ֿך5ZQF4DSJQU׾ׁ׵ח䭁䓸׃׋ OHVMBSث٦يָ䲿周ׅ׷圓俑刹ֻ倜鎉铂דכזְ ˖ U4DSJQUדכ㘗➰ֽח⸇ִגծ ًةر٦ة鎸鶢ծ،ظذ٦ءّٝך圓俑׾酡䓼 @Directive({ selector: '[blink]' }) class Blink { constructor(elment: Element, options: Options, timeout: Timeout) { // ... } }
  26. 26. OHVMBS+4
  27. 27. 5ZQF4DSJQU ˖ 5ZQF4DSJQUכ4ך圓俑׾⯓遤㼪Ⰵ׃גְ׷ ˖ DMBTT NPEVMFזו ˖ ׮׍׹׿㢌䳔ׅ׷ךדծ4ךـٓؐؠד⹛ֻ ˖ ꫼涸㘗➰ֽה؝ٝػ؎ٓח״׷ؒٓ٦ثؑحؙ ˖ 㣐鋉垷Ꟛ涪קו؝ٝػ؎ٓך佄䴂ָꅾ銲ח ˖ OHVMBSד䲿周ׁ׸׷U4DSJQUח➙ַ׵䢪׸׷ז׵ֿ׸ ˖ 5ZQF4DSJQU荈⡤ծⰋגך+BWB4DSJQUח崞ַׇ׷ךד 鋙ִגְֶג䴦כזְ
  28. 28. ٌتٝAngularJS 1 ➙ַ׵4俑岀ָ⢪ִ OHVMBSث٦ي׮㛇燉ה׃ג䱰欽׃׋ 5ZQF4DSJQUד剅ֻ
  29. 29. $POUSPMMFS搀ֻז׏׍ׯֲ׿ ˖ 搀ֻז׷״ֲדׅ ˖ OHVMBSךٔٔ٦أכ劢㹀זךח 䎃חֶ❕ֻז׶הׁ׸׋ ˖ את׶ך儗挿ד׮䐖姺׾ 鋅馉׃׋קֲָ״ְ
  30. 30. OHDPOUSPMMFS׏ג ˖ ➙זֶ㢳ֻךثُ٦زٔ،ٕװـؚٗד稱➜ׁ׸גְ׷ OHDPOUSPMMFS ˖ ֮׸כ)5.-ךUUSJCVUFTדכזֻ ⽃ז׷%JSFDUJWFך♧珏ד֮׷ ˖ ֿ׸׏ג䗳갭זךַ div ng-controller=MainCtrl.../div
  31. 31. ׾鋅馉׃׋$POUSPMMFS ˖ %JSFDUJWFח׮DPOUSPMMFS1*ָ֮׶תׅ ˖ %JSFDUJWF׾⡲׏גծ%JSFDUJWF$POUSPMMFSהׅ׷ ˖ OHDPOUSPMMFS׌הdivח♧⦐䭷㹀׃ג 䖓כؤٓؤٓⳢ椚׾剅ָֹ׍ ˖ ֿךٕ٦ٕחׅ׷ֿהד⦐ղך%JSFDUJWF׾넝Ⳕ꧊פ .77.ך罋ִ倯 ˖ OH3PVUFٕ٦ذ؍ؚٝד׮DPOUSPMMFS䭷㹀כ׃זְ ̔7JFX׌ֽ׾䭷㹀׃ծ׉ך7JFXח%JSFDUJWF׌ֽ縧ֻ
  32. 32. ٌتٝAngularJS 2 OHDPOUSPMMFS׾⢪׻׆ %JSFDUJWFDPOUSPMMFS׾欽ְ׷
  33. 33. $TDPQF搀ֻז׏׍ׯֲ׿ ˖ 搀ֻז׷״ֲדׅ ˖ 植㖈חְֶג׮DPOUSPMMFST圓俑ָ 钠濼ׁ׸גַ׵⳿殢ָ慧幾 ˖ $TDPQFך1*XBUDIװCSPBEDBTU POכ➙ד׮⢪ֲ
  34. 34. ׾鋅馉׃׋$TDPQF ˖ 植㖈㹋鄲⚥ת׋כ珩⫴⚥ךءأذيחOHDPOUSPMMFSָ ֮׏ג$scope׮⢪׏גתׅהְֲ倯 ˖ 獳遤ָ㣐㢌׉ֲז׵ծת׆כDPOUSPMMFST圓俑ך䱰欽פ div ng-controller=MainCtrl as main.../div ˖ 鋵㶨꟦ד幉✉ׅ׷קו$scopeך䞔㜠׾װ׶ה׶ ׃ג׋׵ծ׉׶ׯ鏣鎘ך㉏겗
  35. 35. $CSPBEDBTU PO׾⢪ֲ ˖ ⦐ղך%JSFDUJWFכהחַֻ⡚穠さד⡲׷ ˖ ⡦ַך؎كٝزךزٔؖ٦ח$broadcast׾⢪ְ 꽀⹛⩎כ$onד「ֽ׷ ˖ 涪⥋⩎כծ➭ך؝ٝه٦طٝزָוֲ⹛ַֻ 「⥋⩎כծוךة؎ىؚٝד؎كٝزָ涪ׇ׵׸׷ַ ֶ✼ְ濼׵זֻגְְ⡚穠さ
  36. 36. ׋׌׃剑㊣דכזְ ˖ $broadcast, $onכ剑㊣ך،فٗ٦ثדכזְ ˖ 俑㶵⴨ٔذٕٓדװ׶ה׶ׅ׷ַ׵ד֮׷ ! $scope.$broadcast('EventNameString', args); ˖ *%ך佄䴂׮「ֽחְֻ ˖ 鍑寸岀ה׃גכծ$broadcast荈⡤׾ ׅץגTFSWJDFדٓحؾؚٝ׃ծًاحسה׃ג䪔ֲ $onח剅ֻ؎كٝزせ׮ծ׉ךTFSWJDFַ׵《䖤ׅ׷ ًاحسせז׵*%ָ钠陎׃ג酡㸣׃גֻ׸׷
  37. 37. ׋׌׃剑㊣דכזְ ˖ $broadcastךTFSWJDFٓحؾؚٝכ➙ךהֿ׹♳䩛ֻ ְ׏גְ׷ ˖ ׃ַ׃؎كٝز꽀⹛ךⰋג׾♧אךTFSWJDFדٓحف ׅ׷הծ׉׸כ׉׸ד㉏겗 荈ⴓכⴓꅿⴽח黝㹅㼭ⴓֽח׃גְתׅ ˖ $scopeךفٗػذ؍׾搀꠹ח鋵㶨דⰟ剣׃ 铣׫剅ֹׅ׷״׶כ然㹋 劤갈׾鎉ֲהד׮׏הְְ堣圓実׬
  38. 38. ٌتٝAngularJS 3 鋵㶨ד$TDPQFךⰟ剣כ⽬ꤹ ⡚穠さח⡲׶ ؎كٝز꽀⹛׾䠐陎
  39. 39. ׮何葺ׁ׸תׅ ˖ OHVMBS+4Y禸׮ծָٔٔ٦أׁ׸ג穄׻׶דכזְ ˖ ׅדחךو؎ش٦،حفر٦زָٔٔ٦أ ˖ ך湫禸ד֮׷׮鹌遤⚥ ˖ ٕ٦ذ؍ؚٝծؿؓ٦يծKBYך何葺זוָ 嗚鎢ׁ׸גְ׷垷圫 http://www.linkplugapp.com/a/1042855 ˟䎃剢植㖈ך䞔㜠
  40. 40. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ׵禸פ ⡦חぢְגְ׷ךַ 鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך 縐 Ꟛ涪橆㞮ך⢽
  41. 41. 猘荈魦ך؛٦أ ˖ 荈ⴓָוך״ֲחOHVMBS+4׾⢪׏גְ׷ַ ˖ 噟⹡ءأذي
  42. 42. 噟⹡خ٦ٕծ،ؙإ؟ٔך㹋鄲 ˖ 㼛勻涸חֿך䪮遭ך♧鿇׾♧菙ⰕꟚׅ׷ֿה׾ 湡锷׿׌㛇湍⡲׶ ֿ׿ז䠬ׄד⡲׏גתׅ
  43. 43. ⦐➂涸ז䠬䟝דכ֮׶תָׅ ˖ Ꟛ涪כ鸞ְדׅ ˖ ر٦ة٥غ؎ٝر؍ؚٝワ׶ָ侭׏גְ׷ךד ؛٦أךفٗزة؎فָּׅ⳿勻׷ ּׅ⹛ֻךדٌثك٦ءّٝכ笝䭯׃װְׅ ˖ 3451*ה鋵ㄤ䚍ָ넝ְךד傀㶷ךءأذيַ׵ 獳遤׃װְׅכ׆ 猘כ$BLF1)1ַ׵OPEFKTח獳遤׃׋
  44. 44. 41ד׮ծ♧皘䨽׌ֽד׮ ˖ %JSFDUJWFז׿ג⢪׻זְծIUNMⰻח湫䱸縧ְג ؿؓ٦يךغٔر٦ءّٝה׃ג׌ֽ⢪ְ׋ְ ְְ̔ה䙼ְתׅ ˖ ٕ٦ذ؍ؚٝ׮ⰋגOHVMBS+4 ؿٕח堣腉׾⢪׏ג4JOHMF1BHFQQMJDBUJPO׾Ꟛ涪ׅ׷׊ ׅ̔ל׵׃ְ ˖ OHVMBS+4ך䖤䠐הׅ׷ر٦ة٥غ؎ٝر؍ؚٝծ 345GVMծٕ٦ذ؍ؚٝהְ׏׋ⴓꅿַ׵⡦ָ⢪ִ׷ַ 鋅噰׭׷
  45. 45. ذأز׃װְׅ ˖ 41Ꟛ涪דכ%JSFDUJWF׮4FSWJDF׮ו׿ו׿㟓ִתׅ ˖ OHVMBSث٦يכذأزך׃װׁׅח ꅾ挿׾縧ְגְ׷ ˖ %*ك٦أךٌآُ٦ٕ鸬䵿הծٌحؙ岣Ⰵ ˖ ذأزٓٝش٦,BSNB ˖ ذأز1SPUSBDUPS ذأز剅ְגזְהֶַ⵸׉׸˘
  46. 46. ٌتٝAngularJS 4 ,BSNB 1SPUSBDUPSד ذأز׮䫙ַ׶זֻ
  47. 47. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ׵禸פ ⡦חぢְגְ׷ךַ 鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך 縐 Ꟛ涪橆㞮ך⢽
  48. 48. 鋙ִ׷ֿהָ㢳ֺׅ׷ ׉ֲד׮זְ
  49. 49. ת׆%JSFDUJWF鋙ִגֻ׌ְׁ
  50. 50. %JSFDUJWFח״ֻ֮׷铎鍑
  51. 51. %JSFDUJWFח״ֻ֮׷铎鍑 ˖ ꨇ׃ְ׵׃ְ
  52. 52. %JSFDUJWFח״ֻ֮׷铎鍑 ˖ ꨇ׃ְ׵׃ְ ˖ ꬗⦜ְֻׁ׵׃ְ
  53. 53. %JSFDUJWFח״ֻ֮׷铎鍑 ˖ ꨇ׃ְ׵׃ְ ˖ ꬗⦜ְֻׁ׵׃ְ ˖ 1*ָ醱꧟ֺׅ׷׵׃ְ
  54. 54. %JSFDUJWFח״ֻ֮׷铎鍑 ˖ ꨇ׃ְ׵׃ְ ˖ ꬗⦜ְֻׁ׵׃ְ ˖ 1*ָ醱꧟ֺׅ׷׵׃ְ 1*Ⰻ鿇ז׿ג⢪׻זְ
  55. 55. 穗꿀锑ַ׵ך%%0 ˖ %%0%JSFDUJWF%FGJOJUJPO0CKFDU ֮ךꞿְꞿְؔفءّٝծ%JSFDUJWFכ꬗⦜ה䙼׻׸׷♧殢ך⾱㔓 ˖ SFTUSJDU%JSFDUJWFך邌鎸倯岀ծ㾩䚍せַծ銲稆せַ˘ ˖ ֿ׸כ㾩䚍せה׃גה銲稆せה׃ג ׌ֽ鋙ִגֶֻ֮הכ⢪׻זְ ˖ TDPQF4DPQF׾欰䧭ׅ׷ַⰟ剣ׅ׷ַ ˖ 䌢חؔـآؙؑز٥ٔذٕٓד䭷㹀 A new isolate scope. ˖ Ⱏ剣⵸䲿ך鏣鎘כ鼘ֽ׋קֲָ葺ְ scope: { attr: '@myAttr', foo: '=myFoo', bar: '@myBar' },
  56. 56. ⢪׻זְ1* ˖ SFQMBDFEFQSFDBUFE ˖ USBOTDMVEF䮙⹛ָ湫䠬涸דזֻծ嗚鏾ך䩛꟦׾㟓װׅז׵ל ⢪׻זֻג׮ְְךדכ1*׾铣׿ד׮䗳銲ה䠬ׄ׋ֿהָזְ ˖ NVMUJMFNFOU䗳銲חז׏׋ֿהָזְ ➭ךٌآُ٦ٕ׾錁㻊׃ג׮鋅ַֽ׋ֿהָזְ ˖ QSJPSJUZ⮚⯓䏝׾孡חׅ׷䗳銲ך֮׷Ⰵ׸㶨כٔأؙ QSJPSJUZ׾⢪׻׆SFRVJSF׾⢪ֲ ˖ MJOLDPNQJMFך䨱׶⦼ַ׵ꟼ侧׾鵤ׇל״ְ ˟⦐➂ך䠬䟝דׅ
  57. 57. UFNQMBUF ˖ 䌢חUFNQMBUF6SM׾⢪׏גְ׷ ˖ ֮ת׶+4ا٦أⰻח俑㶵⴨ה׃גꞿְ)5.-׾ 剅ֹ׋ֻזְ ˖ ׋׌׃ծ㼭ׁזػ٦خ遤ד幥׬״ֲזכDPNQJMFⰻח $templateCache.put()׾⢪׏ג剅ֻֿהָ㢳ְ
  58. 58. ٌتٝAngularJS 5 OHVMBSח⪒ִ׷ז׵ %JSFDUJWF׾琎噰涸ח荈⡲
  59. 59. ս剼㜠վ %%0 %JSFDUJWF%FOJUJPO0CKFDU כ OHVMBSד䐖姺ׁ׸תׅ
  60. 60. 如ח4FSWJDF 'BDUPSZך麩ְ׾ 鋙ִגֶֻךָؔأأً
  61. 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. 62. ٗحؙ؎ٝ眔㔲׾㼰זֻ ˖ OHVMBS+4כ䊬㣐זؿٖ٦يٙ٦ؙ ♧䏝⢪ֲהٗحؙ؎ׁٝ׸׷ַ׵˘הְֲ䠐鋅׾耀ֻ ˖ ׃ַ׃OHVMBS+4׾⢪׏גְג׮ 㼛勻涸חYַ׵חכ獳遤⡲噟ָ涪欰ׅ׷כ׆ ˖ OHVMBS+4הꟼ⤘זְٗآحؙכ ז׷ץֻOHVMBS+4ך㢩ח剅ֻץֹׄׯי
  63. 63. .PEFMה*OKFDU ˖ .7$ׅץג׾OHVMBS+4דװ׹ֲהׅ׷ַ׵ ٗحؙ؎ָٝ孡חַַ׏גֻ׷ ˖ OHVMBS+4כ׋׌⽃ח345
  64. 64. 7JFX.PEFM
  65. 65. 5FNQMBUF ח暴⻉ ˖ .PEFMծؽآطأٗآحؙכOHVMBS+41*׾♧ⴖろתזְ 秪磏ז+4ה׃ג㹋鄲 ⟎חOHVMBS+4ָهءٍ׏ג׮➭'8ד⢪ְת׻ׇ׷״ֲח
  66. 66. .PEFMה*OKFDU ˖ ֿך秪磏ז+4ךٓ؎ـٓٔ׾OHVMBS+4ד欽ְ׷㜥さ 'BDUPSZ穗歋ד鵤ׅ ˖ ؚٗ٦غٕ㢌侧ח縧ְגOHVMBS+4ד⢪ֲֿה׮⳿勻׷ָ ٌحؙ⻉דֹזְךדذأزך♳ד㉏겗ָ饯ֿ׷ ˖ OHVMBS+4ךِصحزذأزכ䮶׷莸ְך嗚鏾ח殅׭גծ ذأزח״׷㣐ֹז笨הծؽآطأٗآحؙך稢ַז ِصحزذأزד⥂א angular.module('myModule') .factory('MyBusinessLogic', function() { return MyBusinessLogic; // インスタンスではなくコンストラクタ自体を返す });
  67. 67. ؔـآؙؑز䭷ぢ ˖ չ؎ٝأةٝأדכזֻ؝ٝأزؙٓة荈⡤׾鵤ׅպ הְֲ邌植ծ+BWB4DSJQUדכ׍׳׏ה꼧厩׫ָזְַ׮ ˖ 5ZQF4DSJQUדכDMBTT DPOTUSVDUPSװ㘗➰ֽך嚊䙀ָ֮׷ ˖ 㢌䳔䖓ָ+BWB4DSJQUד֮׶זָ׵׮ծ+BWBװ$涸ז ؔـآؙؑز䭷ぢך罋ִ倯ד鹌׭׷ֿהָדֹ׷ +BWB4DSJQU׌ֽד׮⳿勻׷ֽוQSPUPUZQFהְַ׹ְ׹剅ֻֿהָ꬗⦜ ˖ 4FSWJDF׮'BDUPSZ׮ծ5ZQF4DSJQUהך湱䚍כהג׮״ְ U4DSJQUָ涪邌ׁ׸׋ֿה׮ծ׉׸׾鏾僇׃גְ׷
  68. 68. ٌتٝAngularJS 6 'BDUPSZח״׷JOKFDU׾崞欽׃ג OHVMBS+41*׾ ⢪׻זְⳢ椚כ㢩פ
  69. 69. 4FSWJDFכOHVMBS+4ⰻח暴⻉ ˖ ♧倯ד4FSWJDFכOHVMBS+41*ך琎噰涸זⵃ欽ח暴⻉ ˖ $resource, $routeParams, $locationכ穗꿀♳ ؝٦سךꅾ醱ָ欰ת׸װְׅ ˖ $PSF1*׾ٓحف׃׋ծ荈ⴓ٥荈ث٦يָ⢪ְװְׅ 4FSWJDF׾欽䠐׃גⳢ椚׾♧⯋⻉ ˖ %JSFDUJWFDPOUSPMMFSכֻ֮תד׮醱侧ך4FSWJDFךⳢ椚ה 7JFX WFOU׾穠ןאֽ׷؎ٝةؿؑ٦أח䗡ׅ׷
  70. 70. ٌتٝAngularJS 7 $PSF1*׾⢪ְװֻׅٓحف 荈⡲4FSWJDFד Ⳣ椚ךꅾ醱׾鼘ֽ׷
  71. 71. Ⰻ鿇鋙ִ׷䗳銲כזְ
  72. 72. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ׵禸פ ⡦חぢְגְ׷ךַ 鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך 縐 Ꟛ涪橆㞮ך⢽
  73. 73. 䢪׸׷ה䙳ֻזְדָׅ ׍׳ְ׍׳ְ縐ָ֮׶תׅ
  74. 74. 1. minify対策 ˖ %*،ظذ٦ءّٝכ䗳׆剅ֹת׃׳ֲ ׁ׮זֻלNJOJGZ儗ח岛ֹתׅ ˖ %*،ظذ٦ءّٝהכծ؎ٝأةٝأ欰䧭儗ח ؎ٝآؙؑزׅ׷4FSWJDF׾寸㹀ׅ׷׋׭ך䞔㜠 ˖ 䒷侧׾俑㶵⴨דػ٦أ׃ג铣׿ד׷׵׃ְ׈˘ ה㢌䡾㹋鄲ָ鑧겗חז׶ת׃׋ָծ㣐㢌״׹׃ֻזְדׅ angular.module('myModule') .service('MyService', function(OtherService) { // ... ↑ここに無い!! }); ! angular.module('myModule') .service('MyService', ['OtherService', function(OtherService) { // ... }]); 罠
  75. 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. 76. 2. Filter ˖ ٕ٦فⳢ椚כ縐הז׶װְׅ ˖ ַ׵חז׶鸞䏝ָ何㊣ׁ׸׋ָ ֮ת׶㢳欽ׅ׷ה䕦갟ך⳿׷䛊׸ָ֮׷ ˖ OHVMBS+4#BUBSBOHהְֲ$ISPNF堣腉䭁䓸׾⢪׏ג ػؿؓ٦وٝأָ孡חז׏׋׵鎘庠׃״ֲ ˖ +40/欰䧭儗ח؟٦غ⩎ד㢌䳔ׅ׷קֲָ 僇׵ַח鸞ְךדծֿ׍׵׮銲嗚鎢 罠
  77. 77. 3. $routeProvider ˖ ꬊず劍Ⳣ椚ך鍑寸׾䖉׏גַ׵ٕ٦ذ؍ؚٝⳢ椚׾遤ֲ1* SFTPMWFחכ岣䠐 ˖ Ⳣ椚ָ$routeProviderה$POUSPMMFSדⴓꨄ׃ծ֮ה֮ה⥂㸚♳ד ٔأؙהז׷〳腉䚍׾ろ׬ ˖ ثُ٦زٔ،ٕ鸐׶חSFTPMWF׾剅ְג׃תֲה ذأز׃חְֻ鎸鶢פ 罠 ˖ %JSFDUJWFDPOUSPMMFSך罋ִ倯דְֻז׵㉏겗הז׶חְֻ ˖ OHVMBS6*3PVUFSהְֲ044׮֮׷ךד嗚鎢׃ג׮״ְַ׮
  78. 78. 4. AngularUI ˖ ׋׌׃ծ׉ךOHVMBS6* ׭׍ׯ⤑ⵃז؟٦سػ٦ذ؍٥ٓ؎ـٓٔ׌ָ OHVMBS+4ךٔٔ٦أ٥أؾ٦سח㼎׃ג䗍㦩ח刿倜ָ鹼ְ ˖ ו׿ז׮ךח׮鎉ִ׷ָծٓ؎ـٓٔך؝ىُصذ؍ך 崞䚍䏝װ刿倜걼䏝׾׫זָ׵ך䱰欽׾ ˖ 㹋ꥷծOHVMBS6*ח駈׾䲕ת׸ג׃ל׵ֻךתתד׃׋ ˖ ֮׏ծד׮6*3PVUFSכ⮚猕דׅ 罠
  79. 79. 5. directive処理順 ˖ ng-repeatװ%JSFDUJWFךcompile, link׾㢳欽׃גְ׷ה 넝然桦ד幉✉ׅ׷ ˖ K2VFSZ׮⢘欽׃גٔحثז6*׾邌植׃״ֲ הַ䙼ְ㨣׭׷הծ劍䖉ׅ׷銲稆ָundefined׌׏׋הַؠٓ ˖ ⹞׾אַ׬תדכ嗚鏾ָ㣐㢌 罠 ˖ ⯓傈剢傈ⰕꟚ׃׋2JJUBEWFOU$BMFOEBSך䬴鎸✲ חגծֿךװװֿ׃ְⳢ椚갫׾Ⰻגתה׭גְתׅ ׈מ׀⿫罋ח
  80. 80. ٌتٝAngularJS 8 عو׶וֿ׹כ⯓➂ָعو׏ג׷ 縐׾䛊׸׆鹌׭
  81. 81. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ׵禸פ ⡦חぢְגְ׷ךַ 鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך 縐 Ꟛ涪橆㞮ך⢽
  82. 82. 剑䖓ח猘⦐➂ך Ꟛ涪橆㞮ך⢽׾稱➜׃ג 箍׭ֻֻ׶תׅ ׋ע׿꽀ֽ駈
  83. 83. 圓䧭 4FSWFS OPEFKT .POHP%# YQSFTT OHVMBS+4 JOKFDU -PDBM.PEVMFT 6UJMJUJFT .PEFM 3451*
  84. 84. ⴱ㔐כ HFOFSBUPSBOHVMBSGVMMTUBDL
  85. 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. 86. Ꟛ涪ך剑ⴱחװ׏׋ֿה ˖ ⡦״׶׮ؚٗ⳿⸂ת׻׶׾䲧ִ׋ ˖ 䧭⸆٥㣟侁׾ろ׭ג宕竲涸ח婍ؚׅٗך⳿⸂הծ ؒٓ٦ך׋ןחة٦ىشٕװـٓؐؠ٥؝ٝا٦ٕח 邌爙ׇׁ׷ؚٗワ׶ך⳿⸂ה侭䕎 ˖ OPEFKTךYQSFTTהOHVMBS+4חֶֽ׷1*ך鸐⥋כ 暴ח稢ַֻ鎸ꐮ ˖ .POHP%#׾䪔ֲٓ؎ـٓٔ.POHPPTFָ׉ֿ׉ֿؚٗ׾ ちֻךדծر٦ةك٦أ٥؝طؙءّٝת׻׶ד鷿倯ח 凃׸׷ֿהכ㼰זַ׏׋
  87. 87. ؝٦ر؍ؚٝ٥أة؎ٕ ˖ angular.module()ך剅ֹ倯׌הַծinjectך剅ֹ倯׌הַ ׫׿זֽ׏ֲֿغٓغٓ ˖ 剑ⴱח鋅׋ثُ٦زٔ،ٕךأة؎ٕד׉ךתת鹌׭ג׃תֲ؛٦أ ֿ׸כהג׮⽬זְ ثُ٦زٔ،ٕכꞿ劍鏣鎘׾䠐陎׃גְזְ ˖ ؚؚ׏׋׵侧珏겲ך؝٦ر؍ؚٝ٥أة؎ָٕ⳿גֻ׷ BOHVMBSKTTUZMFHVJEF嗚稊 ˖ ׉׸׵ח׮䊴כ֮׷ָծⰟ鸐׃ג鶢ץגְ׷✲갪׮֮׷ךד ׉ך鴟䖞ֲץֹ ˖ ⦐➂涸חכ function(){funtion(){function(){... ָ 㜔ִ׵׸זְךדծ〳腉זꣲ׶䎂׵ח剅ְגְ׷ ׉ך倯ָꬊず劍窃׫ךذأزװ䊴׃剏ִ׮׃װְׅ
  88. 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. 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. 90. ذأز ˖ OPEFKT⩎כ׉ךתת.PDIB OHVMBS+4⩎כ,BSNB
  91. 91. 1IBOUPN+4
  92. 92. +BTNJOF ˖ OHVMBS+4Ⱅ䒭דכذأز٥ؿٖ٦يٙ٦ؙח +BTNJOF׾⹻׭גְ׷ָ.PDIBָ⹛ַזְ׻ֽדכזְ ˖ ذأز1SPUSBDUPSחꟼ׃גכ +BTNJOFח✲㹋♳ꣲ㹀ׁ׸׷ ˖ ،؟٦ءّٝכQPXFSBTTFSU ٌحؙذأزכ4JOPO+4ծ+BTNJOF4QZ׾⢘欽 ➙䖓4JOPO+4⩎ח♧劤⻉׃״ֲה䙼׏גְ׷
  93. 93. 㣐鋉垷⻉ך䝢׫ה鍑寸 ˖ 䎃דֽ׏ֲֿ花׵׿ד׃ת׏׋ 植㖈♰遤קו瑞遤ծ؝ًٝز׾ꤐֻ ˖ ذأزך㹋遤ָ鹼ַ׏׋׶ծמהאך%JSFDUJWFך嗚鏾ָ ꬗⦜חז׏גֹ׋׶ծرًٔحزָ湡甧׍㨣׭׋ ˖ 琎噰涸ח㢩鿇ٌآُ٦ٕ⻉ծ(JUךٔهآزٔ׮ⴓֽ 㢌刿׾鷄ְװֻׅ׃ծذأزך顑⟣眔㔲׮ꣲ㹀׃׋ ˖ ꬗⦜ז㢩鿇ٌآُ٦ٕ⻉חכ:FPNBO(FOFSBUPS׾荈⡲׃⼱荈⹛⻉ ˖ 穠卓ծ何葺ׅץֹ挿ծ倜堣腉ך㹋鄲ծغؚ涪欰皘䨽ָ ּׅⴓַ׷״ֲחז׶؎؎ֿהל׏ַ׶דׅ 剑ⴱַ׵׉ֲׅץֹ׌׏׋
  94. 94. ٌتٝAngularJS 9 ػح؛٦آ盖椚ծؽٕسخ٦ٕד ؝ٝػؙزז㹋鄲ח㼔䙀
  95. 95. ⿫罋项俱٥鎸✲갫♶ず ˖ OHFVSPQFIUUQOHFVSPQFPSH ˖ OHVMBS+4ؕٝؿ؋ٖٝأOHFVSPQFךأٓ؎سתה׭ IUUQBOHVMBSKTOJOKBDPNCMPHTMJEFTBUOHFVSPQF ˖ 傈劤铂鏬OHFVSPQF OHVMBS BOE#FZPOE IUUQBOHVMBSKTOJOKBDPNCMPHOHFVSPQFBOHVMBSBOECFZPOEJOKBQBOFTF ˖ ⚅歲ך+BWB4DSJQU׾铣׮ֲIUUQB[VHJUIVCJPTMJEFKTFSKBWBTDSJQUIUNM ˖ 2JJUB]OHVMBSًٌIUUQRJJUBDPNTIVIFJJUFNTCEDBBG ˖ #SBDFZPVSTFMWFT GVUVSFJTDPNJOH4 U4DSJQUBOEOHVMBS 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. 96. 闐鳤 5ZQF4DSJQUٔؿ؋ٖٝأ ׻ַ׭תׁמ׹衼 OHVMBS+4ٔؿ؋ٖٝأ 寑幐僇㸩ծꆃ❁⨳♧ծし歊䗡欰Ⱏ衼 劤闌怴ח荚׷תדծׁתׂתז׀䭷㼪׾갥ְ׋׻ַ׭孑ծ寑幐孑ח 䖴爝歍׃♳־׋ֻ闐鳤חִַׇׁגְ׋׌ֹתׅ
  97. 97. ➙傈ך䗁统
  98. 98. ٌتٝAngularJS 1 ➙ַ׵4俑岀ָ⢪ִ OHVMBSث٦ي׮㛇燉ה׃ג䱰欽׃׋ 5ZQF4DSJQUד剅ֻ ٌتٝAngularJS 2 OHDPOUSPMMFS׾⢪׻׆ %JSFDUJWFDPOUSPMMFS׾欽ְ׷ ٌتٝAngularJS 3 鋵㶨ד$TDPQFךⰟ剣כ⽬ꤹ ⡚穠さח⡲׶ ؎كٝز꽀⹛׾䠐陎 ٌتٝAngularJS 4 ,BSNB 1SPUSBDUPSד ذأز׮䫙ַ׶זֻ ٌتٝAngularJS 5 OHVMBSח⪒ִ׷ז׵ %JSFDUJWF׾琎噰涸ח荈⡲ ٌتٝAngularJS 7 $PSF1*׾⢪ְװֻׅٓحف 荈⡲4FSWJDFד Ⳣ椚ךꅾ醱׾鼘ֽ׷ ٌتٝAngularJS 8 عو׶וֿ׹כ⯓➂ָعو׏ג׷ 縐׾䛊׸׆鹌׭ ٌتٝAngularJS 6 'BDUPSZח״׷JOKFDU׾崞欽׃ג OHVMBS+41*׾ ⢪׻זְⳢ椚כ㢩פ ٌتٝAngularJS 9 ػح؛٦آ盖椚ծؽٕسخ٦ٕד ؝ٝػؙزז㹋鄲ח㼔䙀
  99. 99. ٌتٝAngularJS 10 ׉׸דכ Have a goodٌتٝAngularJS!
  100. 100. ׀幠耮֮׶ָהֲ׀ְׂת׃׋ %FD 痥㔐(%(⚥㕂⹈䓼⠓

×