Angular4

[初級編] Angular4のアプリケーションを理解する

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

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

  1. Angularで利用するモジュールをインポート
  2. AppComponentコンポーネントをインポート
  3. モジュールに関する情報を宣言
  4. モジュールクラスを準備
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

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

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

  1. コンポーネントで利用しているモジュールをインポート
  2. コンポーネントに関する情報を宣言
  3. コンポーネントクラス
  4. ビューに表示するための値
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

index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

アプリケーションの開始

下記コマンドを実行することで、webpackによりコンパイル実施されて
「localhost:4200」でアクセスすることが可能になる。

$ npm start

> demo@0.0.0 start ~/Workspace/sample/demo
> ng serve

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: a69317ad530fb3ed5838                                                              
Time: 9527ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.28 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.19 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

参考