Angular

Angular
- Augular APIリファレンス
- LEARNING ANGULAR
- TUTORIAL: TOUR OF HEROES ... まずはこれで学習しよう！

GoogleのAngular チームによって開発が進められているウェブアプリケーションプラットフォーム
プログラミング言語としては、マイクロソフトが設計及び開発した TypeScript を使う
パッチは毎週リリースする予定で、マイナーバージョンは毎月、そして6カ月ごとにメジャーリリースを行う

Angular CLI †

Angular CLI

↑

モダンWebとは †

サーバ集中型の処理をブラウザ側へ分散する
通信待ちのない高速な画面遷移、ネットワーク圏外での利用、サーバやネットワークの不可軽減を実現
データやプログラムはサーバで集中管理

↑

メリット †

サーバとの通信頻度が減少
- サーバとネットワークの負荷軽減によるインフラコストの削減
- ユーザ数増加に伴うレスポンス低下の緩和
ブラウザ内にデータとプログラムを保存できる
- ネットワーク圏外での利用が可能
- 通信待ちのない高速な画面遷移（例：Googleマップ）
- モバイル利用時もストレスなく利用できる
ブラウザ内でデータ処理ができる
- 容量制限のないデータ表示（無限スクロール）
- グラフなどを使ったデータのビジュアル表示
- サーバへ送信する前のデータ縮小処理
- 処理結果を即座に返すアプリ

↑

Angularの特長 †

コンポーネント、DI（依存性の注入）、データバインドを独自の方法で実装
開発ツールやテストツールを統合し、作業の自動化で開発時間の短縮を図っている

↑

コンポーネント †

一般的に「Web Components」と呼ばれる実装技術
一画面で使用されるHTML、CSS、TypeScriptを分割してコンポーネント（部品化）
コンポーネント化により大規模開発における開発生産性と保守性の向上を実現
これにより、同じ表示部分を持つ別画面での再利用や複雑な画面の機能分割が可能に

Angularは、コンポーネントを実現するため、独自の方法でCSSの適用範囲をコンポーネント内に限定するカプセル化機能を実装している

↑

DI（依存性の注入） †

部品化を進めると面倒になってくる依存クラスの管理を容易にする
依存クラスのインスタンス管理
- 初めて呼び出されたときに依存クラスのインスタンス化を行う
- コンポーネントの生成・破棄のライフサイクルとは関係なく、依存クラスのインスタンスを保持
- 依存クラスが必要なコンポーネントの生成時に、保持したインスタンスを渡す
- 依存クラス自身も依存クラスをDIできるので、複雑な依存関係にあるクラスのインスタンス化もDIが解決してくれる

Angular2のDIを知る

↑

データバインド †

データの入出力に関連するコードを大幅に減らす
Angular独自の拡張HTMLであるテンプレートシンタックスで定義
データの出力を行う「片方向データバインド」と、データの入出力両方を行う「双方向データバインド」の2種類がある

↑

Angular開発の作業項目 †

Angular CLIを使えば、コマンドで下記の大部分を行ってくれる

開発開始前
- Angular本体と依存モジュールの入手 ... package.jsonの作成、nom install 実行
- プロジェクトの雛形作成 ... 公開されているAngularプロジェクトの雛形をコピーして加工または手作業で新規作成
- 開発ツールの準備
  - TypeScriptコンパイラのインストールと設定
  - Webpackモジュールハンドラのインストールと設定
  - Karma単体テストツールの実行環境構築
  - Protractor E2E（End to End）テストツールの実行環境構築
  - 開発用Webサーバのインストールと設定
プログラム実装中
- TypeScriptの文法とコード規約遵守のチェック
- TypeScriptからJavaScriptへ変換
- テスト用実行モジュール生成とデバッグ用マップファイルの作成
- index.htmlのscript要素の編集
- 開発用Webサーバへコンテンツ転送と起動
テスト時
- 単体テストの実施と結果確認
- E2Eテストの実施と結果確認
リリース時
- コンポーネントのHTMLテンプレートの事前コンパイル
- 不要コード、重複コードの削除
- モジュールの圧縮

↑

推奨UIライブラリ †

ANGULAR RESOURCES ... UI Components の項目を参照

ngx-bootstrap
ng-lightning
PrimeNG
SemanticUI
Vaadin
Wijmo
OnsenUI ... モバイルアプリ用

↑

パッケージ管理 †

パッケージ管理ツールとして npm を使用
依存情報は package.json に記述
必須ライブラリ（dependencies）と開発時に必要な依存ライブラリ（devDependencies）に分けて定義
- 細かなバージョン指定も可能（メジャーまで指定／マイナーまで指定／パッチまで指定）
moduleのローカルインストール時に --save オプションを付けると、そのモジュール情報がアプリケーションのプロジェクトフォルダにある package.json に自動追記される

↑

Angular CLI †

↑

Angularの構成 †

↑

ファイル構成 †

dist ... ビルド出力先
e2e ... E2Eテスト
node_modules ... npmモジュール
src ... ソースコード
- app ... ソースコード
  - app.component.css ... コンポーネントが読み込むCSS
  - app.component.html ... コンポーネントが読み込むHTMlテンプレート
  - app.component.spec.ts ... 単体テストファイル
  - app.component.ts ... コンポーネントファイル
  - app.module.ts ... モジュールファイル
  - index.ts ... appフォルダ内のインデックス
- assets ... ビルド加工なしで出力するファイル
- environments ... 開発環境、本番環境の区別
- index.html ... index.html の雛形
- main.ts ... アプリの起動ファイル
- styles.css ... アプリ全体に適用するCSS
- test.ts ... 単体テスト
- tsconfig.json ... TypeScriptのコンパイル条件設定
- typings.d.ts ... TypeScriptのための型情報
.editconfig ... Editor設定
.gitignore ... git管理対象外設定
angular-cli.json ...
karma.code.js ... 単体テスト設定
package.json ... npmパッケージ設定
protactor.conf.js ... E2Eテスト設定
README.md ... Readmeファイル
tslint.json ... コード規約ルール設定

↑

処理の流れ †

index.htmlの読み込み
src/main.tsの読み込み
src/app/index.tsの呼び出し
src/app/app.module.tsの呼び出し
src/app/app.component.tsの呼び出し
src/app/app.component.htmlの読み込み
src/app/app.component.cssの読み込み

↑

Angular頻出クラス †

↑

OnInit? †

データバインドされた入力値を初期化後に実行

↑

Router †

↑

Observable †

Observable object

↑

統合開発環境 †

↑

Visual Studio Code †

↑

プロジェクト作成からVisual Studio Codeで開発を始めるまでの流れ †

Visual Studio Code をインストール
Visual Studio Code に拡張機能「Debugger for Chrome」をインストール
プロジェクト群を配置するフォルダで以下を実行
```
$ ng new [プロジェクト]
```

以下の内容で、[プロジェクト]/.vscode/launch.json ファイルを作成

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}/dist",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}/src/app",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        }
    ]
}

Visual Studio Codeで [プロジェクト] のフォルダを指定して開く

[プロジェクト]のフォルダで以下のコマンドを実行
```
$ npm start
```

デバッグ実行
Chromeの「デベロッパーツール」で実行状況がモニタできる

↑

WebStorm? †

↑

Chrome Developer Tools †

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

主に使う機能は以下の通り
- HTMLのデバッグ
- CSSのデバッグ
- プログラム（JavaScript, TypeScript）のデバッグ
- 通信のデバッグ
- コンソール表示
- ブラウザ内の保存データ表示
- モバイルデバイスの表示シミュレーション

↑

Angury †

Angury

Angularのコンポーネントをデバッグするために作られた専用ツール（Cheomeの拡張機能）
コンポーネントのプロパティ表示とプロパティの値を手動で変更して表示の変化をリアルタイムに確認できる
コンポーネントの変更や調整を繰り返すときに役立つ

↑

テスト †

↑

Karma †

↑

E2E †

↑

リリース †

以下のコマンドでビルド => dist フォルダにファイルが作られる
```
$ ng build --prod -bh [Webサーバ上のパス]
```
- http://hoge.com/app/test01/ 上に配置するなら -bh /app/test01/ ... これを指定しないと正常に動作しない
dist フォルダのファイルをWebサーバにアップロード

↑