ANGULAR TUTORIAL: TOUR OF HEROES

The Tour of Heroes tutorial はTypeScriptでAngularアプリを作る

このチュートリアルの大きなプランは、人材派遣会社のヒーローたちの管理を手伝うアプリを作ることである。ヒーローたちは仕事を探している。

このチュートリアルでの進歩は、少しだけかもしれない。しかし、full-blown, data-driven アプリの多くの機能を発見できる: ヒーローのリストの取得と表示 、ヒーローの選択と詳細の編集、ヒーローの表示 ナビゲーションなど

このページは、The Tour of Heroesでどんなものを作るかの説明で特に訳すことはない。

ライブ環境はここ live example.

画面繊維等の説明　省略

実際につくってみる

Next Step

次の章はここ ==> ここ
原文はここ　==> The Hero Editor

THE HERO EDITOR

ローカルの開発環境を作る

set upに書かれている方法でセットアップする。
プロジェクト名(フォルダー名)をangular-tour-of-heroesにする

git clone https://github.com/angular/quickstart.git angular-tour-of-heroes

cd angular-tour-of-heroes

npm install

この章では、live example. をつくる。

まず　
npm start
を実行する
このコマンドによりTypescriptコンパイラがワッチモードで起動し、サーバーとブラウザが起動する。コンパイラは、ソースコードの修正をつねに監視し、変更があれは、すぐにブラウザに反映させる。

ここから改造していく
AppComponentに二つのプロパティsをもたせる。二つのプロパティsとは   a title プロバティ(アプリケーションの名前) とa hero プロパティ( ヒーローの名前 "Windstorm")

app.component.ts (AppComponent class)

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

@Componentのthe テンプレートのバインディング(binding)を新しいプロパティに合わせて変更する。

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

ブラウザでタイトルとヒーローが変わっているのが確認できる。
二重の中カッコ"{{  }}"は、componentからtitleとheroを読み込みアプリに渡すことを指事する。二重の中カッコ"{{  }}"は、一方向バインディング の補完(interpolation)形式である。

注　　補完(interpolation)について詳しくは、 Displaying Data chapter.をみよ


Hero object
ヒーローに名前以外にもっとプロパティをもたせたい。そこで、heroプロパティを文字列(literal string)からクラス(class)に変える。

idとnameのプロパティを持ったa Hero classを作る。
app.component.tsファイルの先頭のimportステートメントの下に入れる。

app.component.ts (Hero class)

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

heroプロパティのタイプをHeroに変更する。

app.component.ts (hero property)

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

テンプレートのバインディングも修正する。( {{hero}} ==> {{hero.name}} )

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

HTMLにいろいろ追加する

ES2015(ECMASCript2015)と TypeScriptのマルチライン・ストリングを使ってテンプレートを書き換える。

app.component.ts (AppComponent's template)

template:`
  <h1>{{title}}</h1>

  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>

  <div><label>name: </label>{{hero.name}}</div>
  `

ヒーローの編集

nameの <label>を<label> と <input>に変える。下記のようになる

app.component.ts (input element)

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

ヒーローの名前が入力できるようになったが、入力しても<h2>に表示される名前は変わらない。一方向バインディングでは、それはできない。

二方向バインディング(Two-Way Binding)

まずは、the FormsModule　パッケージをアンギュラー　モジュールへインポートする。

それをthe NgModule のデコレーターの(decorator's) imports配列に追加する。This この配列は、アプリで使用する外部モジュールsのリストを持つ。 これでngModelを持つformsパッケージの準備ができた。

app.module.ts (FormsModule import)

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 { }

the FormsModule と ngModel については、 Forms または Template Syntax で詳しく書いてます。

二方向バインディングのために ngModel 組み込み命令を用い テンプレートの修正をおこなう。



 <input>を書を下記のHTMLで置き換える。

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

ブラウザがリフレッシュされ、inputに入力するとただちに <h2>　のヒーロー名が変わるのが確認できる。

この章のまとめ

ライブ例題は、ここ　==>  live example 

これから、さらに改造していく。

これからの章は　ここ　==>Master/Detail

[ANGULAR] SETUP FOR LOCAL DEVELOPMENT

https://angular.io/docs/ts/latest/guide/setup.html

ローカル開発のためのセットアップ

早くて効率的な開発のために
the Angular QuickStart seed
をインストールする。


ローカル開発環境へのセットアップ

The QuickStart live-coding 例題は、 an Angular playground.です。それは本物の アプリを開発する場所ではない。自分自身のマシン上で開発するべきである。 

 the QuickStart seed を使うとあなたのマシン上に、早く簡単に新しいプロジェクトのセットアップができる。

(the QuickStart seed は、github　でメンテナンスされている。)

nodeとnpmがインストールされてるか確認しろ。

1.プロジェクトフォルダーを作る。名前はとりあえずquickstartにする。(あとで変更できる。)
2.プロジェクトフォルダーにthe QuickStart seed をclone(gitのcloneコマンド)またはダウンロードする。
3.npmでパッケージsをインストールする
4.サンプルアプリを実行するためにnpm startを実行する

cloneの場合
下記のコマンドを実行する

git clone https://github.com/angular/quickstart.git quickstart

cd quickstart

npm install
npm start
(http://localhost:3000/確認できる)

ダウンロードの場合　省略

the QuickStart seedの中身は?

the QuickStart seedは、the QuickStart Playgroundと同じアプリを含んでいる。
ほかにもいろいろなファイルがプロジェクトフォルダー内にある。
それらは、後でlearn about later.

/appFocusフォルダー内の三つのタイプスクリプト(.ts) ファイルに注目する

app

app.component.ts

app.module.ts

main.ts

全てのガイドやクックブックは、これらの三つのコアファイルsを必ず持っている。
それぞれのファイルは、個別の目的がある。アプリの成長に合わせて個別に拡張されていく。

File	Purpose
app.component.ts	the QuickStart playgroundにあるのと同じAppComponentの定義。 rootcomponent 拡張されるすべてのアプリの木構造の根元になる。
app.module.ts	ルートモジュールとなるAppModuleの定義。Angularにアプリケーションの組み立て方を指示する。インストール直後は、 the AppComponentだけを宣言している。そのうちにに多くの components を宣言するだろう。
main.ts	main.tsは、JiT(Just in Time) compiler でアプリをコンパイルし、プラウザで動作するようにアプリをbootstraps する. ほとんどのプロジェクトでmain.tsが適切な選択であり、Plunkerのようなライブコーディング 環境では、これしか選べない。別のコンパイルとデプロイ方法は、後ほど、このドギュメントで 紹介する。

次の一歩　
　Angular初心者ならこのまま learning pathを進むことを勧める

付録　node と npm

Angularや他のプラットフォームでのweb開発にとって、nodeとnpmは、必須だ。nodeは、クライアント開発やツールの作成ができる。nodeのアプリであるthe npmパッケージマネージャーは、javascriptのライブラリをインストールする。

Get them now　マシンに入ってないならすぐに手に入れろ

バージョンを確認しろ　node はv4.x.x かそれ以上　npm は、3.x.x かそれ以上

コマンドをターミナル/コンソール　ウインドーから入力しろ。node -v  と　npm -v　古いバージョンはエラーを起こす。

いろんなバージョンのnode,npmを使う場合は、nvmを使うことをすすめる。

(個人的には、virtualboxやbitnamiのmeanやrubyなどを使うことを勧める。とくにbitnamiのスタックは、git,Devkitなんかも一緒にインストールしてくれるし、マシンの環境をほとんど汚さない)

付録　なぜローカルで開発するのか

ブラウザからLive codingを使いAngularを探検するのは素晴らしい。

ほとんどのドキュメントが完全なサンプルにリンクしているてブラウザー上で使える。theサンプルコードを動作させて、修正を友人と共有し、ダウンロードすることができる。

The QuickStartは、the AppComponentファイルだけを表示している。読者に余計な気を使わさないためにapp.module.ts と main.tsは、同じようなものが内部的に作られている。ほかのサンプルもthe QuickStartに基づいている。

• plunkerではアプリを公開できない
• オンラインでないとコーディングできない
• ブラウザー上でのTypeScriptのコンパイルは遅い
• ローカルのIDEみたいにコード補完やリファクタリンクがてきない。

 the live codingは遊び場、ドキュメントサンプルを動かし実験することに使ってくれ。file a documentation issue やfile an issue with Angular itselfするときに、バグを再現 させる場所としては完璧。

本物の開発はローカル環境で行ってくれ。

Angularの学習

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

Angular新参者のための推奨パス
  人は、それぞれのやり方で学習する。ドキュメントを順番に読む必要はない。ほとんどのページが独立している。とはいえは、新参者には、ここのパスがおすすめ。

1. ローカルの開発環境をセットアップ セットアップする。
2.the Tour of Heroes tutorial.をやってみる
    The the Tour of Heroes は、セットアップから全ての機能の例題まで一歩一歩つれてってくれる。例題は、プロフェショナルなアプリのエッセンス--効率的なプロジェクト構造、data binding, master/detail, services, dependency injection, navigation, and remote data accessを示してる。
3. Architecture　全体像の概要を読む。
4.The Root Module は、Angularにコンパイル方法や アプリの動作方法を指定してくれるNgModule class を紹介してくれる。
5.Displaying Data は、データバインデングがコンポーネントのプロパティーバリューを画面に表示する方法を示す。
6.User Input は、ユーザの入力により発生した、DOMイベントsへの応対のしかたを示す。
7.Forms はUIでのデータ入力とバリデーション(入力の検証)を行なう。

8.Dependency Injection(依存性の注入) は、メンテナンスが容易な大きなアプリを小さな単機能の部品から作る方法です。

9.Template Syntax は、AngularのテンプレートHTMLの総合研究です。

上記のセッションを読むと、他のこのマニュアルのページが自由に読めるようになる。

つぎのステップ

コーディングの準備がてきているのならチュートリアルをやってみる。

または、基本コンセプトを、 Architecture で学ぶ。

好きな方をどうぞ

Angular Documentation Overview

https://angular.io/docs/ts/latest/guide/

このページはハイレベルです。

Angular が初めての人は、"Learning Angular" を先にみたほうがよいかも

ここをみて

と言うことでここからは後で書く

Angular -- https://angular.io/docs/ts/latest/quickstart.html

QUICKSTART

TYPESCRIPT

Angularアプリは、コンポーネントでできてる
コンポーネントは、HTMLテンプレートとコンポーネントクラスの組み合わせ。
コンポーネントクラスが画面を制御する。

QuickStart example on Plunkr <~ここでインストールせずに試してみることができる。
　
例題

app/app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

全てのコンポーネントは@Componentデコレーター(decorator)　関数(function)で始まる。
@Componentデコレーター関数は、メタデータオプジェクトを持つ。
メタデータオプジェクトは、HTMLテンプレートとコンポーネントクラスの関係を記述する。

selectorプロパティは、index.html内の<my-app>タグの内側にコンポーネントを表示することをAngularに伝える。

index.html (inside <body>)

<my-app>Loading AppComponent content here ...</my-app>

templateプロバティは、<h1>ヘッダーの内側に表示するメッセージを定義している。
メッセージは、Helloで始まり{{name}}で終わる
{{name}}は、Angularの補間式( interpolation binding expression)である
Angularは、実行時に{{name}}をコンポーネントのnameプロパティで置き換える。

例題の式でコンポーネントクラスのnameプロパティをAngular'から'World'に変更してみろ。何が起こるか見てみろ

補間(Interpolation binding )は、その他いろいろこのドキュメントにかいているAngularの機能の一つである。

A WORD ABOUT TYPESCRIPT

この例題は、TypeScript で書かれている。 Angularは、いろいろ便利なのでTypeScript を使っている。でもJavaScriptで書くこともできる。その方法は、ここ　に書いてある

さて　次のステップ　

ローカルの開発環境の作り方とコードの書き方は、 Developer Guide に書いてある。