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, 基本練習

執筆者:

関連記事

当サイトの環境環境

当サイトの投稿記事の開発環境は以下のように構成されています。 ・OS:Windows7(x64) ・WEBサーバ:IIS(Internet Information Service) ・Node.js ...

Angularjs2の公式チュートリアルにあるクイックスタートをテストしてみた

Angularjs2の公式チュートリアルにあるクイックスタートをテストしてみました。簡単にAngular2の開発環境を構築して、開発体験を行う事ができました。   目次1.事前準備2.作業デ ...

Angular-cliにjQueryを導入する

Angular-cliの開発環境でのjQueryの導入方法を説明します。   目次1.Angular-cliの導入2.Angular2のプロジェクト作成3.jQueryのインストール4.jQ ...

angular-cliでプロジェクト作成した主要なファイルを説明

当セクションではangular-cliの「ng new」コマンドで自動作成されたプロジェクトのスケルトンの主要ファイルについて説明したいと思います。angular-cliでAngular2の開発環境を ...

SystemJSのConfig構成について

SystemJSのConfig構成はsystemjs.config.jsファイルで設定される事が多いと思います。今回はAngular2の公式チュートリアルにあるクイックスタートで使用されているsyst ...