Angularの開発環境を構築し、Helloをやってみるまでを手順化
Angularの開発環境を構築
Angularとは
Googleが開発しているJavaScriptのフレームワークです。フロントエンドのWebアプリケーション開発に使われます。
今回使用した環境
インターネット接続可能のオンラインの環境
64 ビット オペレーティング システム
Windows 10 21H1
準備するもの
・Node.jsインストーラー ( ダウンロードURL：https://nodejs.org/ja/download/ )
⇒今回は2022/5/25時点でのLTSの最新バージョン16.15.0を使用します。
手順
Node.jsダウンロード、インストール
１．ブラウザで以下サイトからLTS ( 長期間安定してサポートされるバージョンのこと ) のNode.jsインストーラーをダウンロードします。
２．ダウンロードした「node-v16.15.0-x64.msi」ファイルで右クリック、「インストール」をクリックします。
３．「Next」ボタンをクリックします。
４．「I accept the terms in the Licence Agreement」にチェックを入れ、「Next」ボタンをクリックします。
５．ここではNode.jsのインストール場所はデフォルトの「C:\Program Files\nodejs\」とします。「Next」ボタンをクリックします。
６．インストールする内容はデフォルトとし、「Next」ボタンをクリックします。
７．「Automatially install …」のチェックは外した状態で、「Next」ボタンをクリックします。
※チェックを入れると自動で余計な？ツールがインストールされるようです。
８．「Install」ボタンをクリックします。
９．インストール完了です。「Finish」ボタンをクリックします。
Angular CLI のインストール
１．コマンドで「npm install -g @angular/cli」を入力し、Enterキーを押します。
※npmとはNode.jsのパッケージ管理ツールです。ここではnpmを使用してAngular CLIをインストールしています。
２．以下のような画面が表示されれば、Angular CLI のインストール完了です。
Angular のプロジェクト作成＆実行
１．コマンドにてカレントディレクトリをAngularプロジェクトを作成する場所に設定 ( ここではD:\frontend ) します。
次に「ng new hello-angular --style=css --skipGit=true」を入力し、Enterキーを押します。※スタイルシートはcssを使用、git管理はしないのオプションを付けてます。
「Would you like to add Angular routing?」と聞かれるので「y」を入力し、Enterキーを押します。
※プロジェクトが複数ページに渡る場合、「y」を入力することとなります。今回はHello Angularなのであまり関係はないですが・・・。
２．しばらくすると「Packages installed successfully.」と表示されます。これでAngularプロジェクトの作成完了となります。
３．確認すると「D:\frontend」フォルダの配下に「hello-angular」のプロジェクトフォルダが作成されています。
４．コマンドでカレントディレクトリを「D:\frontend\hello-angular」に設定します。
次に「ng serve」を入力し、Enterキーを押します。
※ng serve は Angular を起動するコマンドです。
「Compiled successfully.」と表示されることでAngularアプリケーションが起動されました。
５．ブラウザでAngularアプリケーションにURL「localhost:4200」でアクセスしてみます。
無事、HelloAngularの画面が表示されました。
６．ちなみにAngular開発する際、筆者はVSCodeでプロジェクトフォルダを開いて開発します。
以下は本記事で作成した「hello-angular」プロジェクトをVSCodeで開いた状態です。
VSCodeのインストール手順はこちらをご覧ください。Visual Studio Code ( VSCode ) をインストールし、日本語化する手順
以上となります。
ここまでお読みいただきありがとうございました。