목차: 웹 앱 개발 로드맵

제4회：뉴스 피드 일람 화면을 만든다(화면 천이와 지시어)

이번에는 뉴스 피드 목록 화면을 만듭니다.

뉴스피드 목록 화면용 구성요소 추가

구성 요소 추가

% ng g component components/newsfeeds

src/app/components/newsfeeds 에 컴퍼넌트가 추가된다.

모듈 업데이트 내용 확인

src/app/app.module.ts 에 컴퍼넌트가 추가된다.

업데이트된 내용

import { NewsfeedsComponent } from './components/newsfeeds/newsfeeds.component';

  declarations: [
    AppComponent,
    SignInComponent,
    FeedsComponent
  ],

라우터 업데이트 내용 확인

src/app/app-routing.module.ts에 경로를 등록하십시오.

다음을 추가합니다.

import {NewsfeedsComponent} from './components/newsfeeds/newsfeeds.component';

const routes: Routes = [
  { path: '', redirectTo: '/sign-in', pathMatch: 'full'},
  { path: 'sign-in', component: SignInComponent },
  { path: 'newsfeeds', component: NewsfeedsComponent },
];

화면 전환 수행

src/app/components/sign-in/sign-in.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({

  constructor(
    private router: Router
  ) { }

  ngOnInit(): void {
  }

  onClickSignIn() {
    // Go to newsfeeds page.
    this.router.navigate(['./newsfeeds']);
  }

src/app/components/sign-in/sign-in.component.html 에 다음의 수정을 실시합니다.
Sign in 버튼이 클릭되면 onClickSignIn() 메서드가 호출됩니다.

    <button (click)="onClickSignIn()">Sign in</button>

로그인 화면의 입력 내용이 맞을 때 화면 전환을 확인합니다.

실제로는 로그인시에 서버에 문의를 실시해, 로그인 할 수 있으면 화면 천이를 실시하게 됩니다만, 아직 서버가 없기 때문에 무언가 입력되어 있으면 OK로 합니다

  onClickSignIn() {
    if (this.email !== '' && this.password !== '') {
      // Go to newsfeeds page.
      this.router.navigate(['./newsfeeds']);
    }
  }

뉴스 피드 목록 화면에 피드 표시

뉴스피드용 데이터 준비

아직 서버도 데이터베이스도 준비되어 있지 않으므로 더미 데이터를 준비합니다.
newsfeeds.component.ts에 아래와 같이 newsfeeds 속성을 추가합니다.

export class NewsfeedsComponent implements OnInit {

  newsfeeds = [
    {
      message: 'あけましておめでとう!',
      createdAt: new Date('2020-01-01T02:23:30'),
    },
    {
      message: 'メリークリスマス!',
      createdAt: new Date('2019-12-25T10:52:02'),
    },
    {
      message: 'ハッピーハロウィーン!',
      createdAt: new Date('2019-10-31T20:13:55'),
    },
  ];

  constructor() { }

화면에 표시

newsfeeds.component.html을 아래와 같이 수정하십시오.

<div id="newsfeeds">
  <article *ngFor="let newsfeed of newsfeeds" class="newsfeed">
    <p class="message">{{newsfeed.message}}</p>
    <p class="createdAt">{{newsfeed.createdAt.toLocaleString()}}</p>
  </article>
</div>

html 태그 안에 *ngFow="" 를 넣어 반복 태그를 표시할 수 있습니다.
newsfeeds 배열에서 하나씩 요소를 검색하고 newsfeed 변수에 저장합니다.
이 *ngFor를 지시어라고합니다. 그 외에 *ngIf 이나 *ngSwitch 등이 있습니다.
지시문을 사용하여 만든 화면도 속성 값이 변경되면 실시간으로 화면이 업데이트됩니다.

스타일 변경

멋지게 보이도록 장식

#newsfeeds {
  padding: 20px;
  background-color: #1877f2;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .newsfeed {
    width: 100%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .message {
      color: #1c1c1c;
    }
    .createdAt {
      color: #a0a0a0;
      font-size: 10px;
      text-align: right;
    }
  }
}

마지막으로

이번은 여기까지입니다. 다음 번에는 파이프를 만들어 갑니다.
이번에 개발한 소스 코드는 GitHub에 들어 있습니다.