Angular4を活用した案件開発を模索中。一旦Macにて1から開発環境を作ったので個人的にメモ。
Angularとは
Googleと個人や企業のコミュニティによって開発されている、フロントエンドWebアプリケーションフレームワーク。
SPA方式でのWebアプリケーション開発の他、ionicなどのcordovaハイブリッドアプリにも利用されている。
なお、2.0からコードベースをTypeScriptに変更している。
構築する端末などの前提
- 開発端末→Mac
- OS → OS X (Sierra)以上
- nodejsのパッケージマネージャはnを利用。バージョンは6.10.3をインストール。
- こちらの内容を参考にしてます。 Angular CLI QUICKSTART
インストール手順
brewおよびbrew caskをインストール(MacOS用パッケージマネージングツール)
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew tap caskroom/cask
nodejsのインストール
# nのインストール(nodejsのバージョン管理)
brew install n
#nodejs(6.10.3)のインストール
n 6.10.3
angular cliのインストール
npm install -g @angular/cli
開発エディタ(visual studio code)をインストール
brew cask install visual-studio-code
サンプルを動かす
ng new my-app
cd my-app
ng serve --open
app works!と出ればOK
ちょっとだけいじって見る
app works!と出た画面をいじる。
#vscodeにて起動
code my-app
app.component.tsにあるtitleの部分を書き換えてみる
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My First Angular App';
}
色とフォントの種類、サイズをいじってみる
src/app/app.component.css
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
開いていたブラウザ上でリアルタイムに正しく反映されていることを確認
この後の予定
チュートリアルを一通りやってみる。
Angular公式チュートリアル