angular:版間の差分

提供: fukudat
移動: 案内検索
(サービスを作る)
 
(1人の利用者による、間の7版が非表示)
28行: 28行:
 
$ ng generate component コンポーネント名
 
$ ng generate component コンポーネント名
 
</pre>
 
</pre>
src/app/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる.  
+
src/app/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる.
 +
 
 +
例えば、HelloWorld という名前のコンポーネントを作ると、src/app/hello-world というディレクトリが作成され、その下に hello-world.component.{ts|html|css|spec.ts} というファイルが作られる。
 +
これらのファイルを src/appの直下に作りたい場合は,--flat オプションを付ける.
  
 
=== サービスを作る ===
 
=== サービスを作る ===
34行: 37行:
 
$ ng generate service サービス名
 
$ ng generate service サービス名
 
</pre>
 
</pre>
src/app/サービス名 ディレクトリの下にソースコードのテンプレートが作られる.
+
src/app ディレクトリの下にソースコードのテンプレートが作られる.
src/appの直下に作りたい場合は,--flat オプションを付ける.
+
 
 +
例えば、FileSystem というサービスを作ると、src/appディレクトリの下に file-system.service.{ts|spec.ts} というファイルが作られる。
  
== 開発用サーバーを起動する ==
+
=== 開発用サーバーを起動する ===
 
<pre>
 
<pre>
 
$ ng serve
 
$ ng serve

2018年2月24日 (土) 18:14時点における最新版

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

目次

[編集] Install

[編集] Mac OS

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

$ brew install npm

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

$ npm install --global @angular/cli

[編集] コマンドリファレンス

[編集] プロジェクトを新規作成

$ 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} というファイルが作られる。

[編集] 開発用サーバーを起動する

$ ng serve

[編集] デプロイ用にビルドする

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

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

[編集] 具体的な例

個人用ツール
名前空間

変種
操作
案内
ツールボックス