Angular:Hello World

Angular(バージョン２以降)の勉強、その１です

あまりにも仕事が忙しすぎて
ストレスがたまりなんか勉強したくなって衝動買いをしてしまった
（１２００円ぐらいいいよね！！みたいなノリで）

https://www.udemy.com/the-complete-guide-to-angular-2/

この講義はガチ英語ですが、なんとなく意味がわかるので
適当にやっています

機械学習しろよと思うけど気分転換には最適〜♪
機械学習が意味がわからない所が多すぎて心が何回も折れた・・

購入して２時間ぐらいたつと
ver4が発表された・・・orz

nodejsが必要だったが
バージョンが古すぎて使えないので下記のURLを参考にしてインストールした
http://qiita.com/tagosaku324/items/bf1fe149c38c99728c72
自分用のメモで
vagrantでVMを立ち上げるたびにシェルを実行するたびに下記を実行
source ~/.nvm/nvm.sh
nvm install v7.9.0
npm install -g @angular/cli

その後、下記のコマンドでインストールができるみたい

[sudo] npm install -g @angular/cli 

sudoがいるのかどうかは環境次第で自分のmacは必要だった
vagrantの環境だといらなkった

ng new my-first-app 

インストールが終わてフォルダに移動して

cd my-first-app
ng serve

hostやportを指定する場合
ng serve --host 0.0.0.0 --port 9999 --live-reload true

(ブラウザを立ち上げて)

http://localhost:4200にアクセスすると
vagrantの場合はhttp://192.168.10.33:9999

app worksと表示された

エディタでsrc/app/app.component.ts
を開く

title = 'app works!';
↓
title = 'change test app works!';

保存すると
読み込みもなく
➜ my-first-app git:(master) ng serve

NG Live Development Server is running on http://localhost:4200 **

Hash: b2ba9fdbb65fc7f0e415 / Time: 13297ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
webpack: Compiling...
Hash: 0b287ce00556892bae0e n Time: 1396ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial]
chunk {1} main.bundle.js, main.bundle.js.map (main) 3.64 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
webpack: Compiled successfully.

src/app/app.component.htmlに下記を追加

<input type="text" [(ngmodel)]="name">
<p>{{name}}</p>

src/app/app.component.tsに下記を追加

name = '';

入力すると自動的に反映される
変わった
いまいち理解していないけど
helloworld的なところなのでこの辺で終了

次の記事
masalib.hatenablog.com