Angularお勉強 ～その１～ クイックスタート：Angularアプリの作成と起動

Angularのクイックスタート

自環境はこんな感じ

>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/


Angular CLI: 6.1.2
Node: 8.11.1
OS: win32 x64
Angular:
...

Package Version
------------------------------------------------------
@angular-devkit/architect 0.7.2
@angular-devkit/core 0.7.2
@angular-devkit/schematics 0.7.2
@schematics/angular 0.7.2
@schematics/update 0.7.2
rxjs 6.2.2
typescript 2.7.2

プロジェクトの作成

それではアプリを作っていく
適当なフォルダに移動してnewコマンドでアプリを作る

>ng new my-app
　　　・
　　　・
　　　・
added 1104 packages in 160.484s
    Successfully initialized git.

無事成功
プロジェクトに最低限必要なパッケージは自動で入ったけど、追加で別のパッケージを入れるならaddコマンドを使うとのこと
以前はBootstrapとか入れたけど今回はデフォルトのままで進める

Angular Material provides schematics for typical app layouts. See the Angular Material documentation for details.

マテリアルデザインについてはもう少しAngularを理解してから踏み込んでいきたい

アプリの起動

作成したアプリを起動する

>cd my-app
>ng serve --open

作ったアプリに移動してserveコマンドでアプリを起動する

• • openオプションをつけるとビルド後に勝手にブラウザが立ち上がる

デフォルトでlocalhost:4200で起動する

ng serveで起動するとアプリフォルダをCLIが監視していて何か変更を加えると自動的にリビルドがかかる
次回からアプリの本体をいじっていく