アンギュラーでこんにちは

ちょっと間が空いたが、またAngularを触り始めた。

とりあえず、設定方法などは、前回書いたので、
その辺りは飛ばしてしまって、さっさと新しいプロジェクトを作ろう。
今回は、ブートストラップも入りのプロジェクト。
あ、ちなみに、IDEはVS Codeだ。

１）コンソールを開いて以下を入力

ng new ng-project

どこに作成するかは任意。ng-project も、 プロジェクト名なので任意で。

２）ブートストラップ入れる
作成されたプロジェクトに移動して、ブートストラップをインストール。

cd ng-project
npm install bootstrap

２）VS Codeで、作成したフォルダを開く

３）ローカルサーバー起動
VS Codeの「表示」->「統合ターミナル」を開き以下を入力

ng serve

４）ブラウザでひらく
ログに開くべきURLが出てるのでそれをひらく。たとえば

http://localhost:4200/

Welcome to app!
とか出てきたら成功。

よし。では何か作ってみよう。

１） app.component.html を書き換えてみる
「Welcome・・・」とか書かれてるファイル、これを書き換えてみるぜ。

場所：src/app/app.component.html

<div>こんちは！</div>

もともとあったものを全部消して上記のとおり、書き換えてみる。
で、ブラウザでみると「こんにちは！」と出たが、なんとも虚しい。
よし、次は、もっと高度なことを・・・。

２）app.component.ts も一部書き換えてみる
このファイルには、いろいろ書かれてるけど、一番下の、
title = 'app';
のところだけ書き換えてみる。

場所：src/app/app.component.ts

export class AppComponent {
    title = 'あいさつ画面です';
}

そしたら、このタイトルが画面に表示されるように、htmlの方も修正してみる。

場所：src/app/app.component.html

<h2>{{title}}</h2>

おぉ、、、出てきた。が、まだまだ虚しさが残る。

３）なにか入力できるようしてみる
せめて、なにか入力できるようにしてみよう。
app.module.ts に入力できるようにするためのモジュールをインポートする。

場所：src/app/app.module.ts

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

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

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

実際には、３行目の　

import { FormsModule } from '@angular/forms';　

と

imports: [
　BrowserModule,
　FormsModule
],
の箇所だ、変更したのは。

そしたら、ほかのもグリグリと変更する。

場所：src/app/app.component.html

<h2>{{title}}</h2>
<div>{{greeting}}</div>
<div>
   <input type="text" [(ngModel)]="greeting" placeholder="あいさつ">
<div>

場所：src/app/app.component.ts

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'あいさつ画面です';
 greeting = 'こんにちは';
}

よし。そしたらブラウザで確認だ。
「あいさつ画面」に続いて「おはよう」、そしてさらに「おはよう」が出ているが、２つ目のおはようはテキストボックスだ。書き換えることができるので書き換えてみるとよい。
すると・・・。

・・・いや、なんというか虚しい。。。