Angular4 Components

ビデオに沿って学習

1)  ng new でひな形作成

$ ng new components101

2) src/app/app.components.ts を参照

$ cd components101/src/app/
$ vi app.components.ts

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

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

さて、次にビデオでは次のような解説がされている。
１）import ： Component メンバーを import している部分
２）Component Decorator
　　selector:   →　タグの名前 で、 index.html の <app-root> セクションと結びついていると。
　　templateUrl: →  html テンプレート
　　styleUrls:  → css テンプレート
　と各々結びついている。
export 部分
　　我々の Component Class
という簡単な解説。詳細はこれから学習の中で説明とのこと。
そして、ng g (generate) コマンドの説明。

新しいコンポーネントを作るとき
component101 ディレクトリで、
$ ng g component my-new-component を実行。
$ ng g component my-new-component
  create src/app/my-new-component/my-new-component.component.css (0 bytes)
  create src/app/my-new-component/my-new-component.component.html (35 bytes)
  create src/app/my-new-component/my-new-component.component.spec.ts (686 bytes)
  create src/app/my-new-component/my-new-component.component.ts (307 bytes)
  update src/app/app.module.ts (432 bytes)
となり、５つのファイルが作られる。
spec.ts がユニットテスト用のファイルだとのこと。
ビデオでは、簡単にhtml,spec.ts, ts を解説後、
src/appフォルダ直下に作られたapp.module.ts を実施に見ている。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MyNewComponentComponent } from './my-new-component/my-new-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyNewComponentComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

そして、 import 部分に追加された、 my-new-component.component の部分と、 @NgModule 内部の MyNewComponentComponent 部分についての解説がなされている。

とりあえず、my-new-component.component.htmlを書き換えてみる。

<p>
  I've been inserted
</p>

そして、 my-new-component.component.htmlに書き換えた内容を表示させるために、app.component.htmlに、

<app-my-neｗ-component></app-my-new-component>
を追加してみる。
ビデオとはデフォルトの htmlが変わっているが、まあ気にしない。

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align: center;">
<h1>
    Welcome to {{title}}!
  </h1>
<app-my-new-component></app-my-new-component>

  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" width="300" />
</div>
<h2>
Here are some links to help you start: </h2>
<ul>
<li>
    <h2>
<a href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
</li>
<li>
    <h2>
<a href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
</li>
<li>
    <h2>
<a href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
</li>
</ul>

そうすると、

という形で、今追加したメッセージ "I've been inserted" が追加される。