記事内に広告が含まれています。

Angular CLI によるアプリケーションの作成とアプリケーションの実行(Hello World の表示)

2019年2月18日

Angular では CLI(Command Line Interface) が用意されており、CLI コマンドを利用することで素早くアプリケーションの作成やアプリケーションの実行などを行うことができます。 アプリケーションの作成と実行の手順を見ていきましょう。

事前準備

Angular CLI のインストールがまだの方は、こちらの記事でインストールを済ませておいてください。

それでは、Angular CLI を利用してアプリケーションのひな形を作成しましょう。

Angular アプリケーションの保存フォルダの指定

Angular アプリケーションを保存するフォルダを選びます。ここでは、D:\angular にアプリケーションを作成することにします。

コマンドプロンプトを開き、D:\angular に移動しておきます。

Angular アプリケーションのひな形作成

Angular アプリケーションのひな形は、ng new コマンドで作成することができます。コマンドプロンプトにて次のコマンドを入力し、実行します。

ng new app1

app1 の部分にはアプリケーション名を入力します。すると、ルーティングなどの初期設定に関する選択肢が出てきます。デフォルトの選択値のまま処理を進めると、アプリケーションの雛形が作成されます。すべて Enter を押してウィザードを進めると、アプリケーションに必要なファイルの生成が始まります。こんな感じです。

Visual Studio Code で Angular アプリケーションを開く

アプリケーションの作成が終わったら、コマンドプロンプトにて次のコマンドを実行します。(ng new の部分を code に置き換えた形です。)これは、Visual Studio Code で app1 というアプリケーションを開く、という意味です。

code app1

すると、次のように Visual Studio Code で app1 を開くことができました。

Visual Studio Code でターミナルを開く

続いて、ターミナルを開きます。ターミナルを開くには、「表示」 > 「ターミナル」を選択します。(ショートカットキー Ctrl + @ でも開くことができます。)

Angular アプリケーションの実行

そして、最後にアプリケーションの実行です。Visual Studio Code のターミナルで次のコマンドを実行します。

ng serve --open

もしくは、次のように省略形で記述することもできます。

ng s -o

すると、アプリケーションが立ち上がってきます。

Hello World の表示

アプリケーションを実行した状態で、ファイルの編集を行っていきます。

src > app > app.component.html に記述されているコードをすべて削除し、パラグラフタグ内に Hello World を記述します。

app.component.html

<p>Hello World</p>

そして、Ctrl + S で編集内容を保存します。すると、自動的に Angular アプリケーションの再ビルドが行われ、ブラウザが更新されて変更内容が表示されます。

↓Hello World が表示されました!

以上、Angular アプリケーションの作成と実行の手順でした。お疲れさまでした。

-Angular