Download as PDF, PPTX
![U4DSJQUג⡦
˖ ךח5ZQF4DSJQU.JDSPTPGU爡
ֿכ涸㘗➰ֽ圓俑⪒ִծ؝ٝػ؎ٓח״ג
㢌䳔儗חؒٓ٦ثؑحؙ׃+BWB4DSJQU欰䧭ׅ鎉铂
˖ ֿך5ZQF4DSJQUׁח䭁䓸׃
OHVMBSث٦يָ䲿周ׅ圓俑刹ֻ倜鎉铂דכזְ
˖ U4DSJQUדכ㘗➰ֽח⸇ִגծ
ًةر٦ة鎸鶢ծ،ظذ٦ءّٝך圓俑酡䓼
@Directive({
selector: '[blink]'
})
class Blink {
constructor(elment: Element, options: Options, timeout: Timeout) {
// ...
}
}](https://image.slidesharecdn.com/141206okayamaslideshare-141206081542-conversion-gate01/85/AngularJS-GDG-2014-12-6-25-320.jpg)
![1. minify対策
˖ %*،ظذ٦ءّٝכ䗳׆剅ֹת׃׳ֲ
ׁזֻלNJOJGZ儗ח岛ֹתׅ
˖ %*،ظذ٦ءّٝהכծ؎ٝأةٝأ欰䧭儗ח
؎ٝآؙؑزׅ4FSWJDF寸㹀ׅך䞔㜠
˖ 䒷侧俑㶵דػ٦أ׃ג铣ד׃ְ˘
ה㢌䡾㹋鄲ָ鑧겗חזת׃ָծ㣐㢌״׃ֻזְדׅ
angular.module('myModule')
.service('MyService', function(OtherService) {
// ... ↑ここに無い!!
});
!
angular.module('myModule')
.service('MyService', ['OtherService', function(OtherService) {
// ...
}]);
罠](https://image.slidesharecdn.com/141206okayamaslideshare-141206081542-conversion-gate01/85/AngularJS-GDG-2014-12-6-74-320.jpg)
![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](https://image.slidesharecdn.com/141206okayamaslideshare-141206081542-conversion-gate01/85/AngularJS-GDG-2014-12-6-75-320.jpg)
Uploaded byOkuno Kentaro
モダンAngularJS @ GDG中国2014.12.6
AngularJS is a JavaScript framework that allows developers to create dynamic web applications. It uses HTML as the template language and extends HTML attributes with directives. AngularJS applications are composed of modules, controllers, services and filters that allow creating single page applications with two-way data binding between models and views.
![[Devsumi2017]オルタナティブなチーム開発のすゝめ](https://cdn.slidesharecdn.com/ss_thumbnails/devsumi2016-170217062111-thumbnail.jpg?width=640&height=640&fit=bounds)
モダンAngularJS @ GDG中国2014.12.6
- 1.
- 2. 荈䊹稱➜ ˖ 㤴ꅿ颩㣕龤0LVOP,FOUBSP ˖ ❨鿪䋐ַ勻ת׃
- 3. 鹈أزحؙ侧501חג OHVMBS+4،ٝثػة٦ٝ꧊ָ ⡘ְֹת׃ http://qiita.com/armorik83/items/b00818ecaf2e93734b36
- 4.
- 5.
- 6.
- 7. ְֶׁOHVMBS+4הכ ˖ +BWB4DSJQUؿٖ٦يٙ٦ؙ (PPHMFָ涪Ⱅ䒭חכ.788IBUFWFSה׃גְ ˖ )5.-ك٦أךذٝفٖ٦ز ˖ 剅ֹװְׅر٦ة٥غ؎ٝر؍ؚٝ ˖ ٕ٦ذ؍ؚٝ堣圓 41ח剑黝 ˖ KBY؟ه٦ز 3451*ך؟٦غ،فٔ؛٦ءّٝה湱䚍ָ葺ְ
- 8.
- 9. չדOHVMBS+4ג㱾ְպ ִ㱾גך ׄׯ֮姺גֲֶַֿ˘
- 10.
- 11. 1*ָמוְ 鋙ִֿה㢳ֺׅ 㼪Ⰵ؝أز넝ְ זֿהכזְ
- 12. 植屣濼ֲ ˖ הכְִծ䩛佝׃דكة釈דֹֽדכזְ ˖ דכוזؿٖ٦يٙ٦ؙ♧筰 ˖ OHVMBS+4ך植屣椚鍑׃ծ涸然חⵃ欽ׅ ˖ OHVMBSث٦يך湡䭷ׅ倯ぢ䚍濼 䖓ղ⦜חזזְחכ
- 13. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ禸פ ⡦חぢְגְךַ 鋙ִקֲָ״ְךծ鋙ִזֻג״ְך 縐 涪橆㞮ך⢽
- 14. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ禸פ ⡦חぢְגְךַ 鋙ִקֲָ״ְךծ鋙ִזֻג״ְך 縐 涪橆㞮ך⢽
- 15.
- 16. K2VFSZٔٔ٦أ OHVMBS+4 OHVMBS+4 YYOHVMBS הכְִծٔٔ٦أ儗劍כ劢㹀 ֶֶ״ך儗劍ׅ僇鎉ׁגְתׇ
- 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.
- 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.
- 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חDPOUSPMMFS1*ָ֮תׅ ˖ %JSFDUJWF⡲גծ%JSFDUJWF$POUSPMMFSהׅ ˖ OHDPOUSPMMFSהdivח♧⦐䭷㹀׃ג 䖓כؤٓؤٓⳢ椚剅ָֹ ˖ ֿךٕ٦ٕחֿׅהד⦐ղך%JSFDUJWF넝Ⳕ꧊פ .77.ך罋ִ倯 ˖ OH3PVUFٕ٦ذ؍ؚٝדDPOUSPMMFS䭷㹀כ׃זְ ̔7JFXֽ䭷㹀׃ծך7JFXח%JSFDUJWFֽ縧ֻ
- 32. ٌتٝAngularJS 2 OHDPOUSPMMFS⢪׆ %JSFDUJWFDPOUSPMMFS欽ְ
- 33. $TDPQF搀ֻזׯֲ ˖搀ֻז״ֲדׅ ˖ 植㖈חְֶגDPOUSPMMFST圓俑ָ 钠濼ׁגַ⳿殢ָ慧幾 ˖ $TDPQFך1*XBUDIװCSPBEDBTU POכ➙ד⢪ֲ
- 34. 鋅馉׃$TDPQF ˖ 植㖈㹋鄲⚥תכ珩⫴⚥ךءأذيחOHDPOUSPMMFSָ ֮ג$scope⢪גתׅהְֲ倯 ˖ 獳遤ָ㣐㢌ֲזծת׆כDPOUSPMMFST圓俑ך䱰欽פ 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 ˟䎃剢植㖈ך䞔㜠
- 40. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ禸פ ⡦חぢְגְךַ 鋙ִקֲָ״ְךծ鋙ִזֻג״ְך 縐 涪橆㞮ך⢽
- 41. 猘荈魦ך؛٦أ ˖ 荈ⴓָוך״ֲחOHVMBS+4⢪גְַ ˖ 噟ءأذي
- 42. 噟خ٦ٕծ،ؙإ؟ٔך㹋鄲 ˖ 㼛勻涸חֿך䪮遭ך♧鿇♧菙Ⱅֿׅה 湡锷㛇湍⡲ ֿז䠬ׄד⡲גתׅ
- 43. ⦐➂涸ז䠬䟝דכ֮תָׅ ˖ 涪כ鸞ְדׅ ˖ ر٦ة٥غ؎ٝر؍ؚٝワָ侭גְךד ؛٦أךفٗزة؎فָּׅ⳿勻 ּׅ⹛ֻךדٌثك٦ءّٝכ笝䭯׃װְׅ ˖ 3451*ה鋵ㄤ䚍ָ넝ְךד傀㶷ךءأذيַ 獳遤׃װְׅכ׆ 猘כ$BLF1)1ַOPEFKTח獳遤׃
- 44. 41דծ♧皘䨽ֽד ˖ %JSFDUJWFזג⢪זְծIUNMⰻח湫䱸縧ְג ؿؓ٦يךغٔر٦ءّٝה׃גֽ⢪ְְ ְְ̔ה䙼ְתׅ ˖ ٕ٦ذ؍ؚٝⰋגOHVMBS+4 ؿٕח堣腉⢪ג4JOHMF1BHFQQMJDBUJPO涪ׅ ׅ̔ל׃ְ ˖ OHVMBS+4ך䖤䠐הׅر٦ة٥غ؎ٝر؍ؚٝծ 345GVMծٕ٦ذ؍ؚٝהְⴓꅿַ⡦ָ⢪ִַ 鋅噰
- 45. ذأز׃װְׅ ˖ 41涪דכ%JSFDUJWF4FSWJDFוו㟓ִתׅ ˖ OHVMBSث٦يכذأزך׃װׁׅח ꅾ挿縧ְגְ ˖ %*ك٦أךٌآُ٦ٕ鸬䵿הծٌحؙ岣Ⰵ ˖ ذأزٓٝش٦,BSNB ˖ ذأز1SPUSBDUPS ذأز剅ְגזְהֶַ˘
- 46. ٌتٝAngularJS 4 ,BSNB 1SPUSBDUPSד ذأز䫙ַזֻ
- 47. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ禸פ ⡦חぢְגְךַ 鋙ִקֲָ״ְךծ鋙ִזֻג״ְך 縐 涪橆㞮ך⢽
- 48.
- 49.
- 50.
- 51.
- 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*铣ד䗳銲ה䠬ֿׄהָזְ ˖ NVMUJMFNFOU䗳銲חזֿהָזְ ➭ךٌآُ٦ٕ錁㻊׃ג鋅ַֽֿהָזְ ˖ QSJPSJUZ⮚⯓䏝孡חׅ䗳銲ך֮Ⰵ㶨כٔأؙ QSJPSJUZ⢪׆SFRVJSF⢪ֲ ˖ MJOLDPNQJMFך䨱⦼ַꟼ侧鵤ׇל״ְ ˟⦐➂ך䠬䟝דׅ
- 57. UFNQMBUF ˖ 䌢חUFNQMBUF6SM⢪גְ ˖ ֮ת+4ا٦أⰻח俑㶵ה׃גꞿְ)5.- 剅ֹֻזְ ˖ ׃ծ㼭ׁזػ٦خ遤ד幥״ֲזכDPNQJMFⰻח $templateCache.put()⢪ג剅ֻֿהָ㢳ְ
- 58. ٌتٝAngularJS 5 OHVMBSח⪒ִז %JSFDUJWF琎噰涸ח荈⡲
- 59.
- 60.
- 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כ⽃ח345
- 64.
- 65. 5FNQMBUF ח暴⻉ ˖.PEFMծؽآطأٗآحؙכOHVMBS+41*♧ⴖろתזְ 秪磏ז+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+41* ⢪זְⳢ椚כ㢩פ
- 69. 4FSWJDFכOHVMBS+4ⰻח暴⻉ ˖ ♧倯ד4FSWJDFכOHVMBS+41*ך琎噰涸זⵃ欽ח暴⻉ ˖ $resource, $routeParams, $locationכ穗꿀♳ ؝٦سךꅾ醱ָ欰תװְׅ ˖ $PSF1*ٓحف׃ծ荈ⴓ٥荈ث٦يָ⢪ְװְׅ 4FSWJDF欽䠐׃גⳢ椚♧⯋⻉ ˖ %JSFDUJWFDPOUSPMMFSכֻ֮תד醱侧ך4FSWJDFךⳢ椚ה 7JFX WFOU穠ןאֽ؎ٝةؿؑ٦أח䗡ׅ
- 70. ٌتٝAngularJS 7 $PSF1*⢪ְװֻׅٓحف 荈⡲4FSWJDFד Ⳣ椚ךꅾ醱鼘ֽ
- 71.
- 72. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ禸פ ⡦חぢְגְךַ 鋙ִקֲָ״ְךծ鋙ִזֻג״ְך 縐 涪橆㞮ך⢽
- 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הַؠٓ ˖ אַתדכ嗚鏾ָ㣐㢌 罠 ˖ ⯓傈剢傈Ⱅ׃2JJUBEWFOU$BMFOEBSך䬴鎸✲ חגծֿךװװֿ׃ְⳢ椚갫Ⰻגתהגְתׅ מ׀罋ח
- 80. ٌتٝAngularJS 8 عوוֿכ⯓➂ָعوג 縐䛊׆鹌
- 81. ،ؐزٓ؎ٝ OHVMBS+4Y禸ַ禸פ ⡦חぢְגְךַ 鋙ִקֲָ״ְךծ鋙ִזֻג״ְך 縐 涪橆㞮ך⢽
- 82. 剑䖓ח猘⦐➂ך 涪橆㞮ך⢽稱➜׃ג 箍ֻֻתׅ ע꽀ֽ駈
- 83. 圓䧭 4FSWFS OPEFKT .POHP%#YQSFTT OHVMBS+4 JOKFDU -PDBM.PEVMFT 6UJMJUJFT .PEFM 3451*
- 84.
- 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.
- 92. +BTNJOF ˖ OHVMBS+4Ⱅ䒭דכذأز٥ؿٖ٦يٙ٦ؙח +BTNJOFגְָ.PDIBָ⹛ַזְֽדכזְ ˖ ذأز1SPUSBDUPSחꟼ׃גכ +BTNJOFח✲㹋♳ꣲ㹀ׁ ˖ ،؟٦ءّٝכQPXFSBTTFSU ٌحؙذأزכ4JOPO+4ծ+BTNJOF4QZ⢘欽 ➙䖓4JOPO+4⩎ח♧劤⻉׃״ֲה䙼גְ
- 93. 㣐鋉垷⻉ך䝢ה鍑寸 ˖ 䎃דֲֽֿ花ד׃ת 植㖈♰遤קו瑞遤ծ؝ًٝزꤐֻ ˖ ذأزך㹋遤ָ鹼ַծמהאך%JSFDUJWFך嗚鏾ָ ⦜חזגֹծرًٔحزָ湡甧㨣 ˖ 琎噰涸ח㢩鿇ٌآُ٦ٕ⻉ծ(JUךٔهآزٔⴓֽ 㢌刿鷄ְװֻׅ׃ծذأزך顑⟣眔㔲ꣲ㹀׃ ˖ ⦜ז㢩鿇ٌآُ٦ٕ⻉חכ:FPNBO(FOFSBUPS荈⡲׃⼱荈⹛⻉ ˖ 穠卓ծ何葺ׅץֹ挿ծ倜堣腉ך㹋鄲ծغؚ涪欰皘䨽ָ ּׅⴓַ״ֲחז؎؎ֿהלַדׅ 剑ⴱֲַׅץֹ
- 94. ٌتٝAngularJS 9 ػح؛٦آ盖椚ծؽٕسخ٦ٕד ؝ٝػؙزז㹋鄲ח㼔䙀