LoginSignup
7
7

More than 5 years have passed since last update.

@dek13i

Angular7 + AngularMaterial 環境構築

Last updated at Posted at 2018-10-29

はじめに

AngularCLIを使って、最近(2018/10/19)出たAngularのバージョン７とデザインフレームワークのAngularMaterialで環境構築していきたいと思います。
基本的には公式通り。(Angular CLI、Angular Material)
(追記）
GitHubにあげた。(AngularMaterialのSchematicsを試しに入れるぐらいまで）
ついでにバージョンが上がってたので記述を7.03から7.04にバージョンアップした。
DemoMaterialApp.gif

環境構築

  • Step1〜Step3:AngularCLIでハローワールドみたいな(Welcome to App！）まで
  • Step4〜Step6:AngularMaterial入れる。
  • (おまけ)Step7〜Step8:AngularMaterialのスキーマ(自動生成されるコンポーネント)を入れて実行する。

Step1.AngularCLI入れる（バージョン確認）

何はともあれAngularCLIを入れる。

(ターミナル)インストールする
$ npm install -g @angular/cli
(ターミナル)現在のバージョン
$ ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.4
Node: 8.11.4
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.4
@angular-devkit/core         7.0.4
@angular-devkit/schematics   7.0.4
@schematics/angular          7.0.4
@schematics/update           0.10.4
rxjs                         6.3.3
typescript                   3.1.3

Step2.プロジェクト作成

demo-material-appとして作成する。
以前まではオプションで--style=scssとかやっていたけど聞かれれる様になったのでそのまま実行する。ルーティングも自動で作成してくれる。
ルーティングはyでスタイルシートはSCSSで作成する。

(ターミナル)プロジェクト作成
$ ng new demo-material-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
  CSS
❯ SCSS   [ http://sass-lang.com   ]
  SASS   [ http://sass-lang.com   ]
  LESS   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]

(・・・省略・・・)

    Successfully initialized git.
$

Step3.実行してみる。Welcome to demo-material-app!

作成したプロジェクトに移動し、実行する。

(ターミナル)移動して実行。
$ cd demo-material-app/
$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

(・・・省略・・・)

ℹ ｢wdm｣: Compiled successfully.

書いてある通り、 http://localhost:4200/ にアクセスし確認する。
Welcome to demo-material-app!

Step4.Angular Materialのインストール

Step3でローカルサーバーを実行中であればCtrl+Cで一度止める。
作成したプロジェクトの場所にいる状態で実行していく。(demo-material-app直下)
必要なものをインストールしていく。

(ターミナル)Materialインストール
$ npm install --save @angular/material @angular/cdk @angular/animations

全部のコンポーネント使いたいので、hammerjsもインストールする。

(ターミナル)hammerjsインストール
$ npm install --save hammerjs

Step5.ファイルを編集していく。スタイル適用。

demo-material-app/srcを編集していく。

  • スタイルを適用する。
    deeppurple-amber、indigo-pink、pink-bluegrey、purple-greenが用意されている。 公式通りにインディゴとピンクのものを適用する。
src/style.scss
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
  • hammerjsをインポートする。
src/main.ts(抜粋)
import 'hammerjs';

(全文)src/main.ts
src/main.ts
import 'hammerjs';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

  • マテリアルアイコンも使いたいので、src/index.htmlのheadタグに加える。
src/index.html(抜粋)
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

(全文)src/index.html
src/index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DemoApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

  • アニメーションのモジュールを入れる
    動きを持ったスタイルにしたい場合、BrowserAnimationsModuleをインポートする。そうでない場合は、NoopAnimationsModuleをインポートする。
src/app/app.module.ts(抜粋)
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
・・・
@NgModule({
  ・・・
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //NoopAnimationsModule,
    AppRoutingModule
  ],
・・・

(全文)src/app/app.module.ts
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //NoopAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step6.マテリアル用のモジュールを作成する。

公式のサンプルソースにもある様な感じのマテリアルのモジュールを作る。

(ターミナル)モジュール作成
$ ng generate module shared/material --flat

実行するとsrc/app/shared/material.module.tsが作成される。
作成したモジュールを下記の様に編集する。

(全文)src/app/shared/material.module.ts
src/app/shared/material.module.ts
import {DragDropModule} from '@angular/cdk/drag-drop';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {NgModule} from '@angular/core';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';

@NgModule({
  exports: [
    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,
    ScrollingModule,
  ]
})
export class MaterialModule {}


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

(おまけ)

Step6まででAngular Materialを利用する準備は整ったので、環境構築としては終了。
Step7ではサンプルモジュール作成して、そこにコンポーネントを入れていく。

Step7.サンプルモジュール作成

公式のマテリアルデザインのセットを利用する。(参考：AngularMaterialのschematics)

  • スタイルの編集
src/styles.scss
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {
    margin: 0;
}

html, body{
    height: 100%;
}
  • モジュール、ダッシュボードのコンポーネント作成。
    ルーティングありでモジュール作成。
    コンポーネントはダッシュボードの物を作成する。似た様な場所に作れば勝手にコンポーネントはモジュールに紐づいてくれる。 (使用するモジュール類も入ってくれて便利すぎて、Step6で作成したshared/material.module.tsを使わずに済んでしまった。)
(ターミナル)モジュール作成
$ ng generate module pages/samples --routing
$ ng generate @angular/material:dashboard pages/samples/sample-dash
  • 作成したsamples-routing.module.tsのルーティングを設定する。
src/app/pages/samples/samples-routing.module.ts(抜粋)
import { SampleDashComponent } from './sample-dash/sample-dash.component';
・・・
const routes: Routes = [
  { path: '', component: SampleDashComponent }
];
・・・

(全文)src/app/pages/samples/samples-routing.module.ts
src/app/pages/samples/samples-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SampleDashComponent } from './sample-dash/sample-dash.component';

const routes: Routes = [
  { path: '', component: SampleDashComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SamplesRoutingModule { }

  • ルートのsrc/app/app-routing.module.tsのルーティングを設定する
src/app/app-routing.module.ts(抜粋)
・・・
const routes: Routes = [
  { path: '', loadChildren: './pages/samples/samples.module#SamplesModule' }
];
・・・

(全文)src/app/app-routing.module.ts
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './pages/samples/samples.module#SamplesModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

  • app.component.html編集
    src/app/app.component.htmlのWelcome〜の部分を全部削除してrouter-outletのみにする。
src/app/app.component.html
<router-outlet></router-outlet>

Step8.実行する。

Step3と同じ様に実行する。　http://localhost:4200/ にアクセス。

(ターミナル)
$ ng serve
・・・
ℹ ｢wdm｣: Compiled successfully.

ダッシュボードサンプル

おわり。
はじめにでも書いたけど、GitHubのソースは色々入れて試した。(demo-material-app)

ngコマンドのgenerate等々は、１文字に省略できる。

省略できる
$ ng generate module pages/samples
$ ng generate component pages/samples
$ ng serve

↓（省略するとこんな感じ）

$ ng g m pages/samples
$ ng g c pages/samples
$ ng s
7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
7