Angula2 + Material Design Lite 사용하기
Angular2와 Google의 Material Lite를 결합하여 사용하는 방법에 대해 다룬다.

by saintdragon2


Posted on Feb. 20, 2017, 11:45 p.m.



ang2MDL

Angular2 + MDL practice

Angular2 + MDL

Angular2에서 Material Design Lite을 이용하는 방법에 대해 다룬다.

이 문서는 angular2을 조금이라도 써본 사람을 기준으로 작성하였다. 그러나, 필자 역시 angular2 tutorial을 몇개 본 것이 전부이기 때문에, 큰 문제는 없을 것이다. 그래도 coursetro.com의 동영상 강좌는 보고 오시길 바란다.

angular-cli를 이용해 작성해보자. 기본적인 설치 방법은 굳이 설명하지 않겠다. 공식문서를 참고하시길 바란다.

> ng new ng2-mdl-project
> cd ng2-mdl-project
> ng serve

서버가 잘 작동한다면 http://127.0.0.1:4200에 접속했을 때, app works!라는 문구가 화면에 보일 것이다.

MDL 설치

구체적인 설명은 공식문서를 참고하시길 바란다.

> npm install angular2-mdl --save

공식문서를 참고하라고 했지만, 공식문서에 설치 방법이라고 써놓은게 저게 전부다. 그래서는 영어도 못하고, angular2도 초보인 우리가 알 수 있을 턱이 없다. webpack을 이용하는 방법이 아래 보인다. 우리도 webpack을 사용해보자.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MdlModule } from 'angular2-mdl';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdlModule, // <-- add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

아직은 뭐 한게 없어서 되고 있는지 확인할 길이 없다. css파일을 index.html에 추가한다.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Ng2MdlProject</title>
    <base href="/">
    
	<!-- 아래 두줄을 추가한다. -->
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <app-root>Loading...</app-root>
</body>

</html>

브라우저에 가서 확인해보면 글꼴이 미세하게 바뀐 것 같다!

MDL 태그 사용하기

mdl 태그를 쓸 수 있는지 확인해보자. 자세한 문서는 홈페이지에 나와 있다.

Layout을 만드는게 먼저인 것 같다. 공식 홈페이지에서 샘플코드를 app/app.component.html에 붙여 넣는다.

<!-- app/app.component.html -->
  
<div class="demo-container" mdl-shadow="2">
   <mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
      <mdl-layout-header>
         <mdl-layout-header-row>
            <mdl-layout-title>Title</mdl-layout-title>
            <mdl-layout-spacer></mdl-layout-spacer>
            <!-- Navigation. We hide it in small screens. -->
            <nav class="mdl-navigation mdl-layout--large-screen-only">
               <a class="mdl-navigation__link" >Link</a>
               <a class="mdl-navigation__link" >Link</a>
               <a class="mdl-navigation__link" >Link</a>
            </nav>
         </mdl-layout-header-row>
      </mdl-layout-header>
      <mdl-layout-drawer>
         <mdl-layout-title>Title</mdl-layout-title>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" >Link</a>
            <a class="mdl-navigation__link" >Link</a>
            <a class="mdl-navigation__link" >Link</a>
         </nav>
      </mdl-layout-drawer>
      <mdl-layout-content>
         <!-- Your content goes here -->
      </mdl-layout-content>
   </mdl-layout>
</div>

성공!!

잘 된다!! 왼쪽 위의 버튼을 누르면 사이드바도 잘 튀어 나온다.


아직 댓글이 없습니다. 첫번째로 댓글을 남겨보세요.


Blog Search

Blog Categories

Side Widget Well

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.