[初級編] 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

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

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

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

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

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.
```

# 参考
   - [Angular](https://angular.io/)
   - [Angularの基本構造を理解して、アプリ開発を始めるには？](http://www.buildinsider.net/web/angulartips/002)