2016年12月4日日曜日

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 に書いてある。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)