Angular入門 フォームから名前を修正する

Angularでアプリケーションを作ります。
この記事で作成するのは、ブラウザにstockの詳細情報を表示して、stock名を修正できる機能です。



アプリケーションプロジェクトを作成

ngコマンドで、新規に us-stocks という名前の新しいワークスペースと初期アプリケーションプロジェクトを作成します。
newを使います。

user@computer$ ng new angular-us-stocks

 

cdコマンドで、angular-us-stocks ディレクトリーに入ります。

user@computer$ cd angular-us-stocks

 

Angularのサーバーを起動します。

user@computer$ ng serve 
open

 

ブラウザに初期画面が表示されます。

Angular

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 ファイルを作成して、次のように記述します。

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

 

StocksComponentクラスに戻り、Stockクラスをインポートします。

コンポーネントのstockプロパティをStock型にリファクタリングします。 それを、1というidとGoogleという名前で初期化します。

変更したStocksComponentのクラスファイルは、次のようになります。

import { Component, OnInit } from '@angular/core';
import { Stock } from '../stock';
@Component({
  selector: 'app-stocks',
  templateUrl: './stocks.component.html',
  styleUrls: ['./stocks.component.css']
})
export class StocksComponent implements OnInit {
  stock: Stock = {
  id: 1,
  name: 'Google'
  };
  constructor() { }
  ngOnInit() {
  }
}


 

stockオブジェクトを表示する

stocks.component.htmlを次のように書き換えます。

<h2>{{stock.name}} Details</h2>
<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に、次のように記述してください。

<h2>{{stock.name | uppercase}} Details</h2>
<div><span>id: </span>{{stock.id}}</div>
<div><span>name: </span>{{stock.name}}</div>
<div>
<label>name:
<input [(ngModel)]="stock.name" placeholder="name">
</label>
</div>


 

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をインポートしました。
  • 名前を変更できるようになりました。

 



返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください