Angular2-hello-world
Angular 2-Hello World
最初のAngular JSアプリケーションを開始するには、さまざまな方法があります。
- 1つの方法は、最初からすべてを実行することです。これは最も難しく、推奨される方法ではありません。 多くの依存関係があるため、この設定を取得することは困難になります。
- もう1つの方法は、Angular Githubのクイックスタートを使用することです。 これには、開始に必要なコードが含まれています。 これは通常、すべての開発者が選択するものであり、Hello Worldアプリケーションに対して表示するものです。
- 最後の方法は、Angular CLIを使用することです。 これについては、別の章で詳しく説明します。
以下は、githubを介してサンプルアプリケーションを起動して実行する手順です。
- ステップ1 *-githubのURLにアクセス-https://github.com/angular/quickstart
- ステップ2 *-コマンドプロンプトに移動して、プロジェクトディレクトリを作成します。 これは空のディレクトリにすることができます。 この例では、Projectというディレクトリを作成しました。
- ステップ3 *-次に、コマンドプロンプトでこのディレクトリに移動し、次のコマンドを発行して、ローカルシステムのgithubリポジトリを複製します。 これを行うには、次のコマンドを発行します-
git clone https://github.com/angular/quickstart Demoこれにより、ローカルマシンにサンプルのAngular JSアプリケーションが作成されます。
- ステップ4 *-Visual Studioコードでコードを開きます。
- ステップ5 *-コマンドプロンプトに移動し、プロジェクトフォルダーで再度次のコマンドを発行します-
npm installこれにより、Angular JSアプリケーションが動作するために必要なすべてのパッケージがインストールされます。
完了すると、すべての依存関係がインストールされたツリー構造が表示されます。
- ステップ6 *-フォルダーDemo→src→app→app.component.tsに移動します。 コードの次の行を見つけます-
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'Angular'; }次に示すように、AngularキーワードをWorldに置き換えます-
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'World'; }Angular 2アプリケーションのプロジェクト作成の一部として作成される他のファイルがあります。 現時点では、これらはすべてAngular 2アプリケーションの一部として含まれており、Hello Worldアプリケーション用に変更する必要がないため、他のコードファイルを気にする必要はありません。
これらのファイルについては、後続の章で詳しく説明します。
注-Visual Studio Codeは、すべてのファイルを自動的にコンパイルし、すべてのtypescriptファイルのJavaScriptファイルを作成します。
- ステップ7 *-コマンドプロンプトに移動して、npm startコマンドを発行します。 これにより、ノードパッケージマネージャーはライトWebサーバーを起動し、Angularアプリケーションを起動します。
Angular JSアプリケーションがブラウザで起動し、次のスクリーンショットに示すように、ブラウザに「Hello World」が表示されます。
展開
このトピックは、上記のHello worldアプリケーションの展開に焦点を当てています。 これはAngular JSアプリケーションであるため、任意のプラットフォームにデプロイできます。 開発はどのプラットフォームでも可能です。
この場合、WindowsでVisual Studioコードを使用します。 次に、2つの展開オプションを見てみましょう。
Windows上のNGNIXサーバーでの展開
任意のプラットフォームで任意のWebサーバーを使用して、Angular JSアプリケーションをホストできることに注意してください。 この場合、人気のあるWebサーバーであるNGNIXの例を取り上げます。
- ステップ1 *-次のURLからNGNIX Webサーバーをダウンロードしますhttps://nginx.org/en/downloadl[http://nginx.org/en/downloadl]
ステップ2 *-ダウンロードしたzipファイルを抽出した後、nginx exeコンポーネントを実行して、Webサーバーをバックグラウンドで実行します。 その後、URLのホームページにアクセスできます- *http：//localhost
- ステップ3 *-WindowsエクスプローラーでAngular JSプロジェクトフォルダーに移動します。
- ステップ4 *-プロジェクト→デモ→node-modulesフォルダーをコピーします。
- ステップ5 *-プロジェクト→デモ→srcフォルダーからすべてのコンテンツをコピーします。
- ステップ6 *-すべてのコンテンツをnginx/htmlフォルダーにコピーします。
次のURLに移動します- http：//localhost 、次のスクリーンショットに示すように、実際にhello worldアプリケーションが表示されます。
Ubuntuでのセットアップ
次に、同じhello worldアプリケーションをUbuntuサーバーにホストする方法を見てみましょう。
- ステップ1 *-Ubuntuサーバーで次のコマンドを発行して、nginxをインストールします。
apt-get update上記のコマンドは、システム上のすべてのパッケージが最新であることを確認します。
完了したら、システムは最新の状態になっているはずです。
- ステップ2 *-次のコマンドを発行して、UbuntuサーバーにGITをインストールします。
sudo apt-get install git完了すると、GITがシステムにインストールされます。
ステップ3 *- *git バージョンを確認するには、次のコマンドを発行します。
sudo git –versionステップ4 *-Ubuntuのノードパッケージマネージャーである *npm をインストールします。 これを行うには、次のコマンドを発行します。
sudo apt-get install npm完了すると、 npm がシステムにインストールされます。
ステップ5 *- *npm バージョンを確認するには、次のコマンドを発行します。
sudo npm -versionステップ6 *-次に、 *nodejs をインストールします。 これは、次のコマンドで実行できます。
sudo npm install nodejs- ステップ7 *-Node.jsのバージョンを表示するには、次のコマンドを発行します。
sudo nodejs –version- ステップ8 *-プロジェクトフォルダーを作成し、次のgitコマンドを使用してgithubスタータープロジェクトをダウンロードします。
git clone https://github.com/angular/quickstart Demoこれにより、ローカルシステム上のすべてのファイルがダウンロードされます。
フォルダーをナビゲートして、githubからファイルが正常にダウンロードされたことを確認できます。
- ステップ9 *-次にnpmに対して次のコマンドを発行します。
npm installこれにより、Angular JSアプリケーションの動作に必要なすべての必要なパッケージがインストールされます。
完了すると、システムにインストールされているすべての依存関係が表示されます。
- ステップ10 *-フォルダーDemo→src→app→app.component.tsに移動します。 必要に応じて、vimエディターを使用します。 コードの次の行を見つけます-
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: '<h1>Hello {{name}}</h1>';
})
export class AppComponent { name = 'Angular'; }次のコードに示すように、AngularキーワードをWorldに置き換えます。
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: '<h1>Hello {{name}}</h1>';
})
export class AppComponent { name = 'World'; }Angular 2アプリケーションのプロジェクト作成の一部として作成される他のファイルがあります。 現時点では、Angular 2アプリケーションの一部として含まれており、Hello Worldアプリケーション用に変更する必要がないため、他のコードファイルを気にする必要はありません。
これらのファイルについては、後続の章で詳しく説明します。
- ステップ11 *-次に、Angular 2アプリケーションの実行に使用できるライトサーバーをインストールします。 これを行うには、次のコマンドを発行します-
sudo npm install –save-dev lite-server完了すると、完了ステータスが表示されます。 警告について心配する必要はありません。
- ステップ12 *-次のコマンドを使用して、ノードフォルダーへのシンボリックリンクを作成します。 これにより、ノードパッケージマネージャーがnodejsインストールを見つけることができます。
sudo ln -s/usr/bin/nodejs/usr/bin/node- ステップ13 *-それでは、npm startコマンドを使用して、Angular 2アプリケーションを起動します。 これにより、最初にファイルがビルドされ、次に前の手順でインストールされたライトサーバーでAngularアプリが起動します。
次のコマンドを発行します-
sudo npm start完了すると、URLが表示されます。
URLにアクセスすると、Angular 2アプリがブラウザーをロードしていることがわかります。
Ubuntuでのnginxの展開
注-任意のプラットフォームで任意のWebサーバーを使用して、Angular JSアプリケーションをホストできます。 この場合、人気のあるWebサーバーであるNGNIXの例を取り上げます。
- ステップ1 *-Ubuntuサーバーで次のコマンドを発行して、nginxをWebサーバーとしてインストールします。
sudo apt-get updateこのコマンドは、システム上のすべてのパッケージが最新であることを確認します。
完了したら、システムは最新の状態になっているはずです。
ステップ2 *-次のコマンドを発行して、 *nginx をインストールします。
apt-get install nginx完了すると、nginxはバックグラウンドで実行されます。
ステップ3 *-次のコマンドを実行して、 *nginx サービスが実行されていることを確認します。
ps –ef | grep nginx現在、デフォルトでは、nginxのファイルは/var/www/htmlフォルダーに保存されます。 したがって、Hello Worldファイルをこの場所にコピーするために必要な許可を与えてください。
- ステップ4 *-次のコマンドを発行します。
sudo chmod 777/var/www/html- ステップ5 *-任意の方法を使用してファイルをコピーし、プロジェクトファイルを/var/www/htmlフォルダーにコピーします。
ここで、URLを参照すると-* http：//192.168.1.200/indexl*で、Hello world Angular JSアプリケーションが見つかります。
