このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Angular2の始め方。Angular2 公式チュートリアル – The Hero Editor(簡単な和訳)

Angular2

2016.12.30

この記事は最終更新日から1年以上が経過しています。

angular_hero_edi

THE HERO EDITOR

こちらの続きです。
Angular2の始め方。Angular2 公式チュートリアル – Introduction(簡単な和訳)

Setup to develop locally

実際のアプリケーションの開発は、お使いのマシンのローカル開発環境で行われます。

設定の指示に従って、「angle-tour-of-heroes」という名前の新しいプロジェクトを作成した後、ファイル構造を次のように作成します。

angular-tour-of-heroes
├── app
│ ├── app.component.ts
│ ├── app.module.ts
│ └── main.ts
├── node_modules ...
├── index.html
├── package.json
├── styles.css
├── systemjs.config.js
└── tsconfig.json

こちらの章のアプリの動作は、こちらで確認することができます。

live example.

Keep the app transpiling and running

TypeScriptコンパイラを起動し、変更を監視してからサーバーを起動する必要があります。

これを行うには、ターミナルウィンドウで次のコマンドを入力します。

$ npm start

このコマンドは watchモードでコンパイラを実行されます。

サーバー起動とブラウザでアプリケーションを起動し、引き続きヒーローチュートリアルを構築している間はアプリケーションを実行し続けます。

Show our Hero

ヒーローデータをアプリに表示。

AppComponentを更新して、アプリケーション名のタイトルプロパティと “Windstorm”というヒーローのヒーロープロパティの2つのプロパティを持ちます。

app.component.ts (AppComponent class)

export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

@Componentデコレーションのテンプレートをこれらの新しいプロパティへのデータバインディングで更新します。

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

ブラウザが更新され、タイトルとヒーローが表示されます。

二重中括弧は、コンポーネントからタイトルとヒーローのプロパティを読み込んでレンダリングするようにアプリに指示します。

これは、一方向データバインディングの「補間」形式です。

補間の詳細については、データの表示の章を参照してください。

https://angular.io/docs/ts/latest/guide/displaying-data.html

HTMLテンプレートのコントロールをAngularコンポーネントのプロパティにバインドすることで、データを表示できます。

テンプレートは、ECMAScript 2015バックティック( `)内の複数行の文字列です。

一重引用符( ‘)と同じ文字ではないバックティック( `)は、複数行にわたる文字列を構成することができるため、HTMLが読みやすくなります。

Hero object

現時点では、私たちのヒーローは単なる名前です。私たちのヒーローはより多くの特性を必要とします。ヒーローをリテラル文字列からクラスに変換しましょう。

idとnameプロパティを持つHeroクラスを作成します。

今のところこれは、app.component.tsファイルの最上部、つまりimportステートメントのすぐ下に置いてください。

export class Hero {
  id: number;
  name: string;
}

ヒーロークラスが完成しましたので、コンポーネントのヒーロープロパティをヒーロータイプにリファクタリングしましょう。

次に、idが1で、名前が “Windstorm”で初期化します。

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

ヒーローを文字列からオブジェクトに変更したので、ヒーローのnameプロパティを参照するようにテンプレートのバインディングを更新します。

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'

ブラウザが更新され、主人公の名前が表示され続けます。

Adding more HTML

名前を表示するのは良いことですが、ヒーローのすべてのプロパティを見たいところです。

ヒーローのidプロパティには<div>を追加し、ヒーローの名前には<div>を追加します。

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'

テンプレート文字列が長くなっています。テンプレートに入力ミスをするリスクを避けるため、これを考慮する必要があります。

Multi-line template strings

文字列を連結したテンプレート速くを作成することはできますが、読みにくく、スペルミスを発生しがちです。

代わりに、ES2015とTypeScriptのテンプレート文字列機能を利用して、健全性を維持しましょう。

テンプレートの引用符をバックティックに変更し、<h1>、<h2>、<div>要素をそれぞれの行に置きます。

template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`

Editing Our Hero

テキストボックスで主人公の名前を編集できるようにしたい。

ヒーローの名前<label>に<label>要素と<input>要素を以下のようにリファクタリングします。

template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
  <label>name: </label>
  <input value="{{hero.name}}" placeholder="name">
</div>
`

主人公の名前が<input>テキストボックスに表示されることがブラウザでわかります。

しかし、何かが正しく感じられません。名前を変更すると、変更が<h2>に反映されていないことがわかります。

<input>への一方向バインディングでは、望ましい動作を得られません。

Two-Way Binding

ヒーローの名前を<input>に表示し、変更し、ヒーローの名前にバインドするたびにそれらの変更を表示するつもりです。つまり、双方向のデータバインディングが必要です。

フォーム入力に双方向データバインディングを使用する前に、AngularモジュールでFormsModuleパッケージをインポートする必要があります。

これをNgModuleデコレータのimport配列に追加します。この配列には、アプリケーションで使用される外部モジュールのリストが含まれています。

これで、ngModelを含むformsパッケージが含まれました。

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

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

FormsModuleとngModelの詳細については、「フォームテンプレートの構文」の章を参照してください。

双方向バインディングに、ngModel組込みディレクティブを使用するようにテンプレートを更新しましょう。

<input>を次のHTMLに置き換えます

<input [(ngModel)]="hero.name" placeholder="name">

ブラウザが更新され、再度確認。ヒーローの名前を編集して、<h2>で直ちに反映された変更を確認することができます。

The Road We’ve Travelled

私たちが作り出したものを取りに行きましょう。

私たちのヒーローツアーでは、ヒーローオブジェクトのアプリケーションタイトルとプロパティを表示するために、二重中括弧補間(一方向データバインディングの一種)を使用しています。

ES2015のテンプレート文字列を使用して複数行のテンプレートを作成し、テンプレートを読みやすくしました。

組み込みのngModelディレクティブを使用して<input>要素に双方向データバインディングを追加した後、ヒーローの名前を表示したり変更したりすることができます。

ngModelディレクティブは、hero.nameの他のすべてのバインディングへの変更も伝播します。

このパーツのライブサンプルを実行します。

ここには完全なapp.component.tsがあります:

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

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})

export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

The Road Ahead

私たちのヒーローツアーは英雄を1つしか表示せず、英雄のリストを表示したいのです。

また、ユーザーがヒーローを選択してその詳細を表示できるようにしたいと考えています。

リストを取得してテンプレートにバインドし、次のチュートリアルの章でヒーローを選択できるようにする方法について、さらに学習します。

Next Step

Angular2の始め方。Angular2 公式チュートリアル – Master/Detail(簡単な和訳)

Comment

Related Article

Angular 「スマホ・PC」でcomponentとCSSを切り替える(分岐させる)方法

2017.10.15

Angular4 + SSR(サーバーサイドレンダリング)(Universal JavaScript)環境の最小最短 構築方法

2017.10.08

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その2。

2017.04.19

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その1。

2017.04.10

Angular CLIで、Angularアプリをかんたん楽々構築!

2017.04.09

Angular2の始め方。Angular2 公式チュートリアル – HTTP(簡単な和訳)

2017.04.09

Angular2の始め方。Angular2 公式チュートリアル – Routing(簡単な和訳)

2017.04.06

Angular2の始め方。Angular2 公式チュートリアル – Services(簡単な和訳)

2017.04.03

Angular2の始め方。Angular2 公式チュートリアル – Multiple Components(簡単な和訳)

2017.04.03

Angular2の始め方。Angular2 公式チュートリアル – Master/Detail(簡単な和訳)

2017.01.20

CATEGORY LIST

LATEST NEWS

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US