はじめに
Angular-CLIに気づく前は必要なファイルを一から作って動かしたけど、
そんなことして良かったからまとめていく回。
Angualr-CLI
大体これのお陰で解決した。
下記コマンドでインストール。
npm install -g angular-cli
アプリの雛形を作る
下記コマンドを実行すると必要な物を一発で作ってくれた。
ng new 'プロジェクト名'
手打ちでパッケージなりフォルダなり作ってた自分は一体・・・ってなるくらいありがたかった。
動作に必要な物は揃っているはずなので、下記コマンドで実行してやるとサンプルページが上がるはず。
ng serve
できたファイルを書き換えるだけでもアプリになると思うけど、もうちょっと色々やってみようと思う。
ng コマンドまとめ
自分用にコマンドをまとめておく。
基本的にpackage.jsonのscriptってところに書いてあるから、直接叩くことは余り無いと思う。
ng new
プロジェクト生成できる。
デフォルトではcssだが、scssを使いたい場合は下記のようにオプションをつける。
ng new scss-project --style=scss
routingをしたい場合は下記のようにする。
ng new routing-prohect --routing
ng serve
起動するときに使ったコマンド。
初期では、npm startって打ってもこいつが実行されるはず。
実行しておくだけで、ソースを勝手にビルド&勝手にデプロイしてくれる。
デプロイ先は開発用Webサーバ？のメモリに直接されている。
ng build
ソースをビルドする。
ビルドした結果を実行可能プログラムとしてdistフォルダに出力される。
このdistフォルダをWebサーバに配置してやればはれてWebアプリが動くようになる。
本番用に最適化とか軽量化とかしたいときは下記のようなオプションをつける。
ng build --prod --aot
ng test
テストランナーであるKarmaを使ったユニットテストを実行する。
テストFWはJasmineを使用している。
結果はcoverageに出てくる。
テストコードはJasmineの文法に則って書く。
hoge.spec.tsって書いてあるファイルがテストコード。
ng e2e
e2e(End to End)のテストを行う。
Angularのe2eテストFWはprotractorが使われる。
Angular(角度)のテストFWをprotractor(分度器)って言ってるからAngular用のFWだと、どっかに書いてあった記憶。
e2eテストなので、バックエンド側と疎通できないとテスト失敗する。
だから、ちゃんとサーバも忘れず起動する。
まとめ
自分なりに調べたことだから間違いがあるかも。
とりあえずAngular-CLIとても便利だと思ったところです。
これを元に色々作ってみようと思います。