導入編 Angular実践入門チュートリアル

背景

業務で Angular を使っているが、基本的な動かし方を理解仕切れてない。
そのため、簡単なアプリを作りながら、 Angular がどのように動いているのか理解しようと思う。
その学習の過程で学んだことを、メモとして残していく。

参考資料

Angular実践入門チュートリアル

導入編

1. 雛形アプリを自動生成してみる

Angular CLI をインストールする

bash

$ npm install -g @angular/cli

Angular のバージョンを確認する

bash

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.4
Node: 14.17.6
Package Manager: npm 6.14.15
OS: darwin x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.4 (cli-only)
@angular-devkit/core         12.2.4 (cli-only)
@angular-devkit/schematics   12.2.4 (cli-only)
@schematics/angular          12.2.4 (cli-only)

アプリの雛形を生成する

bash

$ ng new angular-to-do
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss

生成された雛形アプリを実行する

bash

$ ng serve --open

2. 雛形アプリのソースコードを覗いてみる

• main.ts は AppModule を起動する
• AppModule は AppComponent を読み込んでいる
• AppComponent は app.component.html を読み込んでいる

どうやら AppComponent が読み込んでいた app.component.html の中身は、 index.html の <app-root></app-root> の部分にレンダリングされる仕組みになっているようです

モジュールとコンポーネント

ここまでで、

1. angular.json に、「 src/main.ts の実行結果を src/index.html にレンダリングする」という設定が記載されている
2. src/main.ts は AppModule を読み込んで起動している
3. AppModule は AppComponent を読み込んで起動している
4. AppComponent で読み込んでいる src/app/app.component.html のHTMLが、 src/index.html に埋め込まれる形でレンダリングされている

といった関係性が見えてきました。

Angular では、アプリを構成する機能を モジュール という単位で分割して作成できるようになっており、1つ以上のモジュールを組み合わせることでアプリ全体を構成します。

雛形アプリでは、 AppModule というモジュールが1つだけ存在しています。 AppModule は、アプリ起動時に最初に読み込まれる特別なモジュールで、ルートモジュールと呼ばれます。

また、 Angular では、ビュー・スタイル・ロジックをひとまとめにした コンポーネント という単位でUI部品を作っていきます。作ったコンポーネントは、モジュールに登録することでそのモジュール内で利用可能になります。

雛形アプリでは、 AppModule で AppComponent が読み込まれており、それが index.html に挿入されるようになっていました。この、 index.html に挿入されるコンポーネントはルートコンポーネントと呼ばれます。

雛形アプリはルートモジュールとルートコンポーネントだけが存在している状態ですが、実際のアプリ開発では、自分でコンポーネントを追加したり、必要に応じてモジュールを分割したりしながらアプリを作り込んでいきます。