AngularのTUTORIAL(The Hero Editor)をゆるく実行してみました。
実施はとりあえず、1のみ。
筆者はフロントのことはほとんどわからないので間違った記載があるかもしれません。見つけた方は優しくご指摘ください。
目的
サーバ側エンジニアである筆者がサーバ側のRest APIを叩けるフロントを作りたいと思ったときに、
いくつかあるフロントフレームワークの中でどれを使うと簡単にフロント実装できるか確認したかった。
事前作業
Angularの手順をみてcliをインストール。
Create the heroes component コンポネント作成
手順の中で作成したプロジェクトのディレクトリ配下で次を実行。
ng generate component heroes
を実行するとプロジェクトの配下、
src/app/heroes/
にファイルができる。
You always import the Componentということなので
app/heroes/heroes.component.tsの以下のコードはおまじない。
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
The ngOnInit is a lifecycle hook. Angular calls ngOnInit shortly after creating a component. It's a good place to put initialization logic.
ngOnInit は初期化のために呼ぶ？コンポネントが作られた後にshortlyに呼ばれる。
shortlyは時間を空けずだろうか。
Always export the component class so you can import it elsewhere ... like in the AppModule.
コンポネントクラスはexportしてアプリのモジュール(AppModule)のようにどこでもインポートできる。
どんな時何か後で探ろう
Add a hero property プロパティの追加
heros.component.tsに次を追加。どこに追加するのだろう？とりあえず最終行として追加。
hero = 'Windstorm';
Show the hero heroを表示
heroes.component.html の中身を置き換えろとある。置き換え前はブラウザで開いてみると次のイメージが表示される。
置き換えると。
だめだ。変換かけられていない。読み進もう。
Show the HeroesComponent view Viewを表示
To display the HeroesComponent, you must add it to the template of the shell AppComponent.
コンポネントを表示するためにはAppComponentシェルのテンプレートを追加しなければならない。
src/app/app.component.htmlに追加というが編集しても画面には反映されない。
まだ続きをいなければいけない
Create a Hero class Heroクラスを作る
ここの指示通り src/app/heroes/heroes.component.ts を編集したら
http://localhost:4200/ にアクセスしたら[Object]と出たがなにかまちがいかな。
Show the hero object heroオブジェクトの表示
続きを進めるとid, nameは表示された。
Format with the UppercasePipe 大文字に変換する
heroes.component.htmlを編集する。
もちろんコードを見ていればhtmlだし、src/app/app.component.htmlとはわかるがどのファイルか見失うことがあるので書いて欲しい。
<h2>{{hero.name | uppercase}} Details</h2>
html中の書くが{{}}内はDSL(名前はまだわからに)ということですね。どう実行されるかがまだわからないがngで実行されているサーバープログラムが評価(変換)しているとするとそのままフロントモジュールに載らないという心配もある。
大文字になりました。
Pipes are a good way to format strings, currency amounts, dates and other display data. Angular ships with several built-in pipes and you can create your own.
パイプは金額とか日付とか表示時に文字列フォーマットを変換するのに良い方法です。Angularではいろいろなパイプのビルトインが用意されているし、自分で作ることもできます。
Edit the hero heroの編集
inputタグをつかってユーザに編集可能なオブジェクトを作るということ。
heroのnameやデータ型を替えられるようにする。
Two-way binding
htmlを保存するとng servで起動しているプログラムは勝手にコンパイルするようだ。
でも表面には何も現れないからブラウザの検証ウィンドウを開いておく。Consoleを開きつつ、htmlファイルを変更して保存するとコンパイルされている様子がわかる。
そしてデバッグが動きTemplate parse errorが動いているようだ。
ngModelがバインドできないと言っている。
two-way data binding syntax.
two-wayデータ紐付けという書き方。
The missing FormsModule Formモジュール足りない
It belongs to the optional FormsModule and you must opt-in to using it.
ngModelはFormsModuleに属するオプションでopt-inしなければならない。
AppModule アプリモジュール
アプリが必要とするものにmetadata がある。
いくつかは@Component decoratorsの中にあり、 @NgModule decorators.の中にあるものもある。
@NgModule decoratorの最上位にAppModuleがある。
プロジェクト作ったときにAppModule class は src/app/app.module.tsに生成されている。
Import FormsModule Formsモジュールのインポート
app.module.ts の変更箇所が2つある。
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
というのは先頭のimportが並んでいる最後に挿入した。
imports: [
BrowserModule,
FormsModule
],
というのは @NgModule の宣言の中に書くみたいである。
Declare HeroesComponent Herosコンポネントの定義
Every component must be declared in exactly one NgModule.
全てのコンポーネントはひとつのNgModuleの中に書かなければならない。
ng generate component heroes
cliで上記を実行したときに、AppModuleにheroesコンポーネントが書かれているため特に追加する作業は必要ない。
Final code review ふりかえり
Summary まとめ
You used the CLI to create a second HeroesComponent.
You displayed the HeroesComponent by adding it to the AppComponent shell.
You applied the UppercasePipe to format the name.
You used two-way data binding with the ngModel directive.
You learned about the AppModule.
You imported the FormsModule in the AppModule so that Angular would recognize and apply the ngModel directive.
You learned the importance of declaring components in the AppModule and appreciated that the CLI declared it for you.
感想
なんかフォームはできたがRest APIとの通信とかどうやるかはまだわからない。
node.js上で動かすのでブラウザだけでは動かないのか。サーバとの通信をするとなったら2つサーバを介さなければいけない？
ブラウザだけで動かすとしたらAngularとは違うフレームワークを使うのだろうか。
今時のフロント開発がよくわからなくなりました。
コンパイルすればブラウザ上だけで動くと聞きました。