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にアクセスすると、以下のような表示がされます。
