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

Side Widget Well

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