580
回編集
差分
提供: fukudat.net
ナビゲーションに移動検索に移動
ページの作成:「Angularを使ったweb application作成の備忘録 == Install == === Mac OS === brew で node.js, npm をインストール． <pre> $ brew install...」
[[google:Angular|Angular]]を使ったweb application作成の備忘録
== Install ==
=== Mac OS ===
brew で node.js, npm をインストール．
<pre>
$ brew install npm
</pre>
npm で angular/cli をインストール．
<pre>
$ npm install --global @angular/cli
</pre>
== コマンドリファレンス ==
=== プロジェクトを新規作成 ===
<pre>
$ ng new "アプリケーション名"
$ cd "アプリケーション名"
</pre>
カレントディレクトリの下に "アプリケーション名"というディレクトリができる．
src/app/ ディレクトリの下にソースコードのテンプレートが作られる．
=== コンポーネントを作る ===
<pre>
$ ng generate component コンポーネント名
</pre>
src/app/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる．
例えば、HelloWorld という名前のコンポーネントを作ると、src/app/hello-world というディレクトリが作成され、その下に hello-world.component.{ts|html|css|spec.ts} というファイルが作られる。
これらのファイルを src/appの直下に作りたい場合は，--flat オプションを付ける．
=== サービスを作る ===
<pre>
$ ng generate service サービス名
</pre>
src/app ディレクトリの下にソースコードのテンプレートが作られる．
例えば、FileSystem というサービスを作ると、src/appディレクトリの下に file-system.service.{ts|spec.ts} というファイルが作られる。
=== 開発用サーバーを起動する ===
<pre>
$ ng serve
</pre>
=== デプロイ用にビルドする ===
<pre>
$ ng build --base-href='/デプロイするサーバー上のpath/' --environment prod
</pre>
dist ディレクトリの下のファイルをサーバー上にデプロイする．
== 具体的な例 ==
[[Category:Programming]]
== Install ==
=== Mac OS ===
brew で node.js, npm をインストール．
<pre>
$ brew install npm
</pre>
npm で angular/cli をインストール．
<pre>
$ npm install --global @angular/cli
</pre>
== コマンドリファレンス ==
=== プロジェクトを新規作成 ===
<pre>
$ ng new "アプリケーション名"
$ cd "アプリケーション名"
</pre>
カレントディレクトリの下に "アプリケーション名"というディレクトリができる．
src/app/ ディレクトリの下にソースコードのテンプレートが作られる．
=== コンポーネントを作る ===
<pre>
$ ng generate component コンポーネント名
</pre>
src/app/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる．
例えば、HelloWorld という名前のコンポーネントを作ると、src/app/hello-world というディレクトリが作成され、その下に hello-world.component.{ts|html|css|spec.ts} というファイルが作られる。
これらのファイルを src/appの直下に作りたい場合は，--flat オプションを付ける．
=== サービスを作る ===
<pre>
$ ng generate service サービス名
</pre>
src/app ディレクトリの下にソースコードのテンプレートが作られる．
例えば、FileSystem というサービスを作ると、src/appディレクトリの下に file-system.service.{ts|spec.ts} というファイルが作られる。
=== 開発用サーバーを起動する ===
<pre>
$ ng serve
</pre>
=== デプロイ用にビルドする ===
<pre>
$ ng build --base-href='/デプロイするサーバー上のpath/' --environment prod
</pre>
dist ディレクトリの下のファイルをサーバー上にデプロイする．
== 具体的な例 ==
[[Category:Programming]]
