Angular 入門編: MacにAngularの開発環境構築

nodebrewのインストール

brew install nodebrew

brewコマンドでインストールできます。

nodebrew -v

nodebrewコマンドを実行しコマンドが表示されれば正しくインストールできています。

export PATH=$HOME/.nodebrew/current/bin:$PATH

~/.zshrcに上記の設定を追加します。

source ~/.zshrc

sourceコマンドで反映したら完了です。

nodeのインストール

nodebrew install-binary stable

nodebrewコマンドでnodeの安定バージョンをインストールします。

nodebrew ls

nodebrew lsコマンドを実行しバージョンが表示されたら正しくインストールできています。

nodebrew use 12.13.1

nodebrew useコマンドでインストールされたnodeのバージョンを指定します。

node -v

nodeコマンドで指定したバージョンが表示されればインストール完了です。

Angularのインストール

npm install -g @angular/cli

npmコマンドでAngularのインストールを行います。

ng --version

Angularのバージョンが表示されればインストール完了です。

Angularのプロジェクト作成

ng new angular-test --routing --style scss

ngコマンドでプロジェクト作成していきます。
今回はangular-testというプロジェクトを作成していきます。
プロジェクト作成が完了するとangular-testというディレクトリができます。

Angularの起動

ng serve

ngコマンドで起動することができます。
デフォルトではlocalhostの4200ポートでListenするのでブラウザでアクセスします。
Angularの画面が表示されれば完了です。

ディレクトリ構造

./src
├── app
│   ├── app-routing.module.ts
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts
├── assets
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.scss
└── test.ts

src配下はソースコードを置くディレクトリになります。

./e2e
├── protractor.conf.js
├── src
│   ├── app.e2e-spec.ts
│   └── app.po.ts
└── tsconfig.json

e2e配下はe2eテストコードを置くディレクトリになります。

Angularのコンポーネント作成

ng generate component angular-component

ngコマンドでコンポーネントを作成していきます。
今回はangular-componentというコンポーネントを作成していきます。
src/app配下にangular-componenディレクトリが作成されます。