【今日から携わる】Angularを試してみた（Angular基礎・ツアー・オブ・ヒーローズ チュートリアル）

【今日から携わる】Angularシリーズ第二弾。
今回はAngularの基礎を学ぶツアー・オブ・ヒーローズ チュートリアルをやってみました。

【今日から携わる】Angularを試してみた（Angular入門・チュートリアル）

今回のチュートリアルでできるようになること

・要素を表示・隠蔽する、そしてヒーローデータのリストを表示するための組み込みAngularディレクティブを使う。
・ヒーローの詳細やヒーローのリストを表示するためのAngularコンポーネントを作成する。
・読み取り専用データのための単方向データバインディングを使用する。
・双方向データバインディングを用いて、モデルを更新するための編集可能なフィールドを設置する。
・キー入力やクリックといったユーザーのイベントに対しコンポーネントがもつメソッドをバインドする。
・ユーザーがマスターリストからヒーローを選択し、詳細画面でそのヒーローを編集できるようにする。
・パイプによりデータを整形する。
・ヒーローを組み立てるための共有サービスを作成する。
・さまざまなビューとそれらのコンポーネント間を遷移可能にするためにルーティングを使用する。

今回作るもの

ダッシュボード
もっとも勇敢なヒーローを表示するダッシュボードから始まり、どこに誘導するか という視覚的アイデアです。

新規プロジェクト作成

ローカルに新規フォルダを作成する。
↓↓↓
ng new angular-tour-of-heroes
//「angular-tour-of-heroes」フォルダの中にプロジェクトファイルをインストール
↓↓↓
Enterキーを押してデフォルト値を受ける
↓↓↓
cd angular-tour-of-heroes
//移動
↓↓↓
ng serve --open
//--openオプションを付けてCLIコマンド ng serve を使用してサーバーを起動
↓↓↓
http://localhost:4200/
//ブラウザで開く

アプリケーションシェル

表示されているページをアプリケーションシェルと呼びます。
このシェルはAppComponentという名前のAngularコンポーネントから操作され、Angularアプリケーションの基礎的な構成要素です。 コンポーネントはスクリーン上にデータを表示し、ユーザーの入力を待ち受け、その入力に対しアクションを取ります。

アプリケーションを変更する

”src/app”をエディタ（Visual Studio Code）で開く

タイトルを変更する

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
}
//titleプロパティの値をTour of Heroesに変更

↓変更後

app.component.ts

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

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

h1タグの要素の中身を変更する

HTMLの基本（要素とタグ）

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

//<h1>{{title}}</h1>
//h1タグの中身を変更する

↓　変更後

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>{{title}}</h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

CSSを変更する

src/styles.css

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

おわり

まとめ

・Angular CLIを用いて初期アプリケーションの骨組みを作成
・Angularのコンポーネントがデータを表示
・アプリケーションのタイトルを表示するために二重波カッコによる補間を使用

　ヒーローエディター

src/app/

ng generate component heroes
//「src/app/」の中に「heroes」を生成する

3つのメタデータプロパティを生成

・selector— コンポーネントのCSS要素セレクター
・templateUrl— コンポーネントのテンプレートファイル
・styleUrls— コンポーネントのプライベートCSSスタイル

app/heroes/heroes.component.ts(初期バージョン)

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

@Component({
  selector: 'app-heroes',
//CSS要素セレクタである 'app-heroes'は、親コンポーネントのテンプレート内でこのコンポーネントを識別するHTML要素の名前と一致します。

  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
//ngOnInitはライフサイクルフックです。 Angularは、コンポーネントの作成直後にngOnInitを呼び出します。 初期化ロジックを置くのに適しています。
  }

}
//常にコンポーネントクラスをexportするので、AppModuleのようにいつでも他の場所にimportできます。

↓↓↓　Heroプロパティ追加する

app/heroes/heroes.component.ts

import { Component, OnInit } from '@angular/core';
//coreファイルをから　component onInitをよみこむ

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

hero = 'Windstorm';

  constructor() { }

  ngOnInit() {
  }

}

続きは、随時更新いたします。

【今日から携わる】Angularを試してみた（Angular入門・チュートリアル）