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 アプリケーションの作成と実行の手順でした。お疲れさまでした。