Angular概要: インストール

Hello Worldアプリを動かす
コンポーネントクラス・テンプレート・スタイルの連携
本番用ビルド

前提

Angular v8
Node.js v10.9.0以上(インストール済み)

ドキュメント

Angularのバージョン

バージョン1までのAngularJSと呼ばれたものとは全く互換性がない。

半年ごとのメジャーバージョン・リリース
メジャーバージョンのサポート期間は1年半
v7: 2020年4月まで
v8: 2019年5月から2020年11月

アプリ更新は、続くメジャー・バージョンを飛び越えないで試すこと推奨。

Angularとは

フルスタックのWebアプリケーションフレームワーク
シングルページアプリケーションも開発しやすい
「コンポーネント」を組み合わせていく
Angularコマンドngでの初期化・組み立てが便利

コンポーネントを組み合わせていく開発方法

コンポーネントの例

一つのページ
ページの一部分の機能

コンポーネントを構成するファイル

クラス: TypeScript
テンプレート: HTMLとAngularマークアップの組み合わせ
スタイル: CSSなど

TypeScript

JavaScriptを拡張し、変数などの型(Type)を限定できる
コンパイル時点で型などのエラーを確認でき、バグに強い

開発時は、Angularによる自動コンパイルで、Webページに自動反映が便利。

npmでAngular CLI(ngコマンド)をインストール

`@angular/cli`パッケージ

# 末尾に@8でバージョン8指定
npm install --global @angular/cli@8

# バージョン
ng version

Angular CLI: 8.0.1
Node: 10.15.3

以降、開発はngコマンドでアプリの初期化(実際のAngularライブラリのインストール)をすることから始まる

Angular CLI(ngコマンド)のアップデート

ワークスペースの依存のではなく、npmでのアップデート

npm update @angular/cli@8

開発の流れ

ワークスペースとプロジェクト作成: ng new
開発用サーバ起動: ng serve
コンポーネント作成: ng generate component
自動コンパイル:
- コンポーネント編集保存ですぐ反映(サーバ再起動不要)

統合開発環境だけでなく、VIMやAtomなどテキストエディタでも開発できる。

ワークスペースとプロジェクト

ワークスペース:
- ng newで新規作成されるディレクトリ
- プロジェクトやライブラリ(node_modules/)など一切が入る
プロジェクト:
- 一つの独立したアプリケーション
- ワークスペースに複数のプロジェクトを作れる(ライブラリ共有)

ワークスペース作成

ng newコマンドでワークスペースを作成する。同時に最初のプロジェクト(アプリケーション)も作るケース。

# --defaultsがないと、途中で質問に回答
# hello-angularという名前
ng new hello-angular --defaults

以降のngコマンドは必ずワークスペースで行う。

cd hello-angular/

ワークスペースの依存Angularのアップデート

ワークスペースで
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