지난번에 이어, 이번은 화면을 만들어 갈까 생각합니다.

사용할 프레임워크

Angular Material

Angular Material 도입

공식 절차에 따라 소개합니다.

설치

다음 명령을 실행합니다.
※Angular Material의 9계는 아직 본 릴리스 되고 있지 않기 때문에, @next 로 9계를 인스톨 합니다

ng add @angular/material@next

왜@angular/cdk가 8계였으므로, 개별적으로 업데이트합니다

npm install @angular/[email protected]

화면 구축

헤더 추가

헤더 모듈을 만듭니다.

Angular Material 툴바 가져 오기

exports에서 HeaderComponent를 사용할 수있게합니다

src/app/shared/header/header.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header.component';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  declarations: [
    HeaderComponent,
  ],
  imports: [
    MatToolbarModule,
  ],
  exports: [
    HeaderComponent,
  ]
})
export class HeaderModule { }

구성 요소는 우선 간단하게 유지합니다

src/app/shared/header/header.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {}

헤더 HTML 작성

우선 제목만의 단순한 것으로 합니다

src/app/shared/header/header.component.html

<mat-toolbar>
    <span>てらしー　ブログ</span>
</mat-toolbar>

※scss 파일은 비워 두어 둡니다

TOP 페이지 만들기

TOP 페이지 용 모듈을 작성합니다

src/app/top/top.module.ts

import { NgModule } from '@angular/core';
import { TopComponent } from './top.component';

@NgModule({
  declarations: [
    TopComponent
  ],
})
export class TopModule { }

구성 요소는 우선 간단하게 유지합니다

src/app/top/top.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.scss']
})
export class TopComponent {
}

HTML도 우선 간단하게 해 둡니다

src/app/top/top.component.html

ようこそ

라우팅 설정

AppModule에서 HeaderModule 및 TopModule를 가져옵니다.

정책으로 화면이나 부품 단위로 모듈화하여 AppModule을 더럽히지 않도록 합니다.

여기에서 여러 가지를 가져 오면 빌드 후 main.js의 크기가 커지고 초기 시작이 느려집니다

src/app/app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderModule } from './shared/header/header.module';
import { TopModule } from './top/top.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,

    HeaderModule,
    TopModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

라우팅 파일에 루트 경로 인 경우 TopComponent를 표시하도록합니다

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TopComponent } from './top/top.component';


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

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

app.component.html 수정

app-header에서 HeaderComponent를 표시합니다

<router-outlet></router-outlet>에서 라우팅으로 콘텐츠를 배포합니다

.


src/app/app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

화면 확인

다음과 같은 화면이 완성되었습니다.

요약

이제 화면을 만들 준비가 되었습니다!
다음 번에는 TOP 페이지를 그대로 갑니다! !

(추기)
Angular 9와 Firebase로 블로그를 만들어 보는 3