Angular概要: インストール

前提

ドキュメント

Angularのバージョン

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

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

Angularとは

コンポーネントを階層的に組み立てていく開発方法

コンポーネントの例

コンポーネントを構成するファイル(開発時)

これらは本番用ビルドでHTML・JavaScript・CSSファイルになる。

TypeScript

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ライブラリのインストール)をすることから始まる

アップデート

npm update @angular/cli@8

開発の流れ

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

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

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

ワークスペース作成

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

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

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

cd hello-angular/

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

ワークスペース側の依存バージョン確認

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.

アップデート

ng update @angular/cli @angular/core

ワークスペースの内容: プロジェクトと同時作成のとき

.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

開発用サーバを起動

# ポート変更は--port
ng serve

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

アクセス: http://localhost:4200

最初のコンポーネント(自動生成): 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ソース

これでブラウザ表示は「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>

本番のためのビルド

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の例

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