Angular2 基本練習

Angular2のプロジェクト作成から開発をしてIISにデプロイまで

投稿日:2017年2月28日 更新日:

当セクションではAngular2のプロジェクト作成し、プロジェクト開発を行い、IISへのデプロイまでを説明したいと思います。
angular-cliでAngular2の開発環境を構築している事が前提となります。angular-cliがセットアップされていない場合は、『Angular2の開発環境を構築(angular-cli)』を参考にしてください。

 

 

1.プロジェクトのスケルトンの作成

(1)最初に当サイトで練習する作業ディレクトリを作成します。当サイトでは作業ディレクトリとして、C:\ng2testを作成します。作成後、C:\ng2testディレクトリに移動します。コマンドプロンプトより、「mkdir ng2test」と入力してディレクトリ作成後、「cd ng2test」と入力して作業ディレクトリに移動します。

(2)ng new コマンドを使用して、プロジェクト名「sample1」のプロジェクトのスケルトンを作成します。

(3)sample1フォルダが作成され、プロジェクトのファイルが作成されます。

 

2.実行テスト

(1)「ng new」コマンドで作成したプロジェクトディレクトリに移動します。移動したプロジェクトディレクトリで「ng serve」コマンドを実行してコンパイル&開発用のWEBサーバを起動します。

(2)ブラウザを起動して、アドレスバーに「http://localhost:4200」を入力して実行テストを行います。下図のようになったら成功です。

 

3.プロジェクトの開発

プログラムの開発として、少しソースコードを変更したいと思います。前項においてコマンドプロンプトは、『webpack: Compiled successfully』が表示された状態だと思います。コマンドプロンプトもブラウザもそのままの状態で、/src/app/app.component.tsをエディタで開いて「title = 'app works!';」の記述を「title = 'Hello World!';」に変更し、そのままファイル保存をして下さい。コマンドプロンプトを観察すると、ファイル保存と同時に自動的に再コンパイルが開始され様子を確認する事が出来ます。ブラウザの方も自動的に変更した文字が表示されています。このようにangular-cliでは、「ng serve」コマンドを実行中では、変更したファイルを監視し、再コンパイルと画面の再描画が自動的に行われる事になります。

 

4.IISにデプロイ

作成したプロジェクトをWEBサーバ(IIS)にデプロイしたいと思います。最終的には以下のように「http://localhost/ng2test/sample1/index.html」で実行されます。

(1)IISの仮想ディレクトリを作成します。IISの設定画面から「/ng2test/sample1」の仮想ディレクトリを作成して、ブラウザからアクセス可能状態にして下さい。物理パスは「C:\inetpub\wwwroot\ng2test\sample1」に設定されている前提とします。

(2)「ng build」コマンドでビルドを実行します。ビルド結果は、distディレクトリに出力されます。「--prod」オプションは製品版のビルドを指示します。「--bh」オプションはdistディレクトリ中に作成されるindex.htmlのbaseタグのhref属性値を設定します。

(3)ビルド結果のファイルを仮想ディレクトリにコピーします。

(4)ブラウザを起動して、アドレスバーに「http://localhost/ng2test/sample1/index.html」を入力して実行テストを行います。下図のようになったら成功です。

スポンサーリンク

スポンサーリンク

-Angular2, 基本練習

執筆者:

関連記事

Angular2の開発環境を構築(angular-cli)

Angular2の開発環境をangular-cliで構築して、テストプロジェクト作成して実行テストまでを行います。 当サイトはangular-cliでAngular2を開発します。angular-cl ...

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

Angular2のコンポーネントについての説明

当セクションではAngular2のコンポーネントについて説明します。Angular2はコンポーネント指向なので、いつくかのコンポーネントを作成し、そららのコンポーネントを組み合わせてアプリケーションを ...

TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...

(webpack2)TypeScriptとWebpackを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...