Tweet
Tweet

Slide 1

Slide 1 text

΢ΣϒΤϯδχΞͷͨΊͷ "OHVMBS+4ೖ໳ ΞγΞϧגࣜձࣾٱอాޫଇ 1)1ΧϯϑΝϨϯε ࠷৽41"։ൃΛֶ΅͏ʂ

Slide 2

Slide 2 text

ࣗݾ঺հ ‣ ٱอాޫଇ ‣ ΞγΞϧגࣜձࣾॴଐ ‣ BLBJEBOBUPP ‣ 6*69σβΠφʔ݉
 ιϑτ΢ΣΞΤϯδχΞ ‣ )5.-&YQFSUKQΤΩεύʔτ

Slide 3

Slide 3 text

޷ධൃചத

Slide 4

Slide 4 text

ΞγΞϧגࣜձࣾ ‣ )5.-ϞόΠϧΞϓϦ։ൃ ϓϥοτϑΥʔϜग़ͯ͠·͢ ‣ IUUQNPOBDBNPCJ ‣ IUUQPOTFOJP

Slide 5

Slide 5 text

ࠓ೔࿩͢͜ͱ ‣ 41"ͬͯԿ ‣ "OHVMBS+4ͷ঺հ ‣ σʔλόΠϯσΟϯά ‣ %*ίϯςφ ‣ σΟϨΫςΟϒ

Slide 6

Slide 6 text

41"ͱ͸

Slide 7

Slide 7 text

41"ͱ͸ ‣ 4JOHMF1BHF"QQMJDBUJPOͷུ ‣ ̍ͭͷϖʔδͰΞϓϦ͕׬݁͢Δ ‣ ۙ೥։ൃ͕૿Ճ

Slide 8

Slide 8 text

l41"JTBXFCBQQMJDBUJPOUIBUpUTPOB TJOHMFXFCQBHFXJUIUIFHPBMPG QSPWJEJOHBNPSFqVJEVTFSFYQFSJFODFz IUUQFOXJLJQFEJBPSHXJLJ4JOHMFQBHF@BQQMJDBUJPOΑΓൈਮ

Slide 9

Slide 9 text

ʮ41"ͱ͸ɺΑΓྲྀಈతͳ69Λఏڙ͢Δ͜ ͱΛ໨తͱͨ͠ɺҰͭͷ΢Σϒϖʔδʹೲ· Δ΢ΣϒΞϓϦέʔγϣϯͰ͋Δɻʯ

Slide 10

Slide 10 text

ैདྷͷ΢ΣϒΞϓϦ ‣ ෳ਺ϖʔδͰఏڙ͞ΕΔ .VMUJ1BHF"QQMJDBUJPO ‣ 63-ͷભҠ͕ඞਢ

Slide 11

Slide 11 text

‣ 63-ભҠ͸69తʹ͸அઈɻ ωοτϫʔΫܦ༝ͰͷϦιʔεͷಡΈࠐΈ )5.- $44 +BWB4DSJQUͷύʔε %0.πϦʔɺ$440.ͷߏங ϨϯμʔπϦʔͷߏஙͱඳը +BWB4DSJQUͷ࣮ߦ

Slide 12

Slide 12 text

41"Ͱग़དྷΔྲྀಈతͳ69 ‣ %0.ૢ࡞Ͱը໘ભҠ ‣ 63-ભҠ͸جຊ͠ͳ͍ ‣ αʔόͱͷ΍ΓͱΓ͸BKBY΍XFCTPDLFUͰ

Slide 13

Slide 13 text

ͳͥ41"։ൃ͕૿͍͑ͯΔ ‣ σεΫτοϓΞϓϦͷ69Λ΢Σϒ΁ ‣ 3*" 3JDI*OUFSOFU"QQMJDBUJPO ͷड͚ࡼ ‣ جૅٕज़ͷཱ֬

Slide 14

Slide 14 text

σεΫτοϓΞϓϦͷ
 69Λ΢Σϒ΁ ‣ ैདྷ͔Β͋Δཁٻ ‣ 41"Ͱ͸ɺ63-ભҠʹΑΔ଴͕ͪ࣌ؒແ͍

Slide 15

Slide 15 text

ྫJDMPVEDPNͷ/VNCFST ‣ ΋͸΍σεΫτοϓΞϓϦͱ΄ͱΜͲಉ͡

Slide 16

Slide 16 text

3*"ϓϥοτϑΥʔϜͷड͚ࡼ ‣ )5.-ͷ41"ʹྲྀΕ͖ͯͨ

Slide 17

Slide 17 text

جૅٕज़ͷཱ֬ ‣ ϒϥ΢βͷؔ࿈"1*ͷ੔උ ‣ QVTI4UBUFͳͲ)JTUPSZ"1* ‣ +4ϥΠϒϥϦɾϑϨʔϜϫʔΫͷීٴ ‣ ϧʔςΟϯάɺσʔλόΠϯσΟϯά౳ ‣ ϊ΢ϋ΢ͷ஝ੵ ‣ +BWB4DSJQU࣮ߦͷߴ଎Խ ‣ +*5ίϯύΠϧɺϗοτεϙοτɺίϯύΠϧ࠷ద Խ

Slide 18

Slide 18 text

ར༻͞ΕΔϑϨʔϜϫʔΫ ‣ ͦͷଞଟ਺ɻɻɻ ‣ 41"։ൃͰ࢖͑ΔϑϨʔϜϫʔΫ͸ແ਺ʹ͋Δ

Slide 19

Slide 19 text

IUUQTBOHVMBSKTPSH

Slide 20

Slide 20 text

"OHVMBS+4ͷಛ௃ ‣ )5.-Λ֦ுͯ͠ΞϓϦΛهड़ ‣ 41"։ൃʹదͨ͠ػೳηοτ

Slide 21

Slide 21 text

)5.-FOIBODFEGPSXFCBQQ ‣ ΧελϜͷଐੑɺΧελϜͷཁૉΛ࢖ͬͯهड़͠ ͍ͯ͘

{{title}}

Slide 22

Slide 22 text

41"։ൃʹదͨ͠ػೳηοτ ϧʔςΟϯά σʔλ όΠϯσΟϯά %*ίϯςφ σΟϨΫςΟϒ

Slide 23

Slide 23 text

ϧʔςΟϯά

Slide 24

Slide 24 text

ϧʔςΟϯά ‣ 63-ͷIBTI΍)JTUPSZ"1*ͰɺϏϡʔΛ੾Γସ͑ ‣ 63-ભҠΛ൐Θͳͣɺը໘ͷҰ෦͕ભҠ NBJO TFUUJOHT PUIFS

Slide 25

Slide 25 text

)5.-ଆ ‣ OHWJFXଐੑͰɺϧʔςΟϯάର৅Λࢦఆ …

..

Slide 26

Slide 26 text

+BWB4DSJQUଆ ‣ SPVUF1SPWJEFSܦ༝Ͱઃఆ var module = angular.module('app', [‘ngRoute']); module.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', }) .when('/settings', { templateUrl: 'views/settings.html', }) .otherwise({ redirectTo: '/' }); });

Slide 27

Slide 27 text

ϧʔςΟϯά͸ͳͥඞཁ ‣ ແͯ͘΋ྑ͍ ‣ ը໘ͷಛఆͷঢ়ଶʹ֎෦͔ΒϦϯΫΛுΕΔ ‣ ΢ΣϒϖʔδͰͰ͖Δ͜ͱΛ41"Ͱ΋Մೳʹ

Slide 28

Slide 28 text

σʔλόΠϯσΟϯά

Slide 29

Slide 29 text

σʔλόΠϯσΟϯά ‣ "OHVMBS+4ͷ7JFXΛ࢘Δத֩ػೳ ‣ ΦϒδΣΫτͱ%0.Λ૬ޓʹ൓өͤ͞Δ ‣ ยํ͕ߋ৽͞ΕͨΒ΋͏ยํ΁ +4ΦϒδΣΫτ %0.

Slide 30

Slide 30 text

%0.ͱΦϒδΣΫτΛ݁ͼ͚ͭΔ %0.πϦʔ +BWB4DSJQUଆ ) ) %*7 '005&3 #0%: 4&$5*0/ TDPQF TDPQF \ʜ^ \ʜ^

Slide 31

Slide 31 text

ίϯτϩʔϥͰείʔϓΛ࡞Δ
{{message}}
module.controller(‘MyCtrl’, function($scope) { $scope.message = ‘HelloWorld’; }); +BWB4DSJQU )5.- ‣ ςϯϓϨʔτΤϯδϯɺͰ͸ͳ͍

Slide 32

Slide 32 text

+4ͷ஋͕ࣗಈతʹ%0.΁ ‣ είʔϓΛߋ৽͢ΔͱɺͦΕ͕%0.ʹࣗಈతʹ൓ө
{{message}}
$scope.message = ‘Hi guys’; +BWB4DSJQU )5.-
Hi guys
࣮ࡍͷ%0.

Slide 33

Slide 33 text

%0.ͷมߋ͕ࣗಈతʹ+4΁ ‣ ςΩετཝʹೖྗ͢Δͱࣗಈతʹείʔϓʹ൓ө console.log($scope.message); +BWB4DSJQU )5.- ςΩετཝʹೖྗ

Slide 34

Slide 34 text

σʔλόΠϯσΟϯάͷ༝དྷ ‣ ݩʑ͸σεΫτοϓ(6*Ͱ࢖ΘΕ͍ٕͯͨज़ ‣ $PDPB#JOEJOH.BD049 ‣ 81' 4JMWFSMJHIU8JOEPXT ! ‣ ࠓͰ͸Ϟμϯ+4ϑϨʔϜϫʔΫͰ͸΄΅ඞਢͷػ ೳʹ ‣ ,OPDLPVUKT #BUNBOKT "OHVMBSKT 7VFKT

Slide 35

Slide 35 text

K2VFSZతखଓ͖ॲཧ͔Βͷ୤٫ ‣ +4ͷίʔυ͕%0.πϦʔʹґଘ ‣ ن໛͕େ͖͘ͳΔͱϝϯς͕
 ೉͍͠ίʔυ͕Ͱ͖΍͍͢ ‣ 41"։ൃʹ͸͋·Γ޲͍͍ͯͳ͍ º

Slide 36

Slide 36 text

%*ίϯςφ

Slide 37

Slide 37 text

%*ύλʔϯ ‣ ґଘΛ֎͔Β౉ͯ͠΋Β͏ઃܭύλʔϯ ‣ γεςϜʹॊೈੑΛ༩͑Δ var MyClass = function() { this.logger = new MyLogger(); }; var MyClass = function(logger) { this.logger = logger; };

Slide 38

Slide 38 text

%*ίϯςφ ‣ %*ύλʔϯͰهड़ͨ͠ґଘΛ஫ೖͯ͘͠ΕΔίϯςφ ‣ ؀ڥʹΑͬͯγεςϜͷߏ੒Λม͑ΒΕΔ var MyClass = function(logger) { this.logger = logger; }; ͜͜ʹ͍͍ײ͡ͷ
 ΦϒδΣΫτΛ஫ೖ

Slide 39

Slide 39 text

"OHVMBS+4ͷ%*ίϯςφ ‣ ಗ໊ؔ਺ͷԾҾ਺Ͱࢦఆͨ͠ΦϒδΣΫτΛࣗಈ తʹ஫ೖͯ͘͠ΕΔ var module = angular.module(‘app’, []); ! module.factory('Hoge', function() { return new Hoge(); }); module.factory('MyClass', function(Hoge) { ... return MyClass; });

Slide 40

Slide 40 text

ίϯτϩʔϥ͔Βͷར༻ ‣ GBDUPSZ ϝιουͰએݴͨ͠ΦϒδΣΫτ͸ίϯτϩʔϥɾσΟϨ ΫςΟϒͳͲ͔Βͦͷ··ར༻Մೳ module.factory(‘Hoge’, function() { return { … }; }); ! module.controller(‘MyCtrl’, function($scope, Hoge) { $scope.hoge = new Hoge(); } );

Slide 41

Slide 41 text

σΟϨΫςΟϒ

Slide 42

Slide 42 text

σΟϨΫςΟϒ ‣ )5.-Λ֦ு͢Δଐੑ΍ཁૉ͸
 શͯσΟϨΫςΟϒͱͯ͠࡞੒͞Ε͍ͯΔ ‣ "OHVMBS+4ͷج൫ٕज़

Slide 43

Slide 43 text

)5.-Λ֦ு͢Δଐੑ΍ཁૉ͸
 શͯσΟϨΫςΟϒͱͯ͠࡞੒͞Ε͍ͯΔ ‣ ಠࣗཁૉɺಠࣗଐੑ౳Λ࡞ΔͨΊͷج൫ ...

Slide 44

Slide 44 text

HTML Contents
σΟϨΫςΟϒͷ࢓૊Έ ‣ ॳظԽ࣌ʹ%0.πϦʔͷཁૉ΍ଐੑΛશͯḷͬͯߦ͖ɺ
 ରԠ͢ΔσΟϨΫςΟϒ͕ଘࡏ͢Ε͹ͦͷॳظԽ"1*Λݺͼग़͢ OH$POUSPMMFSىಈ OH4IPXىಈ OH#JOEىಈ NZ&MFNFOUىಈ

Slide 45

Slide 45 text

એݴͯ͠ΈΔ ‣ IPHFཁૉʹରԠͯ͠ಈ࡞͢ΔσΟϨΫςΟϒΛએݴ var module = angular.module('app'); ! module.directive(‘hoge’, function() { return { restrict: ‘E’, link: function(scope, element, attrs) { // σΟϨΫςΟϒͷॳظԽॲཧΛॻ͘ element.css({color: ‘red’}); } }; });

Slide 46

Slide 46 text

࣮ࡍʹλάͱͯ͠࢖͑Δ ‣ "OHVMBS+4ΞϓϦ಺Ͱͦͷ··λάͱͯ͠࢖͑Δ … Red Color Message

Slide 47

Slide 47 text

IUUQPOTFOJP 0OTFO6*Ͱͷར༻ྫ ‣ λάΛॻ͚ͩ͘ͰεϚϗ༻6*͕࡞ΕΔ

Slide 48

Slide 48 text

·ͱΊ

Slide 49

Slide 49 text

·ͱΊ ‣ ͜͜਺೥41"։ൃ͕૿͍͑ͯΔ ‣ ΑΓࣗવͰ༏Εͨ69ΛఏڙͰ͖Δ ‣ 41"։ൃͰ͸"OHVMBS+4͕Α͘ར༻͞Ε͍ͯΔ ‣ 41"ͷͨΊͷػೳηοτ͕ἧ͍ͬͯΔ ‣ ϧʔςΟϯάɺσʔλόΠϯσΟϯάɺ
 %*ίϯςφɺσΟϨΫςΟϒ

Slide 50

Slide 50 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠