はじめに

サクッとAngularを動かしてみる方法を以下の2点の方法で解説していきます。

• 環境構築
• アプリケーションの開発

基本的に公式のチュートリアルを真似ているので、詳しいことを知りたい方はAngular公式サイトをご覧ください。

• Angularってなに？って方はこちら。
• Angularに改修を加えて、自動テストをしてみたい方はこちら。

環境構築

必要な環境を構築します。
以下の環境は整っていますか？整っている方はここを飛ばしてください。

• node.js
  • 確認方法：ターミナル or コンソールで node -v
• npmパッケージマネージャ
  • 確認方法：ターミナル or コンソールでnpm -v
• AngularCLI
  • 確認方法：ターミナル or コンソールでng --version

各環境のインストール

node.jsのインストール

こちらのサイトから自分のOSに合ったものをダウンロードしましょう。

npmパッケージマネージャのインストール

npmはnode.jsをインストールすれば、一緒にインストールされるはずです。

AngularCLIのインストール

ターミナル orコンソールで

npm install -g @angular/cli

を実行してください。

アプリケーションの開発

ここから簡単なサンプルサイトを開発します。
開発すると言うほどのことはしませんが…

新しいワークスペースと初期アプリケーションプロジェクトを作成

ターミナル orコンソールで

ng new my-app

を実行してください。

何か聞かれると思うので、Enterを押してデフォルトのままにしてください。
これで、新しいワークスペースと初期アプリケーションプロジェクトが作成されました。
簡単ですね

サーバーの起動

次にサーバーを起動してローカルで動かしてみましょう。

まずはワークスペースに移動します。

cd my-app

次にサーバーを起動します。

ng serve --open

正しく起動できれば、サンプルサイトが立ち上がるはずです。

参考サイト

Angular