본문 바로가기
개발/Web

[Board] Start

Juyeon Ji 2020. 3. 27. 17:05

프로젝트 생성

>> ng new board
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS
>> cd board
>> code .
>> ng serve --open

Material UI 설치

npm install --save @angular/material @angular/cdk @angular/animations

프로젝트에 Material 추가(/src/style.css)

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

Material Module 추가

>> cd src/app
>>mkdir modules
>> cd modules
>> ng g m material

flex-layout 설치: 반응형 웹

>> npm install @angular/flex-layout@latest --save

생성된 material.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class MaterialModule { }

material.module.ts 수정

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  imports: [
    CommonModule,
    MatCardModule,
    MatInputModule,
    MatButtonModule,
    MatTableModule,
    MatSidenavModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
    MatDialogModule,
    MatSliderModule
  ],
  exports: [
    MatCardModule,
    MatInputModule,
    MatButtonModule,
    MatTableModule,
    MatSidenavModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
    MatDialogModule,
    MatSliderModule
  ],
  declarations: []
})
export class MaterialModule { }

생성한 모듈을 app.module.ts에 BrowserAnimationsModule, MaterialModule 추가

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// flex-layout 관련
import { FlexLayoutModule } from '@angular/flex-layout';

//material 관련
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './modules/material/material.module';

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

Material Icon 추가

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Board</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!--Material Icon 추가-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

habber.js 설치: 제서츠 기능(모바일 용)

>> npm install --save hammerjs

hammer.js import(src/main.ts)

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

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

//모바일 제스처 관련
import 'hammerjs';

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

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

Home 생성

>> cd src/app
>> mkdir component
>>cd component
>> ng g c home --flat

라우팅에 추가(app-routing.module.ts)

'''
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//홈화면
import { HomeComponent } from './component/home.component';

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

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

'''

Home html 작성(app.component.html)

<router-outlet></router-outlet>
저작자표시 비영리 변경금지 (새창열림)

'개발 > Web' 카테고리의 다른 글

Router(라우터)  (0) 2020.03.31
화면 분리하기  (0) 2020.03.30
custom reuse strategy  (0) 2020.03.25
Data Display  (0) 2020.03.25
Angular Material, CDK 사용하기  (0) 2020.03.24

'개발/Web' Related Articles

티스토리툴바