Angular × Angular material × 入門

この記事の目的

この記事は、
Angularの入門をした時のメモ
を目的としています。

要約

Angular CLIを使って
Angular プロジェクトをつくった。

そんな内容のメモ。

本題

Angular プロジェクトの作成

Template作成時、Visual Studioのテンプレートで作ると、ルーティングや、HTTPClientを使える状態になっているものを作ることができます。しかし、Styleの設定がCSSであったり、Angular Materialをインストールしようとするとうまくいかないことがあるので、グローバルにインストールしたAngular CLIを利用して、Angular標準の機能を使って作成していきます。
以下、作業手順です。

//①scss, routingの設定を入れた状態のテンプレートの作成
ng new <project name>  --style scss --routing
	
//②お試し実行
npm install
npm start

Angular Materialの設定

公式のドキュメントに従い、AngularMaterialをインストールします。

material.angular.io

途中、「Step 3: Import the component modules」のところで、コンポーネントを設定することになりますが、後々のことを考えて、まとめたModuleを作成します。
このModuleを作って、それぞれのコンポーネントの代わりにapp.modules.tsにimportします。
以下、コピペ用。

import {NgModule} from '@angular/core';
import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
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 {MatChipsModule} from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
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 {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar';
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 {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree';
@NgModule({
  exports: [
    A11yModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class AppMaterialModule { }

設定ができたら、適当なコンポーネントを使って正しくAngular Materialの機能が利用できることを確認します。コンポーネントの実装方法は、公式ドキュメントに記載されているので、それを利用します。
自分の環境では、以下の2つで動作確認をしました。

Card↓
https://material.angular.io/components/card/overviewAngular Material UI component library

Expansion Panel↓
Angular Material UI component library

componentの追加

以下のコマンドを使って遷移先のコンポーネント一式を追加します。※ここでは、URLで画面遷移できるようにする設定までをメモしておきます。

ng generate component <Component Name>

generateしたら、指定した名前のComponentがフォルダと一緒に作成されます。さらに、app.module.tsファイルに、新しく作ったComponentをimportしてくれます。そしてdeclarationにも設定してくれるので、あとは、適切なルーティング設定をruterにするだけで新しく作成した画面をアプリ起動時に利用できるようになります。
自分の環境では、Component作成後に、以下のようなルーティングの設定を追加しました。

const routes: Routes = [
  {
    path: "modal",
    component: ModalSampleComponent
  },
  {
    path: "http",
    component: HttpClientSampleComponent
  },
　//追加
  {
    path: "layout",
    component: LayoutSampleComponent
  },
];

まとめ

いきなりVisual StudioのAngularTemplateを使ってスタートダッシュするより、まずは、そのままのAngular CLIを使ってプロジェクトを作っていくほうが、スムーズにできました。なぜVisual studioのほうでは、Angular Materialがうまくいかなかったのか、SCSSを導入するにはどうしたらいいのか・・・という点が未解決なので、いずれやっていきたいと思います。

今回の入門編をとおして、以下の２つの方法で作業が進められそうだということがわかりました。
①VisualStudioでプロジェクトを”いったん”作り、あとからAngularの部分だけAngular を使って作り直す方法

②Visual studioでは、APIサーバだけ作り、Angualr は別のプロジェクトとしてAngular CLIから作成する方法（←個人的なおすすめ）

コードはGitHubにアップしています。
github.com