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.2k
初めての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
160
クックパッドマート SORACOMを使って 高速プロトタイピング
shinsuke_imai
0
68k
クックパッドマート開発の裏側 ~ステーション編~
shinsuke_imai
0
1.4k
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
540
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
1.2k
Reliable distribution system with Ruby x IoT
shinsuke_imai
0
710
クックパッド流食品流通の作り方
shinsuke_imai
0
250
Reliable label printer system
shinsuke_imai
0
190
Data analysis of cookpad storeTV
shinsuke_imai
1
5.7k
Other Decks in Technology
See All in Technology
AWS re:Invent 2024 recap in 20min / JAWSUG 千葉 2025.1.14
shimy
1
100
20250116_自部署内でAmazon Nova体験会をやってみた話
riz3f7
1
100
0→1事業こそPMは営業すべし / pmconf #落選お披露目 / PM should do sales in zero to one
roki_n_
PRO
1
1.4k
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
AWS Community Builderのススメ - みんなもCommunity Builderに応募しよう! -
smt7174
0
180
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
54k
新卒1年目、はじめてのアプリケーションサーバー【IBM WebSphere Liberty】
ktgrryt
0
120
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
680
あなたの知らないクラフトビールの世界
miura55
0
130
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
iPadOS18でフローティングタブバーを解除してみた
sansantech
PRO
1
140
EMConf JP の楽しみ方 / How to enjoy EMConf JP
pauli
2
150
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
870
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
GitHub's CSS Performance
jonrohan
1030
460k
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 དྷͯͶ