前回からのあらすじ

Angularはいくつもの部品で構成されていて、その部品をModule(モジュール)と呼んでいます。また表示するページのUIの部品をComponent(コンポーネント)と呼んでいます。　Angularアプリがたちがる際にはスタート時にMain.tsが読み込まれます、まずはここを見てきましょう。

ということで、今回はサンプルアプリの内容を見て、どのようになっているか見てみます。

まずは main.ts と index.html

main.ts

まず、一番はじめに実行されるmain.tsを見てみます。

/ClientApp/main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic(providers).bootstrapModule(AppModule)
  .catch(err => console.log(err));

ディフォルトモジュールをインポートして、ブラザーを立ち上げるみたいなことが記載されています。

index.html

では、これと同時に、アプリが動作するメインページとなるindex.htmlを見てみましょう。

/ClientApp/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NodejsWebAppAngularTutorial1</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>Loading...</app-root>
</body>
</html>

はい、なんたること書いてないですね・・　<app-root>Loading...</app-root>の部分にてアプリのルートコンポーネントを指定しています。というだけです。

main.tsに関してはまた、後程詳しく説明していきます。（入門編では、あとで詳しく説明するみたいなのが連発されますのであしからず）

コンポーネントデコレーター | app.component.ts

index.htmlに表示されるコンテンツはもう一つ深い階層にあるapp.component.tsにあります。

/ClientApp/src/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

ここではまず、UIのコンポーネントを扱うため import { Component } from '@angular/core'; にてコンポーネントオブジェクトをインポートしています。　次に@Component(コンポーネントデコレーター)を宣言し、selector セレクター、templateUrl テンプレートUrl、styleUrls スタイルUrlを指定しています。

ここも、まだはじめの方なので、深く考えずにサクサク進みましょう。

テンプレート | app.component.html

最後に AppComponentというモジュールクラスを生成し、その中にtitleというオブジェクトに対して'app'という名前を設定しています。

先ほどのindex.htmlにあった<app-root>Loading...</app-root>をselectし、そこにtemplateUrlを介して ./app.component.htmlを表示していることがここでわかります。

/ClientApp/src/app.component.html

<div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-3'>
      <app-nav-menu></app-nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

また・・さらに別のコンポーネントによって、<app-nav-menu></app-nav-menu>と<router-outlet></router-outlet>が指定されていることが読み取れます。

次、データバインディング

では、次はデータバインディングを見ていきましょう。コンポーネントに対して様々な値を設定して表示する仕組みはAngularのコアとなる部分です。

[Angular] 入門 - 基本編 1