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 @ JS Ojisan #6-3
Search
Shuhei Kagawa
December 17, 2015
Programming
1
3k
Angular 2 @ JS Ojisan #6-3
JS オジサン #6-3 での Angular 2 のざっくりした紹介です。
https://atnd.org/events/71991
Shuhei Kagawa
December 17, 2015
Tweet
Share
More Decks by Shuhei Kagawa
See All by Shuhei Kagawa
Profiling Node.js apps on production
shuhei
0
890
Building a Pixel Art Editor with Elm
shuhei
1
790
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
170
Draw Animated Chart on React Native
shuhei
0
8.8k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
870
Introduction to Angular 2
shuhei
2
160
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
330
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
450
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
技術同人誌をMCP Serverにしてみた
74th
1
450
ReadMoreTextView
fornewid
1
490
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
620
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Java on Azure で LangGraph!
kohei3110
0
170
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
470
Featured
See All Featured
Building an army of robots
kneath
306
45k
The Invisible Side of Design
smashingmag
300
51k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Why Our Code Smells
bkeepers
PRO
337
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
Embracing the Ebb and Flow
colly
86
4.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Automating Front-end Workflow
addyosmani
1370
200k
Optimizing for Happiness
mojombo
379
70k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Transcript
ANGULAR 2 JS OJISAN #6 SHUHEI KAGAWA
߳ पฏ > Rails, Angular, Node ͳͲͷΦδαϯ @M3, Inc. 10k
LOC Angular App > GitHub, npm, Qiita @shuhei > Twitter @shuheikagawa > Ϗʔϧݕఆ 2 ڃ !
GITHUB @SHUHEI > shuhei/babel-angular2-app > shuhei/babel-plugin-angular2-annotations > babel/karma-babel-preprocessor
None
!
ANGULAR BLOG
ANGULAR Φδαϯ 2
ANGULAR 2 ɾɾɾ
ίϯϙʔωϯτ ࢤʂ
None
<hello-world greeting="͜Μʹͪ" name="Angular 2"></hello-world>
TYPESCRIPT @Component({ selector: 'hello-world', template: '<p>{{ greeting }}, {{ name
}}!</p>', inputs: ['greeting', 'name'] }) export class HelloWorld {}
<hello-world [greeting]="greeting" [name]="name"></hello-world>
SCOPED CSS // my-app.ts @Component({ // ... templateUrl: 'my-app.html', styleUrls:
['my-app.css'] }) export class MyApp {} /* my-app.css */ h3 { margin: 2rem 0; }
SCOPED CSS
ANGULAR 2 ɾɾɾ
͍ʂ
None
None
͍ʂ > ແବͷͳ͍มߋݕ > View Ωϟογϯά > ॳظԽ࣌ʹҰճ͚ͩίϯύΠϧ ʢΏ͘Ώ͘ΦϑϥΠϯͰʣ
V8 ։ൃऀ͕ڭ͑Δ ຊʹ͍ίʔυੜ 2 2 angular2/src/core/change_detection/change_detection_jit_generator.ts
ANGULAR 2 ɾɾɾ
RXJS!
Stream = Promise + Array
ඇಉظͳෳͷ > DOM Πϕϯτ > WebSocket ͳͲ > ΞϓϦͷঢ়ଶมԽ
DEMO
ίʔυ @Component({ selector: 'my-app', templateUrl: 'app/my-app.html', styleUrls: ['app/my-app.css'] }) export
class MyApp { searchText = new Control(); repos: any; constructor(private github: GitHubService) { this.repos = this.searchText.valueChanges .debounceTime(300) .flatMap(text => this.github.search(text)); } }
<h3>GitHub repositoy search</h3> <p> <input [ngFormControl]="searchText" placeholder="keyword" class="form-control"> </p> <ul
class="repositories"> <li *ngFor="#repo of repos | async"> <a [href]="repo.html_url">{{repo.full_name}}</a> {{repo.stargazers_count}} stars </li> </ul>
͞Βʹ ANGULAR 2 ʹ ɾɾɾ
ඈͼಓ۩ ͕͋Δʂ
ඈͼಓ۩ʂ > DOM ૢ࡞Ҏ֎͕ Web Worker Ͱಈ͘ʂ > αʔόαΠυϨϯμϦϯάʂ Angular
Universal > ωΠςΟϒΞϓϦʂ React Native, NativeScript
ͰηοτΞοϓ͕ ͍͠ΜͰ͠ΐ͏ʁ
$ npm install -g angular-cli
$ ng new js-ojisan $ cd js-ojisan $ ls -l
total 32 drwxr-xr-x 10 shuhei staff 340 Dec 16 11:44 dist -rw-r--r-- 1 shuhei staff 200 Dec 16 09:44 ember-cli-build.js -rw-r--r-- 1 shuhei staff 1282 Dec 16 09:44 karma-test-shim.js -rw-r--r-- 1 shuhei staff 1365 Dec 16 09:44 karma.conf.js drwxr-xr-x 17 shuhei staff 578 Dec 16 09:44 node_modules -rw-r--r-- 1 shuhei staff 571 Dec 16 09:44 package.json drwxr-xr-x 7 shuhei staff 238 Dec 16 09:44 src drwxr-xr-x 26 shuhei staff 884 Dec 16 21:16 tmp $ ng serve $ open http://localhost:4200
Ͳ͏Ͱ͢ʁ
ANGULAR 2 ͍ͨ͘ͳΓ·͔ͨ͠ʁ
࢝ͨͭ͜Ͱ ANGULAR 2!
> Angular 2: One framework > AngularClass/awesome-angular2 - GitHub >
AngularConnect 2015 Videos - Youtube > Angular 2 Advent Calendar 2015 - Qiita
None
NGUPGRADE
CREDITS > Angular: One framework > Comparing Performance of Blaze,
React, Angular-Meteor and Angular 2 with Meteor by Shawn McKay > snack by liz west