Angular4を理解するための学習メモ

Angular4の雛形を作成する

まずはコマンドラインかAngularのcliをインストールする

npm install -g @angular/cli

その後アプリケーションの雛形を作成する

ng new demo

インストールされたdemoアプリケーションの「package.json」を確認し、
Angularの4系がインストールされていることを確認する。

cd demo/
cat package.json

  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },

構成の理解

モジュール - src/app/app.module.ts

記載されていることは下記４つ

Angularで利用するモジュールをインポート
AppComponentコンポーネントをインポート
モジュールに関する情報を宣言
モジュールクラスを準備

src/app/app.module.ts

// 1. Angularで利用するモジュールをインポート
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 2. AppComponentコンポーネントをインポート
//    この「AppComponent」は、次の章で説明するコンポーネント
import { AppComponent } from './app.component';

// 3. モジュールに関する情報を宣言
@NgModule({
  // モジュール配下のコンポーネント
  declarations: [
    AppComponent
  ],
  // 現在のモジュールで利用する他のモジュール／コンポーネント
  imports: [
    BrowserModule
  ],
  providers: [],
  // 最初に起動すべき最上位のコンポーネント（＝ルートコンポーネント）
  bootstrap: [AppComponent]
})

// 4. モジュールクラスを準備
export class AppModule { }

3のモジュールに関する情報は、Angularでは、デコレーターという。
モジュールやクラスなどの要素に対してメタ情報を付与するための仕組。
（Javaでいうアノテーションに相当）

NgModuleデコレーターで利用可能なパラメータ

パラメーター名	概要
imports	現在のモジュールで利用する他のモジュール／コンポーネント
exports	現在のモジュールで外部に公開するコンポーネントなど
declarations	モジュール配下のコンポーネント
bootstrap	最初に起動すべき最上位のコンポーネント（＝ルートコンポーネント）

コンポーネント - src/app/app.component.ts

このコンポーネントは、アプリケーション起動時に呼び出されるルートコンポーネント。

記載されていることは下記の４つ

コンポーネントで利用しているモジュールをインポート
コンポーネントに関する情報を宣言
コンポーネントクラス
ビューに表示するための値

src/app/app.component.ts

// 1. コンポーネントで利用しているモジュールをインポート
import { Component } from '@angular/core';

// 2. コンポーネントに関する情報を宣言
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

// 3. コンポーネントクラス
export class AppComponent {
  // 4. ビューに表示するための値
  title = 'app';
}

なおここのselectorで指定されている「app-root」は、
index.htmlの中のbodyの中に記載されている。

index.html

<body>
  <app-root></app-root>
</body>

Componentデコレーターで利用可能なパラメータ

パラメーター名	概要
selector	コンポーネントの適用先を表すセレクター式
templateUrl	コンポーネントに適用するビュー（テンプレート）のファイルパス
styleUrls	コンポーネントに適用するビュー（テンプレート）のスタイルのファイルパス

4の「ビューに表示するための値」は、templateUrlの中にコンポーネントクラスで用意されたプロパティなどを反映させるために利用する

起動ファイル - src/main.ts

src/main.ts

// 1. アプリ起動に必要なモジュールをインポート
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// 2. 使用するモジュールをインポート
//    AppModuleは、先程説明にあったモジュール
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// プロダクション環境の場合は、Angularの開発モードをOFFにするための設定
if (environment.production) {
  enableProdMode();
}

// 3. モジュールを起動
platformBrowserDynamic().bootstrapModule(AppModule);

メインページ - src/index.html