スポンサーリンク

Angular4でTodoアプリを写経してみる(1)

アプリといえば、CRUD(create, read, update, delete)!

CRUDといえばTodo!

以下を写経してみたい!最近は、Ionic2ばかりやっていたので、久しぶりのAngular(まあ、そっくりですが。)

世界初!?Angular4を使ってtodoMVCよりも先にtodoアプリを作ってみた
komatsu-kenta
2017年04月06日に更新
http://qiita.com/komatsu-kenta/items/1d29469100355c20a600

Angular 2 (, Angular 4)に関しては、以下の本がおすすめ!

(環境)
Windows8.1
Node 6.9.1
@angular/cli 1.0.0
VisualStudioCode

image

(1)アプリの新規作成

ng new todo

image

image

image

cd todo

ng serve –open

image

image

image

Ctrl+C => y => Enter でサーバ停止

image

(2)デフォルトのファイル構成

image

(3)src/app/app.component.ts

(変更前)
image

(変更後)
image

(4)src/app/app.component.html

(変更前)
image

(変更後)
image

(5)src/app/app.store.ts (新規作成)

(変更前)(新規作成した時点)
image

(変更後)
image

(6)src/app/app.module.ts

(変更前)
image

(変更後)
image

(7)src/main.ts   (変更無し)

image

(8)src/index.html   (変更無し)

image

(9)src/app/app.component.css

(変更前)
image

(変更後)
image

(10)src/styles.css

(変更前)
image

(変更後)
image

(11)ng serve –open してみる

ng serve –open

image

image

image

image

image

image

image

おお!これはすごい!

(参考)以下を、写経しました。感謝です。

世界初!?Angular4を使ってtodoMVCよりも先にtodoアプリを作ってみた
komatsu-kenta
2017年04月06日に更新
http://qiita.com/komatsu-kenta/items/1d29469100355c20a600

スポンサーリンク