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
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
Modern Linux
oracle4engineer
PRO
0
100
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
290
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
950
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
410
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
340
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
A better future with KSS
kneath
239
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Site-Speed That Sticks
csswizardry
10
820
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
A Modern Web Designer's Workflow
chriscoyier
696
190k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Invisible Side of Design
smashingmag
301
51k
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 དྷͯͶ