(WIP) Learn Angular
これは何か
- Angular を習得するために必要な情報をまとめてみようとしたもの
- Angular の 公式ドキュメントからいくつか抜粋したもの + α です。Qita や 「Angular デベロッパーズガイド」で代替するのも :ok_hand:
- （もとは会社用資料です。多少業務内容の影響をうけているので、優先度が少し一般的ではなかったりするかもしれません。）
始める前に
- 情報源
- Online IDE
最初に
- チュートリアル
- アーキテクチャ
- https://angular.io/guide/architecture
- Architecture Overview, Intro to Modules, Intro to Components, Intro to Services and DI
- コンポーネント、モジュール、サービス、DIについてざっくりと説明されている
- https://angular.io/guide/architecture
Angular4さわるhttp://ryotah.hatenablog.com/entry/2017/06/21/174019自分が最初にさわった時のメモCLIについての基礎、Angular CLIを利用したチュートリアルの一覧など
- スタイルガイド
- https://angular.io/guide/styleguide
- （後回しにしてもいいかも）
- これを読んでおくと現アプリの構成もわかりやすい
- Angular CLI を利用すると大体この通りになる（命名規則、ディレクトリ構造など）
- NgModules
- https://angular.io/guide/ngmodules
- （これも後回しにしてもいいかも。少なくとも FAQs は僕も読んでい
基礎
実際のコードを書く前に一通り目を通したほうが、つまずきにくくなりそうなドキュメント。
- Components & Templates
基礎（適宜）
実際のコードを書きながら気になった時に適宜読むといいかも。
- angular/angular-cli: CLI tool for Angular
- Components & Templates
- （読んでないドキュメントを）
- Forms
- https://angular.io/guide/user-input
- https://angular.io/guide/forms
- Template-driven Forms
- 個人的にまとめたもの
http://ryotah.hatenablog.com/entry/2017/08/31/210437- angular-form-basic-template-driven - StackBlitz
- Template-drivenサンプル（基本的なバリデーション、入れ子構造フォーム）
- https://angular.io/guide/reactive-forms
- Reactive Forms
- 個人的にまとめたもの
http://ryotah.hatenablog.com/entry/2017/08/31/210723- angular-form-basic-reactive - StackBlitz
- Reactiveサンプル（基本的なバリデーション、入れ子構造フォーム）
- Routing & Navigation
- HttpClient
- DI
- Testing
応用
- 日本語訳：Angular 2 Change Detection Explained
- データの変更をどのように View に反映しているか、それを踏まえてパフォーマンスのためにどうしたらいいか、など
- 応用的な View 操作（動的に View をいじる、など）
- （あとで書く。必要なタイミングでまだ空だったら声かけてください）
- Form
- FormControl Freaks: Redux Edition - Daniel Figueiredo Caetano & Renee Vrantsidis - YouTube
- Reduxを使ったフォームの構築
- Template-driven Formsを利用
- ngrxでも考えは一緒
- validはデータとして持つのではなく、selectorで
- formcontrol-freaks/chapter.md at master · renvrant/formcontrol-freaks · GitHub
- スライド版
- Reduxを使ったフォームの構築
- AngularのForm（応用） - ryotah’s blog
- AngularConnect 2017のセッション「Angular Forms - Advanced Topics」を自分用にまとめたものです。
- （実際のセッションの、動画とスライドへのリンクもあります）
- FormControl Freaks: Redux Edition - Daniel Figueiredo Caetano & Renee Vrantsidis - YouTube
RxJS
- https://angular.io/guide/observables
- 以前はなかった
- いい記事（だと思う。しっかり読んではいない）
- 【翻訳】あなたが求めていたリアクティブプログラミング入門 - ninjinkun’s diary
- 有名な記事（だと思う）
- 最初にこれを読んだ
- Introduction · learn-rxjs
- リファレンス的に
- RxMarbles: Interactive diagrams of Rx Observables
- たまにみると面白い
- RxJSのconcatMap, mergeMap, switchMapの違いを理解する(中級者向け)
ngrx
- オフィシャル
- A Comprehensive Introduction to @ngrx/store - Companion to Egghead.io Series · GitHub
- RxJSを利用して簡易的な ngrx をつくる
- 良記事
- Using NgRx 4 to Manage State in Angular Applications
- NgRxを使った状態管理について
- 良記事
- 個人的にまとめたもの
Using NgRx 4 to Manage State in Angular Applicationsのメモ #angular #rx #ngrx #redux · GitHub
- NgRx: Patterns and Techniques – nrwl
- アクションとエフェクトの実践的な使い方、分類について
- 良記事
- 個人的にまとめたもの
NgRx: Patterns and Techniquesのメモ #angular #ngrx #redux #rx · GitHub
TypeScript
VS Code エクステンション
for Angular
for TypeScript
for Lint and Code format
- TSLint - Visual Studio Marketplace
- Prettier - Code formatter - Visual Studio Marketplace
- EditorConfig for VS Code - Visual Studio Marketplace
