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
730
Angular 2 次に覚えたいフィーチャー
2016/4、Angular 2ハンズオン勉強会にて使用した資料です。
OKUNOKENTARO
April 10, 2016
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
99
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
30
9.5k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
1.9k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.2k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.5k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
580
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
5.9k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
920
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.2k
Other Decks in Programming
See All in Programming
Semantic search with Django and pgvector
pauloxnet
0
220
ONE WEDGE_company_guide
1wedge_one
0
330
エンターテイメント業界で利用されるAWS
demuyan
0
200
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
170
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
240
ゆるい個人開発のススメ
kuroppe1819
10
920
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
460
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
250
puregoの活用例
aethiopicuschan
0
220
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1354
200k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
How to name files
jennybc
64
92k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Designing Experiences People Love
moore
135
23k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.3k
The Cult of Friendly URLs
andyhume
73
5.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
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ライフを お過ごしください