そもそもAngularとは
Angularはモバイルおよびデスクトップ環境両方に対応したwebアプリケーションを作成するためのプラットフォームです。
Angularの導入をするだけで、開発ライブラリとデバッグ用のツールが準備できます。
公式サイトによると以下のような利点があるようです。
- 個人開発もエンタープライズレベルの開発もOK
- コンポーネントという単位でアプリを組み立てることができ、最小限の労力で開発ができる
- 170万人を超える多様なグループによるエコシステムで、もっと安定化＆もっと便利に
環境準備
操作は基本的にはターミナルやコマンドプロンプトなどで行います。
筆者はWindowsユーザーなのでコマンドプロンプトで操作をしています。
Node.js&npmの準備
Angularがベースとして使用している、Node.jsのインストールを行います。
以下のページからインストーラをダウンロードして実行します。
このインストーラーでNode.jsのほかにパッケージ管理ソフトのnpmも同時にインストールされます。
ダウンロードページ（公式サイト）
インストールが行われたか確認するためにバージョン確認を行います。
npm -vでnpmの、
node -vでNode.jsのバージョンが確認できます。
Angularの準備
Angularのインストールはnpmを通じて行います。
npm install @angular/cli -g
末尾の-gは全ユーザーにインストールさせるオプションです。
既にAngularが入っていて更新したい場合は以下のコマンドを使います。
npm upgrade @angular/cli -g
インストールが行われたか確認するためにバージョン確認を行います。
npm list --depth=0 -g
でインストール済みパッケージ一覧が表示され、バージョンの確認ができます。
Angularプロジェクトの作成と起動確認
Angularのプログラムを作るにはターミナルからコマンドを実行する必要があります。
プロジェクトを作成したいディレクトリにcdコマンドで移動し、
その後、以下のコマンドを実行します。
ng new 作成したいプロジェクトの名前
コマンドを実行すると「Would you like to add Angular routing? y/N」と聞かれます。
routing機能でページ切り替えを行うので、基本的にはyを選びます（yと打ってEnterで回答）。
次に「Which stylesheet format would you like to use?」と聞かれます。
スタイルシートの種類を選びます。カーソルキーで選択してEnterで回答します。
その後、カレントディレクトリ直下に新しくディレクトリが作られ基本的なファイルが作られます。
プロジェクト作成処理がおわったら、プロジェクトフォルダにcdコマンドで移動し、
以下のコマンドを打ってサーバーを起動します。
このコマンドの実行中は使用中のＰＣがサーバーとなります。
ng serve --open
アプリのコンパイルが終わった後、
自動でブラウザが起動してhttp://localhost:4200/ のアドレスが開かれるはずです（--openオプションの効果）。
画面の表示は以下のようになっています。
ここまで出来たら準備完了です。
サーバーを止めるときは、
ターミナルでCtrl＋Cを押して終了します。