Upgrade to Pro — share decks privately, control downloads, hide ads and more …

モダンAngularJS @ GDG中国2014.12.6

2bedb1eb8f841cd3c3ae584600b016e0?s=47 OKUNOKENTARO
December 06, 2014

モダンAngularJS @ GDG中国2014.12.6

2014年12月6日発表分の資料をSlideShareより再掲。
http://www.slideshare.net/armorik83/angularjs-141206

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

December 06, 2014
Tweet

Transcript

  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禸ַ׵禸פ  ⡦חぢְגְ׷ךַ  鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך  縐 

    Ꟛ涪橆㞮ך⢽
  14. ،ؐزٓ؎ٝ  "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 5ZQF4DSJQU ˖ 5ZQF4DSJQUכ&4ך圓俑׾⯓遤㼪Ⰵ׃גְ׷ ˖ DMBTT NPEVMFזו ˖ ׮׍׹׿㢌䳔ׅ׷ךדծ&4ךـٓؐؠד⹛ֻ ˖

    ꫼涸㘗➰ֽה؝ٝػ؎ٓח״׷ؒٓ٦ثؑحؙ ˖ 㣐鋉垷Ꟛ涪קו؝ٝػ؎ٓך佄䴂ָꅾ銲ח ˖ "OHVMBSד䲿周ׁ׸׷"U4DSJQUח➙ַ׵䢪׸׷ז׵ֿ׸ ˖ 5ZQF4DSJQU荈⡤ծⰋגך+BWB4DSJQUח崞ַׇ׷ךד
 鋙ִגְֶג䴦כזְ
  27. ٌتٝAngularJS 1 ➙ַ׵&4俑岀ָ⢪ִ "OHVMBSث٦ي׮㛇燉ה׃ג䱰欽׃׋ 5ZQF4DSJQUד剅ֻ

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

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

    ng-controller="MainCtrl">...</div>
  30. ׾鋅馉׃׋$POUSPMMFS ˖ %JSFDUJWFח׮DPOUSPMMFS"1*ָ֮׶תׅ ˖ %JSFDUJWF׾⡲׏גծ%JSFDUJWF$POUSPMMFSהׅ׷ ˖ OHDPOUSPMMFS׌ה<div>ח♧⦐䭷㹀׃ג
 䖓כؤٓؤٓⳢ椚׾剅ָֹ׍ ˖ ֿךٕ٦ٕחׅ׷ֿהד⦐ղך%JSFDUJWF׾넝Ⳕ꧊פ


    .77.ך罋ִ倯 ˖ OH3PVUFٕ٦ذ؍ؚٝד׮DPOUSPMMFS䭷㹀כ׃זְ
 ̔7JFX׌ֽ׾䭷㹀׃ծ׉ך7JFXח%JSFDUJWF׌ֽ縧ֻ
  31. ٌتٝAngularJS 2 OHDPOUSPMMFS׾⢪׻׆ %JSFDUJWFDPOUSPMMFS׾欽ְ׷

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

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

    ng-controller="MainCtrl as main">...</div>
  34. $CSPBEDBTU PO׾⢪ֲ ˖ ⦐ղך%JSFDUJWFכהחַֻ⡚穠さד⡲׷ ˖ ⡦ַך؎كٝزךزٔؖ٦ח$broadcast׾⢪ְ
 꽀⹛⩎כ$onד「ֽ׷ ˖ 涪⥋⩎כծ➭ך؝ٝه٦طٝزָוֲ⹛ַֻ
 「⥋⩎כծוךة؎ىؚٝד؎كٝزָ涪ׇ׵׸׷ַ


    ֶ✼ְ濼׵זֻגְְ⡚穠さ
  35. ׋׌׃剑㊣דכזְ ˖ $broadcast, $onכ剑㊣ך،فٗ٦ثדכזְ ˖ 俑㶵⴨ٔذٕٓדװ׶ה׶ׅ׷ַ׵ד֮׷ ! ˖ *%&ך佄䴂׮「ֽחְֻ ˖

    鍑寸岀ה׃גכծ$broadcast荈⡤׾
 ׅץגTFSWJDFדٓحؾؚٝ׃ծًاحسה׃ג䪔ֲ
 $onח剅ֻ؎كٝزせ׮ծ׉ךTFSWJDFַ׵《䖤ׅ׷
 ًاحسせז׵*%&ָ钠陎׃ג酡㸣׃גֻ׸׷ $scope.$broadcast('EventNameString', args);
  36. ׋׌׃剑㊣דכזְ ˖ $broadcastךTFSWJDFٓحؾؚٝכ➙ךהֿ׹♳䩛ֻ
 ְ׏גְ׷ ˖ ׃ַ׃؎كٝز꽀⹛ךⰋג׾♧אךTFSWJDFדٓحف
 ׅ׷הծ׉׸כ׉׸ד㉏겗
 荈ⴓכⴓꅿⴽח黝㹅㼭ⴓֽח׃גְתׅ ˖ $scopeךفٗػذ؍׾搀꠹ח鋵㶨דⰟ剣׃


    铣׫剅ֹׅ׷״׶כ然㹋
 劤갈׾鎉ֲהד׮׏הְְ堣圓実׬
  37. ٌتٝAngularJS 3 鋵㶨ד$TDPQFךⰟ剣כ⽬ꤹ ⡚穠さח⡲׶
 ؎كٝز꽀⹛׾䠐陎

  38. ׮何葺ׁ׸תׅ ˖ "OHVMBS+4Y禸׮ծָٔٔ٦أׁ׸ג穄׻׶דכזְ ˖ ׅדחךو؎ش٦،حفر٦زָٔٔ٦أ ˖ ך湫禸ד֮׷׮鹌遤⚥ ˖ ٕ٦ذ؍ؚٝծؿؓ٦يծ"KBYך何葺זוָ
 嗚鎢ׁ׸גְ׷垷圫

    http://www.linkplugapp.com/a/1042855 ˟䎃剢植㖈ך䞔㜠
  39. ،ؐزٓ؎ٝ  "OHVMBS+4Y禸ַ׵禸פ  ⡦חぢְגְ׷ךַ  鋙ִ׋קֲָ״ְ׮ךծ鋙ִזֻג״ְ׮ך  縐 

    Ꟛ涪橆㞮ך⢽
  40. 猘荈魦ך؛٦أ ˖ 荈ⴓָוך״ֲח"OHVMBS+4׾⢪׏גְ׷ַ ˖ 噟⹡ءأذي 噟⹡خ٦ٕծ،ؙإ؟ٔך㹋鄲 ˖ 㼛勻涸חֿך䪮遭ך♧鿇׾♧菙ⰕꟚׅ׷ֿה׾
 湡锷׿׌㛇湍⡲׶ ֿ׿ז䠬ׄד⡲׏גתׅ

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


    猘כ$BLF1)1ַ׵OPEFKTח獳遤׃׋
  42. 41"ד׮ծ♧皘䨽׌ֽד׮ ˖ %JSFDUJWFז׿ג⢪׻זְծ IUNMⰻח湫䱸縧ְג
 ؿؓ٦يךغٔر٦ءّٝה׃ג׌ֽ⢪ְ׋ְ
 ְְ̔ה䙼ְתׅ ˖ ٕ٦ذ؍ؚٝ׮Ⰻג"OHVMBS+4
 ؿٕח堣腉׾⢪׏ג4JOHMF1BHF"QQMJDBUJPO׾Ꟛ涪ׅ׷׊
 ׅ̔ל׵׃ְ

    ˖ "OHVMBS+4ך䖤䠐הׅ׷ر٦ة٥غ؎ٝر؍ؚٝծ 3&45GVMծٕ٦ذ؍ؚٝהְ׏׋ⴓꅿַ׵⡦ָ⢪ִ׷ַ
 鋅噰׭׷
  43. ذأز׃װְׅ ˖ 41"Ꟛ涪דכ%JSFDUJWF׮4FSWJDF׮ו׿ו׿㟓ִתׅ ˖ "OHVMBSث٦يכذأزך׃װׁׅח
 ꅾ挿׾縧ְגְ׷ ˖ %*ك٦أךٌآُ٦ٕ鸬䵿הծٌحؙ岣Ⰵ ˖ ذأزٓٝش٦,BSNB

    ˖ &&ذأز1SPUSBDUPS ذأز剅ְגזְהֶַ⵸׉׸˘
  44. ٌتٝAngularJS 4 ,BSNB 1SPUSBDUPSד ذأز׮䫙ַ׶זֻ

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

    Ꟛ涪橆㞮ך⢽
  46. 鋙ִ׷ֿהָ㢳ֺׅ׷  ׉ֲד׮זְ

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

  48. %JSFDUJWFח״ֻ֮׷铎鍑

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

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

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

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

  53. 穗꿀锑ַ׵ך%%0 ˖ %%0%JSFDUJWF%FGJOJUJPO0CKFDU
 ֮ךꞿְꞿְؔفءّٝծ%JSFDUJWFכ꬗⦜ה䙼׻׸׷♧殢ך⾱㔓 ˖ SFTUSJDU%JSFDUJWFך邌鎸倯岀ծ㾩䚍せַծ銲稆せַ˘ ˖ ֿ׸כ"㾩䚍せה׃גה&銲稆せה׃ג
 ׌ֽ鋙ִגֶֻ֮הכ⢪׻זְ ˖

    TDPQF4DPQF׾欰䧭ׅ׷ַⰟ剣ׅ׷ַ ˖ 䌢חؔـآؙؑز٥ٔذٕٓד䭷㹀
 A new "isolate" scope. ˖ Ⱏ剣⵸䲿ך鏣鎘כ鼘ֽ׋קֲָ葺ְ scope: { attr: '@myAttr', foo: '=myFoo', bar: '@myBar' },
  54. ⢪׻זְ"1* ˖ SFQMBDFEFQSFDBUFE ˖ USBOTDMVEF䮙⹛ָ湫䠬涸דזֻծ嗚鏾ך䩛꟦׾㟓װׅז׵ל
 ⢪׻זֻג׮ְְךדכ"1*׾铣׿ד׮䗳銲ה䠬ׄ׋ֿהָזְ ˖ NVMUJ&MFNFOU䗳銲חז׏׋ֿהָזְ
 ➭ךٌآُ٦ٕ׾錁㻊׃ג׮鋅ַֽ׋ֿהָזְ ˖

    QSJPSJUZ⮚⯓䏝׾孡חׅ׷䗳銲ך֮׷Ⰵ׸㶨כٔأؙ
 QSJPSJUZ׾⢪׻׆SFRVJSF׾⢪ֲ ˖ MJOLDPNQJMFך䨱׶⦼ַ׵ꟼ侧׾鵤ׇל״ְ ˟⦐➂ך䠬䟝דׅ
  55. UFNQMBUF ˖ 䌢חUFNQMBUF6SM׾⢪׏גְ׷ ˖ ֮ת׶+4ا٦أⰻח俑㶵⴨ה׃גꞿְ)5.-׾
 剅ֹ׋ֻזְ ˖ ׋׌׃ծ㼭ׁזػ٦خ遤ד幥׬״ֲזכDPNQJMFⰻח
 $templateCache.put()׾⢪׏ג剅ֻֿהָ㢳ְ

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

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

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

  59. 4FSWJDFה'BDUPSZ ˖ 4FSWJDF؝ٝأزؙٓةꟼ侧׾♷ִג"OHVMBS+4ָ
 ؎ٝأةٝأ׾欰䧭
 4JOHMFUPOה׃ג婍׷ ˖ 'BDUPSZ♷ִ׋ꟼ侧׾
 㹋遤׃䨱׶⦼׾鵤ׅ function MyComponent()

    { // ... } ! angular.module('myModule') .service('MyComponent', MyComponent); ! angular.module('myModule') .factory('MyComponent', function() { return MyComponent; });
  60. ٗحؙ؎ٝ眔㔲׾㼰זֻ ˖ "OHVMBS+4כ䊬㣐זؿٖ٦يٙ٦ؙ
 ♧䏝⢪ֲהٗحؙ؎ׁٝ׸׷ַ׵˘הְֲ䠐鋅׾耀ֻ ˖ ׃ַ׃"OHVMBS+4׾⢪׏גְג׮
 㼛勻涸חYַ׵חכ獳遤⡲噟ָ涪欰ׅ׷כ׆ ˖ "OHVMBS+4הꟼ⤘זְٗآحؙכ
 ז׷ץֻ"OHVMBS+4ך㢩ח剅ֻץֹׄׯי

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

    .PEFMծؽآطأٗآحؙכ"OHVMBS+4"1*׾♧ⴖろתזְ
 秪磏ז+4ה׃ג㹋鄲
 ⟎ח"OHVMBS+4ָهءٍ׏ג׮➭'8ד⢪ְת׻ׇ׷״ֲח
  62. .PEFMה*OKFDU ˖ ֿך秪磏ז+4ךٓ؎ـٓٔ׾"OHVMBS+4ד欽ְ׷㜥さ
 'BDUPSZ穗歋ד鵤ׅ ˖ ؚٗ٦غٕ㢌侧ח縧ְג"OHVMBS+4ד⢪ֲֿה׮⳿勻׷ָ ٌحؙ⻉דֹזְךדذأزך♳ד㉏겗ָ饯ֿ׷ ˖ "OHVMBS+4ךِصحزذأزכ䮶׷莸ְך嗚鏾ח殅׭גծ
 &&ذأزח״׷㣐ֹז笨הծؽآطأٗآحؙך稢ַז

    ِصحزذأزד⥂א angular.module('myModule') .factory('MyBusinessLogic', function() { return MyBusinessLogic; // ΠϯελϯεͰ͸ͳ͘ίϯετϥΫλࣗମΛฦ͢ });
  63. ؔـآؙؑز䭷ぢ ˖ չ؎ٝأةٝأדכזֻ؝ٝأزؙٓة荈⡤׾鵤ׅպ
 הְֲ邌植ծ+BWB4DSJQUדכ׍׳׏ה꼧厩׫ָזְַ׮ ˖ 5ZQF4DSJQUדכDMBTT DPOTUSVDUPSװ㘗➰ֽך嚊䙀ָ֮׷ ˖ 㢌䳔䖓ָ+BWB4DSJQUד֮׶זָ׵׮ծ+BWBװ$涸ז
 ؔـآؙؑز䭷ぢך罋ִ倯ד鹌׭׷ֿהָדֹ׷


    +BWB4DSJQU׌ֽד׮⳿勻׷ֽוQSPUPUZQFהְַ׹ְ׹剅ֻֿהָ꬗⦜ ˖ 4FSWJDF׮'BDUPSZ׮ծ5ZQF4DSJQUהך湱䚍כהג׮״ְ
 "U4DSJQUָ涪邌ׁ׸׋ֿה׮ծ׉׸׾鏾僇׃גְ׷
  64. ٌتٝAngularJS 6 'BDUPSZח״׷JOKFDU׾崞欽׃ג "OHVMBS+4"1*׾
 ⢪׻זְⳢ椚כ㢩פ

  65. 4FSWJDFכ"OHVMBS+4ⰻח暴⻉ ˖ ♧倯ד4FSWJDFכ"OHVMBS+4"1*ך琎噰涸זⵃ欽ח暴⻉ ˖ $resource, $routeParams, $locationכ穗꿀♳
 ؝٦سךꅾ醱ָ欰ת׸װְׅ ˖ $PSF"1*׾ٓحف׃׋ծ荈ⴓ٥荈ث٦يָ⢪ְװְׅ

    4FSWJDF׾欽䠐׃גⳢ椚׾♧⯋⻉ ˖ %JSFDUJWFDPOUSPMMFSכֻ֮תד׮醱侧ך4FSWJDFךⳢ椚ה 7JFX &WFOU׾穠ןאֽ׷؎ٝةؿؑ٦أח䗡ׅ׷
  66. ٌتٝAngularJS 7 $PSF"1*׾⢪ְװֻׅٓحف 荈⡲4FSWJDFד
 Ⳣ椚ךꅾ醱׾鼘ֽ׷

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

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

    Ꟛ涪橆㞮ך⢽
  69. 䢪׸׷ה䙳ֻזְדָׅ ׍׳ְ׍׳ְ縐ָ֮׶תׅ

  70. ˖ %*،ظذ٦ءّٝכ䗳׆剅ֹת׃׳ֲ
 ׁ׮זֻלNJOJGZ儗ח岛ֹתׅ ˖ %*،ظذ٦ءّٝהכծ؎ٝأةٝأ欰䧭儗ח
 ؎ٝآؙؑزׅ׷4FSWJDF׾寸㹀ׅ׷׋׭ך䞔㜠 ˖ 䒷侧׾俑㶵⴨דػ٦أ׃ג铣׿ד׷׵׃ְ׈˘
 ה㢌䡾㹋鄲ָ鑧겗חז׶ת׃׋ָծ㣐㢌״׹׃ֻזְדׅ 1.

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

    1. minify対策 function MyService(OtherService) { // ... } MyService.$inject = ['OtherService']; ! angular.module('myModule') .service('MyService', MyService); <body ng-app="myApp" ng-strict-di> ... </body>
  72. ˖ ٕ٦فⳢ椚כ縐הז׶װְׅ ˖ ַ׵חז׶鸞䏝ָ何㊣ׁ׸׋ָ
 ֮ת׶㢳欽ׅ׷ה䕦갟ך⳿׷䛊׸ָ֮׷ ˖ "OHVMBS+4#BUBSBOHהְֲ$ISPNF堣腉䭁䓸׾⢪׏ג
 ػؿؓ٦وٝأָ孡חז׏׋׵鎘庠׃״ֲ ˖ +40/欰䧭儗ח؟٦غ⩎ד㢌䳔ׅ׷קֲָ


    僇׵ַח鸞ְךדծֿ׍׵׮銲嗚鎢 2. Filter
  73. ˖ ꬊず劍Ⳣ椚ך鍑寸׾䖉׏גַ׵ٕ٦ذ؍ؚٝⳢ椚׾遤ֲ"1* SFTPMWFחכ岣䠐 ˖ Ⳣ椚ָ$routeProviderה$POUSPMMFSדⴓꨄ׃ծ֮ה֮ה⥂㸚♳ד ٔأؙהז׷〳腉䚍׾ろ׬ ˖ ثُ٦زٔ،ٕ鸐׶חSFTPMWF׾剅ְג׃תֲה
 ذأز׃חְֻ鎸鶢פ ˖

    %JSFDUJWFDPOUSPMMFSך罋ִ倯דְֻז׵㉏겗הז׶חְֻ ˖ "OHVMBS6*3PVUFSהְֲ044׮֮׷ךד嗚鎢׃ג׮״ְַ׮ 3. $routeProvider
  74. ˖ ׋׌׃ծ׉ך"OHVMBS6*
 ׭׍ׯ⤑ⵃז؟٦سػ٦ذ؍٥ٓ؎ـٓٔ׌ָ
 "OHVMBS+4ךٔٔ٦أ٥أؾ٦سח㼎׃ג䗍㦩ח刿倜ָ鹼ְ ˖ ו׿ז׮ךח׮鎉ִ׷ָծٓ؎ـٓٔך؝ىُصذ؍ך
 崞䚍䏝װ刿倜걼䏝׾׫זָ׵ך䱰欽׾ ˖ 㹋ꥷծ"OHVMBS6*ח駈׾䲕ת׸ג׃ל׵ֻךתתד׃׋ ˖

    ֮׏ծד׮6*3PVUFSכ⮚猕דׅ 4. AngularUI
  75. ˖ ng-repeatװ%JSFDUJWFךcompile, link׾㢳欽׃גְ׷ה
 넝然桦ד幉✉ׅ׷ ˖ K2VFSZ׮⢘欽׃גٔحثז6*׾邌植׃״ֲ
 הַ䙼ְ㨣׭׷הծ劍䖉ׅ׷銲稆ָundefined׌׏׋הַؠٓ ˖ ⹞׾אַ׬תדכ嗚鏾ָ㣐㢌 ˖

    ⯓傈剢傈ⰕꟚ׃׋2JJUB"EWFOU$BMFOEBSך䬴鎸✲
 חגծֿךװװֿ׃ְⳢ椚갫׾Ⰻגתה׭גְתׅ
 ׈מ׀⿫罋ח 5. directive処理順
  76. ٌتٝAngularJS 8 عو׶וֿ׹כ⯓➂ָعو׏ג׷ 縐׾䛊׸׆鹌׭

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

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

  79. 圓䧭 4FSWFS OPEFKT &YQSFTT .POHP%# "OHVMBS+4 -PDBM.PEVMFT 6UJMJUJFT .PEFM JOKFDU

    3&45"1*
  80. ⴱ㔐כ
 HFOFSBUPSBOHVMBSGVMMTUBDL

  81. 植㖈ךر؍ؙٖزٔ 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 㶵ָ㼭ֻׁגְׅתׇ׿
  82. Ꟛ涪ך剑ⴱחװ׏׋ֿה ˖ ⡦״׶׮ؚٗ⳿⸂ת׻׶׾䲧ִ׋ ˖ 䧭⸆٥㣟侁׾ろ׭ג宕竲涸ח婍ؚׅٗך⳿⸂הծ
 ؒٓ٦ך׋ןחة٦ىشٕװـٓؐؠ٥؝ٝا٦ٕח
 邌爙ׇׁ׷ؚٗワ׶ך⳿⸂ה侭䕎 ˖ OPEFKTך&YQSFTTה"OHVMBS+4חֶֽ׷"1*ך鸐⥋כ
 暴ח稢ַֻ鎸ꐮ

    ˖ .POHP%#׾䪔ֲٓ؎ـٓٔ.POHPPTFָ׉ֿ׉ֿؚٗ׾ ちֻךדծر٦ةك٦أ٥؝طؙءّٝת׻׶ד鷿倯ח
 凃׸׷ֿהכ㼰זַ׏׋
  83. ؝٦ر؍ؚٝ٥أة؎ٕ ˖ angular.module()ך剅ֹ倯׌הַծinjectך剅ֹ倯׌הַ
 ׫׿זֽ׏ֲֿغٓغٓ ˖ 剑ⴱח鋅׋ثُ٦زٔ،ٕךأة؎ٕד׉ךתת鹌׭ג׃תֲ؛٦أ
 ֿ׸כהג׮⽬זְ
 ثُ٦زٔ،ٕכꞿ劍鏣鎘׾䠐陎׃גְזְ ˖ ؚؚ׏׋׵侧珏겲ך؝٦ر؍ؚٝ٥أة؎ָٕ⳿גֻ׷


    BOHVMBSKTTUZMFHVJEF<嗚稊> ˖ ׉׸׵ח׮䊴כ֮׷ָծⰟ鸐׃ג鶢ץגְ׷✲갪׮֮׷ךד
 ׉ך鴟䖞ֲץֹ ˖ ⦐➂涸חכ function(){funtion(){function(){... ָ
 㜔ִ׵׸זְךדծ〳腉זꣲ׶䎂׵ח剅ְגְ׷
 ׉ך倯ָꬊず劍窃׫ךذأزװ䊴׃剏ִ׮׃װְׅ
  84. 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 זו
  85. 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כֶׅׅ׭
  86. ذأز ˖ OPEFKT⩎כ׉ךתת.PDIB
 "OHVMBS+4⩎כ,BSNB 1IBOUPN+4 +BTNJOF ˖ "OHVMBS+4Ⱅ䒭דכذأز٥ؿٖ٦يٙ٦ؙח
 +BTNJOF׾⹻׭גְ׷ָ.PDIBָ⹛ַזְ׻ֽדכזְ ˖

    &&ذأز1SPUSBDUPSחꟼ׃גכ
 +BTNJOFח✲㹋♳ꣲ㹀ׁ׸׷ ˖ ،؟٦ءّٝכQPXFSBTTFSU
 ٌحؙذأزכ4JOPO+4ծ+BTNJOF4QZ׾⢘欽
 ➙䖓4JOPO+4⩎ח♧劤⻉׃״ֲה䙼׏גְ׷
  87. 㣐鋉垷⻉ך䝢׫ה鍑寸 ˖ 䎃דֽ׏ֲֿ花׵׿ד׃ת׏׋
 植㖈♰遤קו瑞遤ծ؝ًٝز׾ꤐֻ ˖ ذأزך㹋遤ָ鹼ַ׏׋׶ծמהאך%JSFDUJWFך嗚鏾ָ
 ꬗⦜חז׏גֹ׋׶ծرًٔحزָ湡甧׍㨣׭׋ ˖ 琎噰涸ח㢩鿇ٌآُ٦ٕ⻉ծ(JUךٔهآزٔ׮ⴓֽ
 㢌刿׾鷄ְװֻׅ׃ծذأزך顑⟣眔㔲׮ꣲ㹀׃׋

    ˖ ꬗⦜ז㢩鿇ٌآُ٦ٕ⻉חכ:FPNBO(FOFSBUPS׾荈⡲׃⼱荈⹛⻉ ˖ 穠卓ծ何葺ׅץֹ挿ծ倜堣腉ך㹋鄲ծغؚ涪欰皘䨽ָ
 ּׅⴓַ׷״ֲחז׶؎؎ֿהל׏ַ׶דׅ
 剑ⴱַ׵׉ֲׅץֹ׌׏׋
  88. ٌتٝAngularJS 9 ػح؛٦آ盖椚ծؽٕسخ٦ٕד ؝ٝػؙزז㹋鄲ח㼔䙀

  89. ⿫罋项俱٥鎸✲갫♶ず ˖ 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
  90. 闐鳤 5ZQF4DSJQUٔؿ؋ٖٝأ ׻ַ׭תׁמ׹衼 "OHVMBS+4ٔؿ؋ٖٝأ 寑幐僇㸩ծꆃ❁⨳♧ծし歊䗡欰Ⱏ衼 劤闌怴ח荚׷תדծׁתׂתז׀䭷㼪׾갥ְ׋׻ַ׭孑ծ寑幐孑ח
 䖴爝歍׃♳־׋ֻ闐鳤חִַׇׁגְ׋׌ֹתׅ

  91. ➙傈ך䗁统

  92. ٌتٝ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 9 ػح؛٦آ盖椚ծؽٕسخ٦ٕד ؝ٝػؙزז㹋鄲ח㼔䙀 ٌتٝAngularJS 6 'BDUPSZח״׷JOKFDU׾崞欽׃ג "OHVMBS+4"1*׾
 ⢪׻זְⳢ椚כ㢩פ
  93. ٌتٝAngularJS 10 ׉׸דכ Have a goodٌتٝAngularJS!

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