Angular(バージョン2以降)の勉強、その1です
あまりにも仕事が忙しすぎて
ストレスがたまりなんか勉強したくなって衝動買いをしてしまった
(1200円ぐらいいいよね!!みたいなノリで)
https://www.udemy.com/the-complete-guide-to-angular-2/
この講義はガチ英語ですが、なんとなく意味がわかるので
適当にやっています
機械学習しろよと思うけど気分転換には最適〜♪
機械学習が意味がわからない所が多すぎて心が何回も折れた・・
購入して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的なところなのでこの辺で終了