Angular アプリを動かしてみる（Ubuntu 上）

前準備

n のインストール

n は Node.js のバージョンを簡単に行えるようにするソフトウェア． Webページは，https://github.com/tj/n． この Web ページの記載に従ってインストールを行う

1. npm を使い n をインストール

   端末を開き、次のコマンドを実行. 「-g」は「グローバル」という意味．

   sudo apt -y update
   sudo apt -y install npm
   sudo npm install -g n
   

   
2. n 用いて，node の最新 release 版をインストール

   端末で次のコマンドを実行. /usr/local/bin/n, /usr/local/bin/node, /usr/local/bin/npm といったファイルがインストールされる（ようです）．

   sudo n latest
   

   「sudo n latest」の代わりに，次の方法もある．

   curl -L https://git.io/n-install | sudo bash
   

   

Angular CLI のインストール

https://angular.io/guide/quickstart の記載をなぞり、 Angular CLI のインストールを行う．

1. node と npm のバージョン確認

   node は，バージョン 6.9.x 以上，npm は，バージョン 3.x.x 以上が必要なので，「sudo node -v」と「sudo npm -v」を実行して，バージョンを確認する．

   sudo node -v
   

   その実行結果例

   

   sudo npm -v
   

   その実行結果例

   
2. Angular CLI のインストール

   Angular CLI は，Angular のためのコマンドライン・インタフェース）

   端末を開き、次のコマンドを実行. 「-g」は「グローバル」という意味．

   sudo npm install -g @angular/cli
   

   
3. Angular CLI のインストール終了の確認

   エラーメッセージが出ていないこと．

   

Angular アプリを作ってみる

https://angular.io/guide/quickstart の記載をなぞり、 Angular アプリを作ってみる

1. プロジェクトの新規作成

   ここでのプロジェクト名: my-app

   端末を開き、次のコマンドを実行.

   ng new my-app
   

   
2. 終了の確認

   エラーメッセージが出ていないこと．

   
3. Angular アプリの起動

   端末で，次のコマンドを実行.

   cd my-app
   ng serve --open
   

   
4. 端末で， エラーメッセージが出ていないことを確認．
   
5. 自動で Web ブラウザの画面が開くので確認

   先ほど「--open」を指定したのは「Webブラウザを開く」という指定． URLが「http://localhost:4200/」になっていることを確認．

   
6. 試しに ~/my-app/src/app/app.components.tsを書き換えてみる

   これは TypeScript のプログラムになっている

   
7. Web ブラウザの表示が自動で変わるので確認
   
8. src の下に html, css, ts ファイルや、設定ファイル（.json）などがある