はじめてのAngular4

nvmをインストール

Homebrewでnvmをインストールをします。

brew install nvm

nvmのディレクトリを作成します。

mkdir ~/.nvm

.bash_profileで上記ディレクトリの変数を設定します。

export NVM_DIR="$HOME/.nvm"
. "/usr/local/opt/nvm/nvm.sh"

nvmを使って、nodeの6.11.2をインストールします。

nvm install 6.11.2
nvm alias default 6.11.2

Angular CLIをインストール

npmを使って、Angular CLIをインストールします。

npm install -g @angular/cli

インストールの確認をする為に、Angular CLIのバージョンを確認します。

ng -v

以下のように出力がされました。

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.2
node: 6.11.2
os: darwin x64

Angularプロジェクトの作成

Angular CLIを使って、プロジェクトを作成します。

ng new first-app

上記コマンドを作成すると以下のような出力がされ、雛形ディレクトリ、ファイルが作成されます。

installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'first-app' successfully created.

雛形のプロジェクトを試してみます。 作られたfirst-appディレクトリに移動して、「npm start」コマンドを実行し、バンドルされたサーバーで動かしてみます。

cd first-app/
npm start

ブラウザで、http://localhost:4020にアクセスすると、以下のような表示がされます。