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
OKUNOKENTARO
April 10, 2016
Programming
2
740
Angular 2 次に覚えたいフィーチャー
2016/4、Angular 2ハンズオン勉強会にて使用した資料です。
OKUNOKENTARO
April 10, 2016
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
170
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.3k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.5k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
640
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.3k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1k
Other Decks in Programming
See All in Programming
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Introduction to kotlinx.rpc
arawn
0
750
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Open source software: how to live long and go far
gaelvaroquaux
0
650
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
13
4.5k
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
1
240
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
480
GoとPHPのインターフェイスの違い
shimabox
2
200
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2.1k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
190
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
8
2.8k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
4 Signs Your Business is Dying
shpigford
182
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A Tale of Four Properties
chriscoyier
158
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Music & Morning Musume
bryan
46
6.4k
Designing for humans not robots
tammielis
250
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
What's in a price? How to price your products and services
michaelherold
244
12k
Transcript
Angular 2 次に覚えたいフィーチャー Apr 10, Apr 16 2016 東西合同開催 Angular
2 ハンズオン
@armorik83 はちさん
今回のハンズオンでは Angular 2の入門的なAPIを 扱っていきました
次に覚えておくとよい 機能や特徴について まとめました ググるときのヒントに使ってね
templateUrl • @Component()のtemplateをtemplateUrlにして、 そこにパスを書くことで、テンプレートは別ファイル として扱える @Component({ selector: 'my-app', providers: [],
templateUrl: 'app.component.html', directives: [] })
styles • @Component()のstylesプロパティに 文字列の配列を与えると、そのコンポーネントにのみ 適用できるスタイルシートを記述できる @Component({ selector: 'hero-app', template: `
<h1>Tour of Heroes</h1> <hero-app-main [hero]=hero></hero-app-main>`, styles: ['h1 { font-weight: normal; }'], directives: [HeroAppMainComponent] }) https://angular.io/docs/ts/latest/guide/component-styles.html
styleUrls • @Component()のstylesの外部ファイル参照版 styleUrlsというのもある @Component({ selector: 'hero-details', template: ` <h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team> <ng-content></ng-content> `, styleUrls: ['app/hero-details.component.css'], directives: [HeroTeamComponent] })
Pipe • Angular 1でいうFilterは使いやすく、実装もしやすい Pipeになった • 文字列を変換するPipeや、数値を変換するPipe、 日付や金額を扱うPipeなど最初から色々入っている https://angular.io/docs/ts/latest/guide/pipes.html
読んでおくといいページ • Angular 1経験者には、2との違いが一覧表に なっているANGULAR 1 TO 2 QUICK REFERENCEを
オススメ https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html • Angular 2のテンプレート構文をド忘れしたときは ANGULAR CHEAT SHEETをオススメ https://angular.io/docs/ts/latest/cheatsheet.html
楽しいAngular 2ライフを お過ごしください