Angular

Angularを使ったweb application作成の備忘録

Install

Mac OS

brew で node.js, npm をインストール．

$ brew install npm

npm で angular/cli をインストール．

$ npm install --global @angular/core

Upgrade to version 7

https://www.techiediaries.com/updating-angular-cli-projects/ を参考。

Version 6 から 7 にあげる場合、以下を実行する。

$ ng ng update @angular/cli @angular/core

コマンドリファレンス

プロジェクトを新規作成

$ ng new "アプリケーション名"
$ cd "アプリケーション名"

カレントディレクトリの下に "アプリケーション名"というディレクトリができる． src/app/ ディレクトリの下にソースコードのテンプレートが作られる．

コンポーネントを作る

$ ng generate component コンポーネント名

src/app/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる．

例えば、HelloWorld という名前のコンポーネントを作ると、src/app/hello-world というディレクトリが作成され、その下に hello-world.component.{ts|html|css|spec.ts} というファイルが作られる。 これらのファイルを src/appの直下に作りたい場合は，--flat オプションを付ける．

サービスを作る

$ ng generate service サービス名

src/app ディレクトリの下にソースコードのテンプレートが作られる．

例えば、FileSystem というサービスを作ると、src/appディレクトリの下に file-system.service.{ts|spec.ts} というファイルが作られる。

開発用サーバーを起動する

https://angular.jp/cli/serve を参照。

$ ng serve

デプロイ用にビルドする

https://angular.jp/cli/build を参照。

$ ng build --base-href='/デプロイするサーバー上のpath/' --prod --aot

dist ディレクトリの下のファイルをサーバー上にデプロイする．