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
初めてのAngular 2
Search
imashin
March 05, 2016
Technology
6
6.3k
初めてのAngular 2
Frontend Conference 2016
5 Mar 2016
imashin
March 05, 2016
Tweet
Share
More Decks by imashin
See All by imashin
NOT A HOTEL - スマートホームの未来
shinsuke_imai
0
130
スマートホームのこれから - NOT A HOTEL TECH TALK 2024/04/09
shinsuke_imai
1
230
クックパッドマート SORACOMを使って 高速プロトタイピング
shinsuke_imai
0
69k
クックパッドマート開発の裏側 ~ステーション編~
shinsuke_imai
0
1.5k
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
580
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
1.2k
Reliable distribution system with Ruby x IoT
shinsuke_imai
0
730
クックパッド流食品流通の作り方
shinsuke_imai
0
280
Reliable label printer system
shinsuke_imai
0
230
Other Decks in Technology
See All in Technology
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
170
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
200
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
210
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
120
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
150
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
370
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
330
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
530
roppongirb_20250911
igaiga
0
190
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
1
200
Featured
See All Featured
Done Done
chrislema
185
16k
Docker and Python
trallard
45
3.6k
The Language of Interfaces
destraynor
161
25k
Being A Developer After 40
akosma
90
590k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for humans not robots
tammielis
253
25k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Faster Mobile Websites
deanohume
309
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Building a Scalable Design System with Sketch
lauravandoore
462
33k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
ॳΊͯͷAngular 2 FRONTEND CONFERENCE 2016 @shin_v1 #frontkansai 5 Mar 2016
Slide URL: http://hogehoge
@shin_v1 Shinsuke IMAI - ژେֶେֶӃ म࢜̍ - ’15 ະ౿ΫϦΤʔλ -
ब׆த - ng-kyotoϝϯόʔ About me
Today’s Mission
Angular 2 ͍͍Α
ࠓ͔Β͢Δ͜ͱ
৮ͬͯΈΔϋϯζΦϯ 15:20- Augular2 + TypeScriptͰຊ֨ΞϓϦ։ൃ Angular 2 ͍͍Α
MENU • Angular 2ͬͯͳΜͳΜʁ • Angular 2ͰΞϓϦ࡞ͬͯΔΑ • Angular 2Ͱͳʹ͕Ͱ͖ΔΜʁ
• Angular 2ͬͯͲ͏ͬͯษڧ͢Ε͍͍Μʁ
Angular 2ͬͯͳΜͳΜʁ
Framework Angular 2 is also supporting IE9+ and Android 4.1+
Server Browser Native
Powered by MIT License https://angular.io/ Angular 2 ެࣜαΠτ
Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ
Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ - ϑϩϯτͰνʔϜ։ൃ
Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ - ϑϩϯτͰνʔϜ։ൃ - jQuery͚ͩͰ͖͍ͭ
Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ - ϑϩϯτͰνʔϜ։ൃ - jQuery͚ͩͰ͖͍ͭ - ϑϨʔϜϫʔΫʹ͔ͬΓ͍ͨ
Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ - ϑϩϯτͰνʔϜ։ൃ - jQuery͚ͩͰ͖͍ͭ - ϑϨʔϜϫʔΫʹ͔ͬΓ͍ͨ
- ͜Ε֮͑͑͞Ε
Angular JS ͱ Angular 2 ͷൺֱ
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult
Angular JS Angular 2 2010- 2015- ‘2015 ઃܭ͕ݹ͘ͳ͖ͬͯͨ Ϟμϯͳઃܭ Change
Detection, Component … Dirty Check, Directive …
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult
Angular JS Angular 2 ver. 1.x ver. 2.x 1.5.0 2.0
beta8 2.xҠߦ͍͢͠ػೳ Betaʹಥೖˠ҆ఆ
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult TypeScript
• JavaScriptͷεʔύʔηοτ • JavaScriptʹͳ͍ػೳ(੩తܕ͚ɺσίϨʔλʔͱ͔) • Microsoft͕։ൃ • Angular։ൃνʔϜͱTypeScript։ൃνʔϜ͕ྑ͠ • Angular
2 ͷίʔυTypeScriptͰॻ͔Ε͍ͯΔ TypeScript
TypeScript class Greeter { greeting: string; constructor(message: string) { this.greeting
= message; } greet() { return "Hello, " + this.greeting; } } var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; }()); JavaScript greeter.ts greeter.js TypeScript ίϯύΠϧ TypeScriptͰॻ͍ͨίʔυΛJavaScriptίϯύΠϧ TypeScript: http://www.typescriptlang.org/
class Greeter { greeting: string; constructor(message: string) { this.greeting =
message; } greet() { return "Hello, " + this.greeting; } } var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; }()); greeter.ts greeter.js $ tsc greeter.ts
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult
https://github.com/angular/angular/issues/7088 https://plnkr.co/edit/ zpwiOiFsls3JgkuwtYmi?p=preview https://plnkr.co/edit/ cjFGtnI704bjSg6F0DEM?p=preview Is Angular 2 faster ?
Angular JS Angular 2
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult
Angular JS Angular 2 Easy Difficult ៉ྷʹॻ͚Δ ver 1.x࣌ͷল ཕ͕ͨ͘͞Μ
৭ʑͳඳ͖ํ େنʹͳΔͱେม େنʹ͑Δઃܭ
Angular 2ͰΞϓϦ࡞ͬͯΔΑ
Pomotune Angular 2 ͰΞϓϦΛ࡞͍ͬͯΔ
Pomotune x Pomodoro tech Music
Pomotune ʹ͋ͱ̍ϲ݄
Angular 2Ͱͳʹ͕Ͱ͖ΔΜ
ͨ͘͞Μͷػೳ Animation ngUpgrade Dependancy Injection Routing Testing HTTP Input Output
Zone.js Rxjs Forms Component ….. i18n
ػೳΛҰͭ Animation ngUpgrade Dependancy Injection Routing Testing HTTP Input Output
Zone.js Rxjs Forms Component ….. i18n
Component PomotuneΛྫʹ
Component PomotuneΛྫʹ
Component PomotuneΛྫʹ Navbar Component Playlist Component Timer Component Search Component
Search items Component Item Component Item Component Item Component Item Component Item Component
Item Component https://angular.io/docs/ts/latest/guide/architecture.html
import {Component, Input} from "angular2/core"; import {CORE_DIRECTIVES} from "angular2/common"; @Component({
selector: "track-component", templateUrl: “ ”, styleUrls: [“ ”], directives: [CORE_DIRECTIVES] }) export class TrackComponent{ @Input() track: any; link(){ window.open(this.track.permalink_url); } } <div> <img src="{{track.artwork_url}}" class="artwork"/> <div class="content"> <h1 (click)="link()">{{track.title}}</h1> </div> </div> Component Template Item Component [ۂͷใ]
import {Component, Input} from "angular2/core"; import {CORE_DIRECTIVES} from "angular2/common"; @Component({
selector: "track-component", templateUrl: “ ”, styleUrls: [“ ”], directives: [CORE_DIRECTIVES] }) export class TrackComponent{ @Input() track: any; link(){ window.open(this.track.permalink_url); } } <div> <img src="{{track.artwork_url}}" class="artwork"/> <div class="content"> <h1 (click)="link()">{{track.title}}</h1> </div> </div> Component Template Item Component (Click Event)
import {Component, Input} from "angular2/core"; import {CORE_DIRECTIVES} from "angular2/common"; @Component({
selector: "track-component", templateUrl: “ ”, styleUrls: [“ ”], directives: [CORE_DIRECTIVES] }) export class TrackComponent{ @Input() track: any; link(){ window.open(this.track.permalink_url); } } .artwork{ hoge: 0; } .content{ foo: 0; } Component CSS Item Component CSSͷΧϓηϧԽ
Angular 2ͬͯͲ͏ͬͯ ษڧ͢Ε͍͍Μʁ
։ൃڥ
or https://angular.io/resources/live- examples/quickstart/ts/plnkr.html Local Plunker Localڥ͑Δͷ গ͠໘ npm i anguar2ͯ͠Hello
World! ͢Δͱ͜Ζ·Ͱ PlunkerͳΒ͙͢ʹ Angular 2͕ॻ͚ΔΑ
ษڧૉࡐ
GoogleʹΛ·͔ͤΔਓ • ެࣜϖʔδ • Ұ௨Γ͔ͬ͠ΓษڧͰ͖Δ • ެࣜνϡʔτϦΞϧ: Tour of Heroes
https://angular.io/
ຊޠͰͬ͟ͱษڧ͍ͨ͠ਓ • Angular 2 Advent Calendar 2015(Qiita) • ίΞͳهࣄ͔Βɺڥߏஙͱ͍ͬͨಋೖهࣄ http://qiita.com/advent-calendar/2015/angular2
࠷৽ใΛ͔͚͍ͬͨਓ • Github • Angular2 Info • ຊޠใॆ࣮ • ւ֎ϒϩάߋ৽ͷ·ͱΊ
https://github.com/angular/angular http://ng2-info.github.io/
தͷਓͷهࣄΛಡΈ͍ͨਓ • THOUGHTRAM • ઃܭʹؔΘΔ͕Θ͔Γ͍͢ http://thoughtram.io/
·ͱΊ • Angular 2ศརͩΑ • ࠓ͔Βษڧ͢ΔͳΒAngular JS ΑΓ Angular 2
• ษڧ͢ΔʹެࣜνϡʔτϦΞϧ͕͓͢͢Ί • ͔͚ͬΔʹAngular2 Info͕͓͢͢Ί • ng-kyoto meetup #4 དྷͯͶ