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 TECH TALK 2024/04/09
shinsuke_imai
1
210
クックパッドマート SORACOMを使って 高速プロトタイピング
shinsuke_imai
0
69k
クックパッドマート開発の裏側 ~ステーション編~
shinsuke_imai
0
1.5k
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
570
クックパッドマートを支える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
220
Data analysis of cookpad storeTV
shinsuke_imai
1
5.7k
Other Decks in Technology
See All in Technology
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
150
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
240
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
610
5min GuardDuty Extended Threat Detection EKS
takakuni
0
160
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
200
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
910
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
140
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
480
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
240
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
A designer walks into a library…
pauljervisheath
207
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
Scaling GitHub
holman
459
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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 དྷͯͶ