Angular概要: インストール
- Hello Worldアプリを動かす
- コンポーネントクラス・テンプレート・スタイルの連携
- 本番用ビルド
前提
- Angular v8
- Node.js v10.9.0以上(インストール済み)
ドキュメント
Angularのバージョン
バージョン1までのAngularJS
と呼ばれたものとは全く互換性がない。
- 半年ごとのメジャーバージョン・リリース
- メジャーバージョンのサポート期間は1年半
- v8: 2019年5月から2020年11月
アプリ更新は、続くメジャー・バージョンを飛び越えないで試すこと推奨。
Angularとは
- フルスタックのWebアプリケーションフレームワーク
- クライアントサイド、シングルページアプリケーション
- コンポーネントを階層的に組み立てていく
- Angularコマンド
ng
での初期化・各種ファイル生成が便利
コンポーネントを階層的に組み立てていく開発方法
コンポーネントの例
- 一つのページ(親コンポーネント)
- ページの一部分(子)
- そのまた一部分(孫)
コンポーネントを構成するファイル(開発時)
- クラス: TypeScript
- テンプレート: HTMLをベースにAngularマークアップを混ぜたもの
- スタイル: CSSなど
これらは本番用ビルドでHTML・JavaScript・CSSファイルになる。
TypeScript
- JavaScriptを拡張し、変数などの型(Type)を限定できる
- コンパイル時点で型などのエラーを確認でき、バグに強い
npmでAngular CLI(ngコマンド)をインストール
@angular/cli
パッケージ
- グローバルにインストール
# 末尾に@8でバージョン8指定
npm install --global @angular/cli@8
# バージョン
ng version
Angular CLI: 8.3.4
Node: 10.16.3
以降、開発はng
コマンドでアプリの初期化(Angularライブラリのインストール)をすることから始まる
アップデート
- グローバルにインストールした
ng
コマンドの更新 - 後のワークスペース依存の方の更新とは違う
npm update @angular/cli@8
開発の流れ
- ワークスペースとプロジェクト作成:
ng new
- 開発用サーバ起動:
ng serve
- コンポーネント作成:
ng generate component
- 自動コンパイル:
- 編集保存でWebページに自動反映(サーバ再起動不要)
統合開発環境だけでなく、VIMやAtomなどテキストエディタでも開発できる。
ワークスペースとプロジェクト
- ワークスペース:
ng new
で新規作成されるディレクトリ- プロジェクトやライブラリ(
node_modules/
)など一切が入る
- プロジェクト:
- 一つの独立したアプリケーション
- ワークスペースに複数のプロジェクトを作れる(ライブラリ共有)
ワークスペース作成
ng new
コマンドでワークスペースを作成する。同時に最初のプロジェクト(アプリケーション)も作るケース。
# --defaultsがないと、途中で質問に回答
# hello-angularという名前
ng new hello-angular --defaults
以降のng
コマンドは必ずワークスペースで行う。
cd hello-angular/
ワークスペースのAngularアップデート
- 特定のワークスペースが依存するAngularを更新
- グローバルにインストールした
ng
コマンドの更新とは違う
ワークスペース側の依存バージョン確認
- ワークスペース内で実行
ng version
# ワークスペース側が古い例
Your global Angular CLI version (8.3.4) is greater than your local
version (8.1.0). The local Angular CLI version is used.
アップデート
- gitでコミットしてきれいにしてから
ng update @angular/cli @angular/core
package.json
も更新される
ワークスペースの内容: プロジェクトと同時作成のとき
.editorconfig
.git/
.gitignore
README.md
angular.json
browserslist
e2e/
karma.conf.js
node_modules/
package-lock.json
package.json
src/
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json
node_modules/
: ワークスペースのサイズのほとんどを占めて、358MB程度src/
: すぐ動くウェルカムアプリができている
開発用サーバを起動
- ファイル編集で自動コンパイル・リアルタイム反映
# ポート変更は--port
ng serve
# これ以降もコンパイルが成功する都度、標準出力に、
ℹ 「wdm」: Compiled successfully.
アクセス: http://localhost:4200
最初のコンポーネント(自動生成): AppComponent
- コンポーネントは
src/app/
以下に作っていく AppComponent
: コンポーネント階層のルート- app.component.ts: コンポーネント(のクラス)
- app.component.html: テンプレート
- app.component.css: スタイル
src/index.html
で<app-root></app-root>
で組み込まれている
コンポーネント編集: app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular!' // <= テンプレートはクラスのプロパティを参照できる
}
テンプレート編集: app.component.html
<h1>Hello, {{ title }}</h1>
{{ title }}
の部分がAngularマークアップの一種- コンポーネントクラスのtitleプロパティ値が挿入される
スタイル編集: app.component.css
h1 { color: red; }
- このコンポーネントのみに影響
トップページのHTMLソース
これでブラウザ表示は「Hello, Angular!」となる。
JavaScript読込ばかりのbody要素
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime.js"></script>
<script src="polyfills-es5.js" nomodule></script>
<script src="polyfills.js"></script>
<script src="styles.js"></script>
<script src="vendor.js"></script>
<script src="main.js"></script>
</body>
</html>
- JavaScriptで動く: 予め完成したHTMLソースではない
- 6個のJavaScript読込: 必要なモジュールなど
main.js
: コンポーネントなどが含まれる
- 開発用ビルド: 本番ビルドとは多少異なる
- 開発者はブラウザが得るHTMLやJavaScriptの全体を直接編集するのではない
- コンポーネントなどを編集すると自動で
main.js
などに反映する
本番のためのビルド
ng serve
は開発用サーバのため、Ctrl+cで止めておく- 開発用サーバでは内部的なコンパイルのため、ワークスペースのファイルとしては残らない
ng build
によりファイルとして保存できる--prod
を付けて、本番用に最適化されたコンパイルを行う
ng build --prod
dist/
以下にコンパイルされる
3rdpartylicenses.txt
favicon.ico
index.html
main-es2015.a052836e42a662f925d1.js
main-es5.5d44a4a5fb1f53ecad61.js
polyfills-es2015.e954256595c973372414.js
polyfills-es5.405730e5ac8f727bd7d7.js
runtime-es2015.858f8dd898b75fe86926.js
runtime-es5.741402d1d47331ce975c.js
styles.3ff695c00d717f2d2a11.css
本番のためのサーバ起動
ng serve
は開発用サーバのため、別途Webサーバを起動してビルドしたアプリを試す。
Expressの例
- ワークスペースにExpressをインストール
dist/hello-angular/
にビルドされたコンテンツを動かす
# ワークスペースで
npm install express
作成: run-express.js
#!/usr/bin/env node
const express = require('express')
const app = express()
app.use(express.static('./dist/hello-angular'))
const port = 3000
app.listen(port, () => {
console.log('http://localhost:' + port)
})
# 起動
node run-express.js