AMG Solution

Angular入門! 環境構築からプロジェクト実行までの手順をご紹介します

feels

こんにちは、昼間です。
 
今回はWindowsでのAngularのインストールから、アプリの作成から実行までを行っていきます。少し長くなりますが、よろしくお願いいたします。

目次

  1. Angularとは
  2. 説明時の開発環境
  3. Node.jsのインストール
  4. Angular CLIのインストール
  5. アプリを作成する
  6. アプリを実行する
  7. 最後に

Angular(アンギュラー)は、Googleと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークである。

wikipedia「Angular」

要するに、「Angualr」を使うだけでwebアプリの開発ができます。

今回の説明で使用している開発環境は以下のとおりです。

Node.js
17.3.0
OS
Windows 10 Pro 64ビット
Angular
13.0.0

Angularでは、主にTypeScriptを使用して開発を行います。JavaScript、TypeScriptを使用して開発を行う場合、Node.jsのインストールが基本となってきます。
 
Node.jsをインストールすることでnpmコマンドが使用可能になります。npmコマンドを用いることによってライブラリなどのインストール、管理が容易になります。
 
Node.jsのインストールについては、以下を参照してください。
噂のNode.jsをはじめてみよう! WindowsにNode.jsをインストールして環境構築

 
インストール完了後、コマンドプロンプトで以下のコマンドを実行して、Node.jsがダウンロードされているか確認しましょう。

これで、npmコマンドが使用可能になりました。

Angular CLIをインストールします。以下のコマンドでAngular CLIをインストールできます。

以上でAngular CLIを利用する準備は完了です。正しくインストール出来ていることを確認するために、実際にアプリの作成、実行してみましょう。
 
今回は「C:\data」フォルダ配下にmy-cliという名前でアプリを作成します。フォルダを移動しng -newコマンドを実行してください。

アプリを実行するには、ng serveコマンドを利用します。– openオプションは、アプリを実行する際にブラウザも自動起動しなさい、という意味です。


ブラウザで上記の画面が表示されたら成功です。

今回紹介した手順で、Angularの実行環境が整います。次回は、今回インストールされたAngularのプロジェクト構成について説明していきます。
 
 
 
 
《関連記事》

feels recruit

HIRUMA'S BLOG

昼間の記事

昼間の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

feelsでSFA・CRM
はじめました。
LOADING