Subscribed unsubscribe Subscribe Subscribe

angular2-material(angular/material2)を使ってみる

angular-cliを使って、angular2-materialをインストールしてみます。

参考

GitHub - angular/material2: Material Design components for Angular 2
material2/GETTING_STARTED.md at master · angular/material2 · GitHub
GitHub - jelbourn/material2-app: Simple app that consumes Angular Material 2 components
@angular2-material

各種インストール


npm install -g webpack@2.1.0-beta.22
npm install -g angular-cli@1.0.0-beta.15

cd ~/projects && ng new ${appName} && cd ${appName}

npm install --save \
@angular2-material/button \
@angular2-material/button-toggle \
@angular2-material/card \
@angular2-material/checkbox \
@angular2-material/core \
@angular2-material/grid-list \
@angular2-material/icon \
@angular2-material/input \
@angular2-material/list \
@angular2-material/menu \
@angular2-material/progress-bar \
@angular2-material/progress-circle \
@angular2-material/radio \
@angular2-material/sidenav \
@angular2-material/slider \
@angular2-material/slide-toggle \
@angular2-material/tabs \
@angular2-material/toolbar \
@angular2-material/tooltip

使ってみる

  • app.module.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 67ae491..f93ce7a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,20 +1,58 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
+import { MdButtonModule } from '@angular2-material/button';
+import { MdButtonToggleModule } from '@angular2-material/button-toggle';
+import { MdCardModule } from '@angular2-material/card';
+import { MdCheckboxModule } from '@angular2-material/checkbox';
+import { MdCoreModule } from '@angular2-material/core';
+import { MdGridListModule } from '@angular2-material/grid-list';
+import { MdIconModule } from '@angular2-material/icon';
+import { MdInputModule } from '@angular2-material/input';
+import { MdListModule } from '@angular2-material/list';
+import { MdMenuModule } from '@angular2-material/menu';
+import { MdProgressBarModule } from '@angular2-material/progress-bar';
+import { MdProgressCircleModule } from '@angular2-material/progress-circle';
+import { MdRadioModule } from '@angular2-material/radio';
+import { MdSidenavModule } from '@angular2-material/sidenav';
+import { MdSliderModule } from '@angular2-material/slider';
+import { MdSlideToggleModule } from '@angular2-material/slide-toggle';
+import { MdTabsModule } from '@angular2-material/tabs';
+import { MdToolbarModule } from '@angular2-material/toolbar';
+import { MdTooltipModule } from '@angular2-material/tooltip';
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    MdButtonModule.forRoot(),
+    MdButtonToggleModule.forRoot(),
+    MdCardModule.forRoot(),
+    MdCheckboxModule.forRoot(),
+    MdCoreModule.forRoot(),
+    MdGridListModule.forRoot(),
+    MdIconModule.forRoot(),
+    MdInputModule.forRoot(),
+    MdListModule.forRoot(),
+    MdMenuModule.forRoot(),
+    MdProgressBarModule.forRoot(),
+    MdProgressCircleModule.forRoot(),
+    MdRadioModule.forRoot(),
+    MdSidenavModule.forRoot(),
+    MdSliderModule.forRoot(),
+    MdSlideToggleModule.forRoot(),
+    MdTabsModule.forRoot(),
+    MdToolbarModule.forRoot(),
+    MdTooltipModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
  • app.component.css
.m2app-dark {
  background: black;
}

.app-content {
  padding: 20px;
}

.app-content md-card {
  margin: 20px;
}

.app-sidenav {
  padding: 10px;
  min-width: 100px;
}

.app-content md-checkbox {
  margin: 10px;
}

.app-toolbar-filler {
  flex: 1 1 auto;
}

.app-toolbar-menu {
  padding: 0 14px 0 14px;
  color: white;
}

.app-icon-button {
  box-shadow: none;
  user-select: none;
  background: none;
  border: none;
  cursor: pointer;
  filter: none;
  font-weight: normal;
  height: auto;
  line-height: inherit;
  margin: 0;
  min-width: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
}

.app-action {
  display: inline-block;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.app-spinner {
  height: 30px;
  width: 30px;
  display: inline-block;
}

.app-input-icon {
  font-size: 16px;
}

.app-list {
  border: 1px solid rgba(0,0,0,0.12);
  width: 350px;
  margin: 20px;
}

.app-progress {
  margin: 20px;
}
  • app.component.html
<md-sidenav-layout [class.m2app-dark]="isDarkTheme">

  <md-sidenav #sidenav mode="side" class="app-sidenav">
    Sidenav
  </md-sidenav>

  <md-toolbar color="primary">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>

    Angular Material2 Example App

    <span class="app-toolbar-filler"></span>
    <button md-button (click)="isDarkTheme = !isDarkTheme">TOGGLE DARK THEME</button>
  </md-toolbar>

  <div class="app-content">

    <md-card>
      <button md-button>FLAT</button>
      <button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
      <button md-raised-button color="primary">PRIMARY RAISED</button>
      <button md-raised-button color="accent">ACCENT RAISED</button>
    </md-card>

    <md-card>
      <md-checkbox>Unchecked</md-checkbox>
      <md-checkbox [checked]="true">Checked</md-checkbox>
      <md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
      <md-checkbox [disabled]="true">Disabled</md-checkbox>
    </md-card>

    <md-card>
      <md-radio-button name="symbol">Alpha</md-radio-button>
      <md-radio-button name="symbol">Beta</md-radio-button>
      <md-radio-button name="symbol" disabled>Gamma</md-radio-button>
    </md-card>

    <md-card class="app-input-section">
      <md-input placeholder="First name"></md-input>

      <md-input #nickname placeholder="Nickname" maxlength="50">
        <md-hint align="end">
          {{nickname.characterCount}} / 50
        </md-hint>
      </md-input>

      <md-input>
        <md-placeholder>
          <i class="material-icons app-input-icon">android</i> Favorite phone
        </md-placeholder>
      </md-input>

      <md-input placeholder="Motorcycle model">
        <span md-prefix>
          <i class="material-icons app-input-icon">motorcycle</i>
          &nbsp;
        </span>
      </md-input>
    </md-card>

    <md-card>
      <md-list class="app-list">
        <md-list-item *ngFor="let food of foods">
          <h3 md-line>{{food.name}}</h3>
          <p md-line class="demo-secondary-text">{{food.rating}}</p>
        </md-list-item>
      </md-list>
    </md-card>

    <md-card>
      <md-spinner class="app-spinner"></md-spinner>
      <md-spinner color="accent" class="app-spinner"></md-spinner>
    </md-card>

    <md-card>
      <label>
        Indeterminate progress-bar
        <md-progress-bar
            class="app-progress"
            mode="indeterminate"
            aria-label="Indeterminate progress-bar example"></md-progress-bar>
      </label>

      <label>
        Determinate progress bar - {{progress}}%
        <md-progress-bar
            class="app-progress"
            color="accent"
            mode="determinate"
            [value]="progress"
            aria-label="Determinate progress-bar example"></md-progress-bar>
      </label>
    </md-card>

    <md-card>
      <md-tab-group>
        <md-tab>
          <template md-tab-label>
            Earth
          </template>
          <template md-tab-content>
            <p>EARTH</p>
          </template>
        </md-tab>
        <md-tab>
          <template md-tab-label>
            Fire
          </template>
          <template md-tab-content>
            <p>FIRE</p>
          </template>
        </md-tab>
      </md-tab-group>
    </md-card>


    <md-card>
      <md-icon>build</md-icon>
    </md-card>

    <md-card>
      <button md-button [md-menu-trigger-for]="menu">
        MENU
      </button>
    </md-card>

    <md-menu #menu="mdMenu">
      <button md-menu-item>Lemon</button>
      <button md-menu-item>Lime</button>
      <button md-menu-item>Banana</button>
    </md-menu>

  </div>

</md-sidenav-layout>

<span class="app-action">
  <button md-fab><md-icon>check circle</md-icon></button>
</span>

起動して見てみる

ng serve
http://localhost:4200/

ERROR in [default] /Users/k_higo/work/src/github.com/keiwt/reserve/node_modules/@angular2-material/core/gestures/MdGestureConfig.d.ts:4:39 
Cannot find name 'HammerManager'.

ERROR in [default] /Users/k_higo/work/src/github.com/keiwt/reserve/node_modules/@angular2-material/slide-toggle/slide-toggle.d.ts:67:19 
Cannot find name 'HammerInput'.

ERROR in [default] /Users/k_higo/work/src/github.com/keiwt/reserve/node_modules/@angular2-material/slider/slider.d.ts:61:19 
Cannot find name 'HammerInput'.

ERROR in [default] /Users/k_higo/work/src/github.com/keiwt/reserve/node_modules/@angular2-material/slider/slider.d.ts:63:24 
Cannot find name 'HammerInput'.
npm install --save hammerjs @types/hammerjs

buildとS3へのupload

ng build --prod
aws s3 cp dist s3://XXXXXXX --recursive

まとめ

特にはまるポイントもなく、簡単に使えるようになりました。
これで現在カオス状態のjs各界がAngularJS2に集約されていくのではと思いました。  

これからのWEBはAngularJS2(CloudFront,S3)+AWS APIGateway + Lambda + DynamoDB一択でもよいのではないでしょうか。