Angular

目的

SPA3大JavaScriptフレームワークの１つであるAngularを通して、フレームワークを利用した
Javascriptによる開発手法を習得します。

アジェンダ

• Angular とは
• 事前準備
  • インストール
• Angular プロジェクトの作成
  • サンプルアプリの作成
  • 足し算アプリの作成
  • 業務アプリの作成
  • AWSサービスを利用したアプリの作成

Angular とは

JavaScriptのMVCフレームワーク
公式サイト
ngularjs.org

ページではコンポーネントを利用する
ページにはコンポのデータを{{プロパティ}}の形式で差し込める

Angularの開発の流れ

• HTMLやCSSを編集する
• コンポーネントを追加する
• 変数の値を表示する
• ルーティングモジュールを追加する
• サービスを作成する
• フォームを作成する
• モーダルダイアログを表示する
• 簡単な REST-API サーバを作る
• RxJS で非同期通信を行う
• デザインを適用する
  　- マテリアルを使う方法

事前準備

開発環境の構築　※未稿

• Node.js
  以下参考
  https://miya-system-works.com/blog/detail/179

https://nodejs.org/ja/
16.14.2 LTS
ダウンロードした以下のファイルを実行
node-v16.14.2-x64.msi
→再起動要
インストールされたかどうかの確認
node -v

• VSCode

Angular プロジェクトの作成

開発用のフォルダを用意する

開発用のプロジェクトを格納するルートフォルダを決めます。
今回は、以下のangularをルートにし、今後はそちらにプロジェクトを作成していきます。

D:\dev\angular

Angular CLIのインストール

Angular CLI をインストールします。

npm install -g @angular/cli

※パッケージインストール グローバル
グローバルにパッケージをインストールする。コマンドをインストールした場合はパスを指定しなくてもどのディレクトリでも動くようになる。

npm install -g パッケージ名
npm install --global パッケージ名

バージョン確認

ng --version

サンプルアプリの作成

ルートフォルダに移動します。

cd D:\dev\angular

以下ののコマンドでプロジェクトを作成します。
ng new プロジェクト名

ng new sample

補足
Would you like to add Angular routing?→y
Which stylesheet format would you like to use? ⇒SCSS

プロジェクトを開く

vscode で 作成したsampleプロジェクトを開きます。

cd sample
code .

プロジェクト構成要素の説明

作成されたプロジェクトファイルの構成は以下になります。

プロジェクトフォルダの構成内容

TH	TH
e2e	テスト用ファイル配置フォルダ
node_modules	Angularライブラリ
src	ソースフォルダ
.editorconfig	Angularの設定ファイル
.gitignore	Angularの設定ファイル
angular.json	Angularの設定ファイル
karma.conf.js	Angularの設定ファイル
package.json	Angularの設定ファイル
package-lock.json	Angularの設定ファイル
EADME.md	Angularの設定ファイル
tsconfig.app.json	Angularの設定ファイル
tsconfig.json	Angularの設定ファイル
tsconfig.spec.json	Angularの設定ファイル
tslint.json	Angularの設定ファイル

srcフォルダの構成内容

ページ構成ファイルの構成内容

Angularは次の３ファイルでページが構成されます。

TH	TH
テンプレートファイル	TD
TypeScriptファイル	TD
CSSファイル	TD

最初に表示されるページ構成
index.html
main.ts
style.css

ビルド～テストサーバでの動作確認

カレントフォルダをプロジェクトフォルダに移動し、テストサーバ実行することで
作成したアプリケーションの実行確認ができます。

cd calculator
ng serve --open

足し算アプリの作成

簡単な足し算アプリ作成を通して、プロジェクトの構成および開発手順を確認します。
Angularのフォームにはテンプレート駆動フォームとリアクティブフォームの２種類がありますが、今回は、リアクティブフォームを使用した入力フォームの作成を行います。
更に、FormBuilderを使用します。
FormBuilderは、リアクティブフォームにおいてFormControlを簡単に生成する機能です。

開発の流れ

★アプリの構成図を差し込む

1. HTMLやCSSを編集する
2. コンポーネントを追加する
3. 変数の値を表示する

コンポーネントの作成
xxxコンポーネントを作成します。

ng g c calculator

作成したコンポーネントを表示します。
ルートコンポーネントからコンポーネントを呼び出します。

app.component.module.html

 ↓コンポーネントのselectorに書かれた名称を使用
 <app-translate2-form></app-translate2-form>
 

では、計算機能を組み込んでいきます。

コンポーネントの作成

テンプレートの作成

業務アプリの作成

マスターデティル形式の業務で使用されるアプリケーションを作成します。

作成するアプリケーションの概要

画面
ログイン
社員一覧
社員登録

開発の流れ

★アプリの構成図を差し込む

1. モックの作成
2. プロジェクトの作成
3. コンポーネントを追加する
4. 変数の値を表示する

プロジェクトの作成

ルートフォルダに移動します。

cd D:\dev\angular

以下ののコマンドでプロジェクトを作成します。

ng new company-member-manage

補足
Would you like to add Angular routing?→y
Which stylesheet format would you like to use? ⇒SCSS

プロジェクトを開く

vscode で 作成したcompany-member-manageプロジェクトを開きます。

cd company-member-manage
code .

Materialモジュールのインストール

インストールするプロジェクトに移動して、以下のコマンドを入力します。

cd D:\dev\angular\company-member-manage
ng add @angular/material

実行内容
The package @angular/material@13.3.9 will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.i
o?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1140 bytes)
√ Packages installed successfully.
UPDATE src/app/app.module.ts (502 bytes)
UPDATE angular.json (3401 bytes)
UPDATE src/index.html (578 bytes)
UPDATE src/styles.scss (181 bytes)

Material部品のインポート

マテリアルモジュールを使う場合、appモジュールにインポートする必要があります。
以下、MatButtonModuleの使用例。

app.module.ts

import { MatButtonModule } from '@angular/material/button';

@NgModule({
	imports: [
		MatButtonModule,
		MatTableModule,

Material部品をまとめたモジュールの作成

部品を一つ一つインポートするのは手間なので、Material部品をまとめたモジュールを作成します。

ng g module material

以下に作成される
D:\dev\angular\company-member-manage\src\app\material
material.module.ts

material.module.tsにインポート文を追加する

import { MatButtonModule } from '@angular/material/button';

material.module.tsの@NgModuleのimports,exportsに追加する

imports・・・Matxxxを読み込んでこのモジュール内で使えるようにする
exports・・・Matxxxを読み込んだ先ののモジュール内で使えるようにする

その他のモジュールも同様に追加する。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTableModule } from '@angular/material/table';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatButtonModule,MatButtonToggleModule,MatCardModule,MatCheckboxModule,MatDatepickerModule,MatDialogModule,MatDividerModule,MatFormFieldModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,MatNativeDateModule,MatPaginatorModule,MatProgressSpinnerModule,MatRadioModule,MatSelectModule,MatSidenavModule,MatTableModule,MatToolbarModule,MatTooltipModule
  ],
  exports: [
    MatButtonModule,MatButtonToggleModule,MatCardModule,MatCheckboxModule,MatDatepickerModule,MatDialogModule,MatDividerModule,MatFormFieldModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,MatNativeDateModule,MatPaginatorModule,MatProgressSpinnerModule,MatRadioModule,MatSelectModule,MatSidenavModule,MatTableModule,MatToolbarModule,MatTooltipModule
  ]
})
export class MaterialModule { }

app.module に作成したMaterialModuleを追加する

app.module.ts
MaterialModule を imports に追加する

import { MaterialModule } from './material/material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

index.html を修正する

以下の３行を削除して、ローカルのマテリアルを参照するように修正する。
※削除するだけでいい。

index.html

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Material icon をローカルにインストールする

以下のコマンドを実行してMaterial iconをインストールします。

cd D:\dev\angular\company-member-manage
npm install material-design-icons

インストールパスをangular.jsonに追加する

"build": {"options": {"styles": [] に以下を追加
"test": {"options": {"styles": [] にも以下を追加

angular.json

            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/material-design-icons/iconfont/material-icons.css",←★
              "src/styles.scss"
            ],

reset.css のインストール

異なるブラウザの解釈の違いをなくすためにのスタイル定義

cd D:\dev\angular\company-member-manage
npm install --save reset-css

"build": {"options": {"styles": [] に以下を追加
"test": {"options": {"styles": [] にも以下を追加

最初に読み込まれるように先頭行に追加する

angular.json

            "styles": [
              "./node_modules/reset-css/reset.css",　←★
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/material-design-icons/iconfont/material-icons.css",
              "src/styles.scss"
            ],

AWSサービスを利用したアプリの作成