トップページ -> 研究道具箱と教材 -> Linux のインストール,設定,運用保守,便利な使い方 -> Ubuntu で Angular アプリを作ってみる
[サイトマップへ]  

Ubuntu で Angular アプリを作ってみる

Angular は,モダンWebを手軽に作ることができるフレームワークである.

Ubuntu で Angular アプリを作ってみる(関係するソフトのインストールから,アプリの動作確認まで)手順を説明する

先人に感謝

キーワード:Angular, Web フレームワーク, n のインストール, Angular CLI のインストール, Angular アプリを作ってみる, Web サーバ, TypeScript, Ubuntu


前準備

n のインストール

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

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

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

    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)などがある