Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular2とMVVM
Search
laco
April 20, 2016
Programming
5
5.6k
Angular2とMVVM
4/20 2016 ng-sake#2
laco
April 20, 2016
Tweet
Share
More Decks by laco
See All by laco
Pub使ってますか?
laco0416
1
1.6k
ASP.NetでAPIを作ってみた
laco0416
0
500
OSC_F_2013 LT
laco0416
0
130
Other Decks in Programming
See All in Programming
WebDriver BiDiとは何なのか
yotahada3
1
140
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
110
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
560
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
100
GoとPHPのインターフェイスの違い
shimabox
2
190
sappoRo.R #12 初心者セッション
kosugitti
0
250
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
120
SpringBoot3.4の構造化ログ #kanjava
irof
2
990
Formの複雑さに立ち向かう
bmthd
1
850
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
GraphQLとの向き合い方2022年版
quramy
44
13k
Statistics for Hackers
jakevdp
797
220k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Navigating Team Friction
lara
183
15k
Typedesign – Prime Four
hannesfritz
40
2.5k
RailsConf 2023
tenderlove
29
1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A Philosophy of Restraint
colly
203
16k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Transcript
Angular 2 ͱMVVM ng-sake #2 @laco0416
MVVMͱʁ
MVVMͱ͍͏ߟ͑ํ • GUIΞϓϦͷΞʔΩςΫνϟͷ1ͭ • ݯྲྀXAML • WPF/Silverlight/WindowsετΞΞϓϦ
XAML • Extensible Application Markup Language • ΞϓϦέʔγϣϯΛϚʔΫΞοϓ͢Δݴޠ • .NetݴޠʹมՄೳ
• ੑ • ڧྗͳσʔλόΠϯσΟϯάػߏ
7JFX 7JFX.PEFM .PEFM Data-Binding Α͋͘ΔMVVMͷਤ Call Event Presentation Business
Model/View/ViewModel • ViewModelͱModelͷڥքΛͲ͜ʹஔ͘ʁ • Model͕ᐆດͩͱViewModelᐆດʹͳΔ • ͍͍ͩͨڮ͢͠Δ͚ͩͳΒMVCͩͬͯͦ͏ͩ͠MVP ͩͬͯͦ͏͡ΌΜ • ViewModelͷΛ͖ͬΓͤ͞ͳ͍ͱ
MVVM࡞Εͳ͍
ViewModel ͷ • ViewϓϥοτϑΥʔϜʹґଘ͢Δ • ModelϓϥοτϑΥʔϜʹґଘ͠ͳ͍ • ModelΛ֤ϓϥοτϑΥʔϜͰදࣔ͢ΔͨΊͷ Ξμϓλʔ =
ViewModel
Angular 2 Component
7JFX 7JFX.PEFM .PEFM Data-Binding MVVMͷਤ(࠶) Call Event Presentation Business
5FNQMBUF $PNQPOFOU 4FSWJDF Data-Binding Angular 2ʹஔ͖͑Δ Call Event Presentation Business
ຊʹʁ
5FNQMBUF $PNQPOFOU Data-Binding Angular 2ͬͯ͜͏͡ΌΜ Event Presentation Business
%0. 5FNQMBUF $PNQPOFOU ͬͱ͍͑ Presentation Business Data-Binding Rendering Event ϓϥοτϑΥʔϜґଘ
ComponentVMͰͳ͍ • Model+Controller͕Ұ൪͍ۙ • ΞϓϦέʔγϣϯͱ͍͏Ϟσϧͷϊʔυ • ComponentΛDOMʹӨ͢ΔTemplate͕Ұ൪VMʹ͍ۙ
MVVMMVW for XAML • XAMLͰViewσʔλόΠϯσΟϯά͋Γ͖ • View͕σʔλΛࢀর͢Δઌ͕ඞཁ • ViewʹϩοΫΠϯ͞ΕͨσʔλϞσϧ͕ඞཁ •
͔ͩΒViewModel͕ඞཁͩͬͨ • ͦͦHTML/JSͷؔͱҧ͏
݁ • MVVMAngularͰࢦ͢ͷ͡Όͳ͍ • ComponentModel+Controllerͱߟ͑Δ • ViewσʔλΛఏڙ͢Δ • View͔ΒΠϕϯτΛड͚औΔ •
Componentಉ࢜ࢠؔΛऔΔ(ґଘ͕ؔ͋Δ) • ϓϥοτϑΥʔϜΛҙࣝ͠ͳ͍
ࢀߟ • GUIΞʔΩςΫνϟύλʔϯͷجૅ͔ΒMVVM ύλʔϯ • MVVMͷModelʹ·ͭΘΔޡղ