モダンAngularJS @ GDG中国2014.12.6

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

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

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

?AngularJS ׀㶷濼דׅ״י

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

׉ֲד׃׳ֲ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ꟛ涪橆㞮ך⢽

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

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

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

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

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

Ꟛ涪橆㞮ך⢽

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

ת׆%JSFDUJWF鋙ִגֻ׌ְׁ

%JSFDUJWFח״ֻ֮׷铎鍑

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

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

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

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

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

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

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

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

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

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

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

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

.PEFMה*OKFDU ˖ .7$ׅץג׾"OHVMBS+4דװ׹ֲהׅ׷ַ׵  ٗحؙ؎ָٝ孡חַַ׏גֻ׷ ˖ "OHVMBS+4כ׋׌⽃ח3&45 7JFX.PEFM 5FNQMBUF  ח暴⻉ ˖
.PEFMծؽآطأٗآحؙכ"OHVMBS+4"1*׾♧ⴖろתזְ  秪磏ז+4ה׃ג㹋鄲  ⟎ח"OHVMBS+4ָهءٍ׏ג׮➭'8ד⢪ְת׻ׇ׷״ֲח

.PEFMה*OKFDU ˖ ֿך秪磏ז+4ךٓ؎ـٓٔ׾"OHVMBS+4ד欽ְ׷㜥さ  'BDUPSZ穗歋ד鵤ׅ ˖ ؚٗ٦غٕ㢌侧ח縧ְג"OHVMBS+4ד⢪ֲֿה׮⳿勻׷ָ ٌحؙ⻉דֹזְךדذأزך♳ד㉏겗ָ饯ֿ׷ ˖ "OHVMBS+4ךِصحزذأزכ䮶׷莸ְך嗚鏾ח殅׭גծ  &&ذأزח״׷㣐ֹז笨הծؽآطأٗآحؙך稢ַז
ِصحزذأزד⥂א angular.module('myModule') .factory('MyBusinessLogic', function() { return MyBusinessLogic; // ΠϯελϯεͰ͸ͳ͘ίϯετϥΫλࣗମΛฦ͢ });

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

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

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

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

Ⰻ鿇鋙ִ׷䗳銲כזְ

Ꟛ涪橆㞮ך⢽

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

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

˖ ⦐➂涸חכֿ׏׍ך剅ֹ倯ךקֲָ㥨ֹ ! ! ! ˖ .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>

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

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

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

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

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

Ꟛ涪橆㞮ך⢽

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

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

ⴱ㔐כ  HFOFSBUPSBOHVMBSGVMMTUBDL

植㖈ךر؍ؙٖزٔ 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 㶵ָ㼭ֻׁגְׅתׇ׿

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

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

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 זו

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כֶׅׅ׭

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

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

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

⿫罋项俱٥鎸✲갫♶ず ˖ 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

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

➙傈ך䗁统

ٌتٝ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*׾  ⢪׻זְⳢ椚כ㢩פ

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

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

モダンAngularJS @ GDG中国2014.12.6

モダンAngularJS @ GDG中国2014.12.6

More Decks by OKUNOKENTARO

Other Decks in Programming

Featured

Transcript