Angular入門記事です。
毎記事実際に動くコードを見ながらAngularを学んでいきます。
インストールから始め、実際にWebサービスを作りながら、しっかりとAngularの使い方解説し、最終的にはプロとしてAngularのコーディングをしていくことができるレベルの知識が身につくことを目指します。
これを気に、Angularの良さを知っていただけると幸いです。
Angular入門記事一覧
-
その1. インストール
- Angularのインストール
- 実際にAngularをインストールしてプロジェクトを作ります
- 起動して動作確認
- 起動して、Webページを表示してみます
- Angularのインストール
-
その2. ディレクトリ構造とコンポーネントの基礎
- Angularプロジェクトのディレクトリ構成
- AngularCLIにより生成されるディレクトリ、ファイルの説明を行います
- コンポーネントの基礎
- コンポーネントを少し修正して、Angularの開発をどう進めていくのかという初歩を解説します
- Angularプロジェクトのディレクトリ構成
-
その3. ルーティング基礎
- SCSSの有効化
- プロジェクトのCSSをSCSSに変更します
- ルーティング基礎
- 新しくページを作ってページ間の遷移を試します
- SCSSの有効化
-
その4. モデルとループと分岐と
- データ管理基礎(モデルクラスの作成)
- HTMLでの繰り返し処理(
*ngFor
) - HTMLでの分岐処理(
*ngIf
)
-
その5. サービスとTypescriptの基礎
- Typescript基礎
- データ管理基礎2 ( Angularの
Service
)
-
その6. ngModelを使ったフォーム
- HTMLのフォーム要素とTypescriptの連携
- クリックイベント
- フォームの送信(submitイベント)
-
その6.5. URLパラメータの利用とここまで学んだことの実践
- URL要素からの値の取得方法 (
ActivatedRoute
) - これまでの内容の実践
- URL要素からの値の取得方法 (
-
その7. Angularのフォーム2 (Reactive foms)
- ReactiveFormの基礎
- FormGroup, FormControl
-
その8. バリデーション
- バリデーションの使い方
- Angularのビルトインバリデーションの種類
-
その9. カスタムバリデーション
- カスタムバリデーションの作り方
- カスタムバリデーションのディレクティブの作り方
-
その10. Firebaseを使ったAPI通信1
- FirebaseライブラリのAngularプロジェクトへの追加(セットアップ)
- FirebaseのREST APIの仕様
- AngularにおけるHTTPのGETメソッド
-
その11. Firebaseを使ったAPI通信2
- Firebaseへのデータ追加
- AngularのPOSTメソッド
-
その12. Firebaseを使ったAPI通信3
- Firebaseを使ったデータの更新、削除
- AngularのPATCH, DELETEメソッド
全18記事を予定しています。
コメントなど
この記事を通してAngularの良さを皆さんに知っていただきたいと思っているので、わかりにくい部分があったり、もっとこういう説明を追加してほしい、などありましたらコメントや Twitter でDMしていただけると嬉しいです。