概要


前提


Angularとは

クライアントサイドのアプリ

シングルページのアプリ

  1. 初回アクセス: どんなルートもindex.htmlをレスポンス (サーバ対応必要)
    • URLそのまま (リダイレクトではなく)
    • 例: https://example.com/any/route => index.html
  2. 以降: アプリ内のルーティング (前後ボタン有効)
    • 別ルート => URL書き換え: index.htmlを再取得せず
    • (APIにアクセスして、データ表示)

開発方法


メジャーバージョン

最新: v10


コンポーネント

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

これらはコンパイルで、HTML・JavaScript・CSSファイルになる。


TypeScript


ngコマンド自体のインストール

# v10をインストール
npm install -g @angular/cli@10

# バージョン確認
ng version

Angular CLI: 10.0.1
Node: 12.17.0

ngコマンド自体のアップデート

npm update -g @angular/cli

開発の流れ

  1. ワークスペース作成: ng new
  2. プロジェクト追加: ng generate application
  3. 開発用サーバ起動: ng serve
    • 編集保存 => リアルタイム自動コンパイル(サーバ再起動不要)
    • テキストエディタでも開発できる
  4. コンポーネント作成: ng generate component

ワークスペース


プロジェクト


ng new: ワークスペース作成

WORKSPACE=my-angular # 例
ng new $WORKSPACE --create-application=false --defaults

# ディレクトリができる。以降は中で作業
cd $WORKSPACE

ng generate application: プロジェクト追加

PROJECT=hello-angular # 例
ng generate application $PROJECT --defaults

ng serve: 開発用サーバを起動

ng serve $PROJECT

# これ以降もコンパイルが成功する都度、標準出力に、
: Compiled successfully.

AppComponent: 最初のコンポーネント(自動生成)


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>

app.component.css: 編集

h1 { color: red; }

トップページのHTML: 開発用サーバ

<!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" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>

JavaScriptで動く


ng build: 本番用ビルド

ng build $PROJECT --prod

出力ファイル例

3rdpartylicenses.txt
favicon.ico
index.html
main-es2015.4e4813eeb328ad305006.js
main-es5.4e4813eeb328ad305006.js
polyfills-es2015.442fa3cc45520cc0d518.js
polyfills-es5.abdd41dcd206a6689f72.js
runtime-es2015.0811dcefd377500b5b1a.js
runtime-es5.0811dcefd377500b5b1a.js
styles.3ff695c00d717f2d2a11.css

index.html: 本番用

<!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">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
  <app-root></app-root>
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script>
<script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script>
<script src="polyfills-es5.abdd41dcd206a6689f72.js" nomodule defer></script>
<script src="polyfills-es2015.442fa3cc45520cc0d518.js" type="module"></script>
<script src="main-es2015.4e4813eeb328ad305006.js" type="module"></script>
<script src="main-es5.4e4813eeb328ad305006.js" nomodule defer></script>
</body>
</html>

ブラウザが区別してフェッチ・ロード: scriptタグ


サーバ起動: ビルドしたファイルを試す

Expressの例

# ワークスペースで
npm install express

作成: app.js

const project = process.env.PROJECT // 環境変数PROJECT: プロジェクト名
const port = process.env.PORT || 3000 // ポート
const express = require('express')
const app = express()

app.use(express.static(`${__dirname}/dist/${project}`))
app.listen(port, () => console.log(`http://localhost:${port}`))

// どんなルートもindex.html: https://example.com/any/route => /index.html
app.use((req, res) => res.sendFile(`${__dirname}/dist/${project}/index.html`))

起動

PROJECT=hello-angular node app.js