Angularでアプリケーションを作ります。
この記事で作成するのは、ブラウザにstockの詳細情報を表示して、stock名を修正できる機能です。
Contents
アプリケーションプロジェクトを作成
ngコマンドで、新規に us-stocks という名前の新しいワークスペースと初期アプリケーションプロジェクトを作成します。
newを使います。
user@computer$ ng new angular-us-stocks
cdコマンドで、angular-us-stocks ディレクトリーに入ります。
user@computer$ cd angular-us-stocks
Angularのサーバーを起動します。
—open
user@computer$ ng serve
ブラウザに初期画面が表示されます。
Angularの初期htmlファイルを書き換えます。
app.component.htmlを開き、中身の記述を全て削除します。
次を記述しましょう。
<h1>{{title}}<h1>
Angularのスタイルを作成します。
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を使用して、初期アプリケーションの骨組みを作成することができました。また、htmlファイルに、二重波括弧（ {{ }} ）を使用しました。
stocksコンポーネントを作成する
Angular CLIを使用して、stocks という名前のコンポーネントを作成します。
Ctrl+cをキーボードで押して、サーバーを一旦停止させましょう。
次のgenerateコマンドで、コンポーネントを作成します。
user@computer$ ng generate component stocks次のように新しいディレクトリーが作成されました。
コンポーネントにプロパティを追加します。
stocks.component.tsをエディターで開いて、 StocksComponentに
stock = 'Google';
を記述しましょう。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-stocks',
templateUrl: './stocks.component.html',
styleUrls: ['./stocks.component.css']
})
export class StocksComponent implements OnInit {
constructor() { }
ngOnInit() {
}
stock = 'Google';
}
stockを表示させる
stocks.component.htmlに、次を記述します。
{{stock}}
StocksComponentビューを表示する
app.component.htmlを開いて、下記のように記述を追加してください。
<h1>{{title}}</h1>
<app-stocks></app-stocks>
ブラウザには次のように、表示されます。
stockクラスを作成する
appディレクトリーに stock.ts ファイルを作成して、次のように記述します。
StocksComponentクラスに戻り、Stockクラスをインポートします。
コンポーネントのstockプロパティをStock型にリファクタリングします。 それを、1というidとGoogleという名前で初期化します。
変更したStocksComponentのクラスファイルは、次のようになります。
stockオブジェクトを表示する
<div><span>id: </span>{{stock.id}}</div>
<div><span>name: </span>{{stock.name}}</div>
UppercasePipe で書式設定する
パイプ演算子 ( | )を使用して、記述を次のように修正します。
uppercaseにより、文字が大文字になります。
<h2>{{stock.name | uppercase}} Details</h2>
<div><span>id: </span>{{stock.id}}</div>
<div><span>name: </span>{{stock.name}}</div>
公式サイトによると、パイプは、文字列、通貨金額、日付や、その他の表示データを書式設定するのに適していると書かれています。
次のようにGoogleの文字が大文字に変わりました。
stockを編集できるようにする
双方向データバインディング
[(ngModel)] は、Angularの双方向データバインディング構文です。
stocks.component.htmlに、次のように記述してください。
FormsModule をインポートする
app.module.tsをエディターで開き、次の2つを追記します。
import { FormModule } from '@angular/forms';
imports: [
BrowserModule,
AppRoutingModule,
FormModule
全体のコードは、次のようになっています。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
//import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StocksComponent } from './stocks/stocks.component';
@NgModule({
declarations: [
AppComponent,
StocksComponent
],
imports: [
BrowserModule,
//AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ブラウザには、次のように表示されます。
名前の変更が可能になりました。
ここまでで、次を行いました。
- generateコマンドで、新しいコンポーネントを作成しました。
- コンポーネントにプロパティを追加して、<app-stocks></app-stocks>を使用しブラウザに表示させました。
- クラスを作成しました。
- クラスをインポートさせ、ブラウザに表示させました。
- パイプ演算子を使いました。
- 双方向バインディング[(ngModel)]を使用しました。
- FormsModuleをインポートしました。
- 名前を変更できるようになりました。