본문 바로가기
개발/Angular

[Angular] 앵귤러 Material Design 실습 :: 마이자몽

by 마이자몽 🌻♚ 2018. 9. 27.

Angular에는 Material 이란 UI구성 요소 프레임워크가 있다.

Material Design을 기반으로 재사용이 가능하고 에겟스 가능한 UI 구성 요소 세트를 제공한다.

사용하기 앞서 setting이 필요하다.


아래 URL을 통래 material사이트로 들어간다.

https://material.angular.io/


get started를 눌러 단계별로 따라하면 된다.





1.설치


npm을 이용해서 설치를 해준다.

yarn을 사용할 경우 해당 사이트에서 명령어를 확인한다.

1
 Jamong@macui-MacBook-Pro  ~  npm install --save @angular/material @angular/cdk @angular/animations
cs




2.모듈 import


app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
 
import { AppComponent } from './app.component';
import { Line1Component } from './line1/line1.component';
import { Line2Component } from './line2/line2.component';
 
@NgModule({
  declarations: [
    AppComponent,
    Line1Component,
    Line2Component
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
cs


BrowserAnimationsModule, MatButtonModule, MatCheckboxModule을 import해준다.

Line1 2 Component는 저번 실습에서 만든 모듈이니 그냥 무시해도된다.




3.테마 include


style.css

1
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
cs


style.css파일에 추가해준다.




4.gesture support


일부 컴포넌트들은 Hammer JS에 의존한다.

Hammer JS도 npm을 이용해서 프로젝트 디렉토리에서 설치해준다.

1
 Jamong@macui-MacBook-Pro  ~/Documents/angularProjects/ng-jamong-app   master ●  npm install --save hammerjs
cs


설치 후 main.ts파일에 아래 code를 추가해준다.

1
import 'hammerjs';
cs




5.add Meterial icons


mat-icon 컴포넌트를 사용해주기 위해 index.html에 아래 내용을 추가해준다.

1
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
cs




확인


setting은 다 끝났다.

이제 html파일을 수정해서 반영이 됬는지 확인해보자.


app.component.html

1
2
3
<button mat-raised-button color="primary">Click me!</button>
<br>
<mat-checkbox>Check me!</mat-checkbox>
cs




view


예시로 button과 checkbox만 보여줬다.

다른 component들을 사욜할려면 Documentation을 확인하여 code를 작성해주면 된다.


documentation에서 확인한 요소를 사용해주기전에 app.module.ts파일에 import해주고 사용하는 것을 잊지말자.

예시로, Chips와 복합적으로 여러 컴포넌트를 사용한 실습을 해본다.



실습


app.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<button mat-raised-button color="primary">Click me!</button>
<br>
<mat-checkbox>Check me!</mat-checkbox>
 
<!-- Chips -->
  <mat-chip-list>
    <mat-chip>One fish</mat-chip>
    <mat-chip>Two fish</mat-chip>
    <mat-chip color="primary" selected>Primary fish</mat-chip>
    <mat-chip color="accent" selected>Accent fish</mat-chip>
  </mat-chip-list>
 
 
<!-- 복합 -->
  <mat-card>
    <mat-card-content>
      <h2 class="example-h2">Progress spinner configuration</h2>
  
      <section class="example-section">
        <label class="example-margin">Color:</label>
        <mat-radio-group [(ngModel)]="color">
          <mat-radio-button class="example-margin" value="primary">
            Primary
          </mat-radio-button>
          <mat-radio-button class="example-margin" value="accent">
            Accent
          </mat-radio-button>
          <mat-radio-button class="example-margin" value="warn">
            Warn
          </mat-radio-button>
        </mat-radio-group>
      </section>
  
      <section class="example-section">
        <label class="example-margin">Mode:</label>
        <mat-radio-group [(ngModel)]="mode">
          <mat-radio-button class="example-margin" value="determinate">
            Determinate
          </mat-radio-button>
          <mat-radio-button class="example-margin" value="indeterminate">
            Indeterminate
          </mat-radio-button>
        </mat-radio-group>
      </section>
  
      <section class="example-section" *ngIf="mode === 'determinate'">
        <label class="example-margin">Progress:</label>
        <mat-slider class="example-margin" [(ngModel)]="value"></mat-slider>
      </section>
    </mat-card-content>
  </mat-card>
  <mat-card>
    <mat-card-content>
      <h2 class="example-h2">Result</h2>
  
      <mat-progress-spinner
          class="example-margin"
          [color]="color"
          [mode]="mode"
          [value]="value">
      </mat-progress-spinner>
    </mat-card-content>
  </mat-card>
cs

[(ngModel)]은 양방향 data binding할때 사용되는 건데 일단 그냥 사용한다.




app.component.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.example-h2 {
    margin: 10px;
  }
  
  .example-section {
    display: flex;
    align-content: center;
    align-items: center;
    height: 60px;
  }
  
  .example-margin {
    margin: 0 10px;
  }
  
cs





app.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-jamong-app';
  color = 'primary';
  mode = 'determinate';
  value = 50;
}
 
cs


export되는 변수들도 양방향 databinding을 위한것이다.




app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule, MatChipsModule, MatProgressSpinnerModule, MatRadioModule, MatCardModule, MatSliderModule} from '@angular/material';
import { FormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { Line1Component } from './line1/line1.component';
import { Line2Component } from './line2/line2.component';
 
@NgModule({
  declarations: [
    AppComponent,
    Line1Component,
    Line2Component
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatChipsModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatCardModule,
    MatSliderModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
 
cs



import된 module들을 html에 추가된 태그들과 비교하여 어떠한 것들이 추가됬는지 확인할 수 있다.

material의 각 요소들이 어떠한 module을 import해야할지 모를때는 document의 api부분을 확인하면 어떤 module을 추가해야하는지 친절하게 설명되어 있다.

FormsModule은 양방향 data binding을 위한것이니까, 일단 그냥 추가해준다.

다음 포스팅에서는 양방향과 단방향 databinding에 대해서 공부할거다.



view


댓글0