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
910
Building a Pixel Art Editor with Elm
shuhei
1
800
Redux Middleware Wars (Japanese)
shuhei
8
1.9k
Redux Middleware Wars (English)
shuhei
0
180
Draw Animated Chart on React Native
shuhei
0
8.8k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
880
Introduction to Angular 2
shuhei
2
160
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
440
Navigating Dependency Injection with Metro
zacsweers
3
960
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.5k
チームのテスト力を鍛える
goyoki
3
170
Design Foundational Data Engineering Observability
sucitw
3
200
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
概念モデル→論理モデルで気をつけていること
sunnyone
2
230
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
1.5k
個人軟體時代
ethanhuang13
0
320
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
220
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
A designer walks into a library…
pauljervisheath
207
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
What's in a price? How to price your products and services
michaelherold
246
12k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Music & Morning Musume
bryan
46
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
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