angular:版間の差分

提供: fukudat
移動: 案内検索
(デプロイ用にビルドする)
14行: 14行:
 
</pre>
 
</pre>
  
== プロジェクトを新規作成 ==
+
== コマンドリファレンス ==
 +
 
 +
=== プロジェクトを新規作成 ===
 
<pre>
 
<pre>
 
$ ng new "アプリケーション名"
 
$ ng new "アプリケーション名"
22行: 24行:
 
src/app/ ディレクトリの下にソースコードのテンプレートが作られる.
 
src/app/ ディレクトリの下にソースコードのテンプレートが作られる.
  
== コンポーネントを作る ==
+
=== コンポーネントを作る ===
 
<pre>
 
<pre>
 
$ ng generate component コンポーネント名
 
$ ng generate component コンポーネント名
28行: 30行:
 
src/app/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる.  
 
src/app/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる.  
  
== サービスを作る ==
+
=== サービスを作る ===
 
<pre>
 
<pre>
 
$ ng generate service サービス名
 
$ ng generate service サービス名
40行: 42行:
 
</pre>
 
</pre>
  
== デプロイ用にビルドする ==
+
=== デプロイ用にビルドする ===
 
<pre>
 
<pre>
 
$ ng build --base-href='/デプロイするサーバー上のpath/' --environment prod
 
$ ng build --base-href='/デプロイするサーバー上のpath/' --environment prod
 
</pre>
 
</pre>
 
dist ディレクトリの下のファイルをサーバー上にデプロイする.
 
dist ディレクトリの下のファイルをサーバー上にデプロイする.
 +
 +
== 具体的な例 ==
 +
 +
  
 
[[Category:Programming]]
 
[[Category:Programming]]

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

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/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる.

サービスを作る

$ ng generate service サービス名

src/app/サービス名 ディレクトリの下にソースコードのテンプレートが作られる. src/appの直下に作りたい場合は,--flat オプションを付ける.

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

$ ng serve

デプロイ用にビルドする

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

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

具体的な例

個人用ツール
名前空間

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