[Thực hành] Tạo ứng dụng Hackernews

Mục tiêu

Tạo ứng dụng Hackernews- Thực hành tạo component và thao tác với template syntax, binding, directives.

Mô tả- Tạo ứng dụng Hackernews

Tạo một ứng dụng mô phỏng https://news.ycombinator.com – một trang tổng hợp tin tức cho lập trình viên. Mỗi bản tin sẽ bao gồm một tiêu đề và một đường dẫn đến nguồn. Ngoài ra còn có thông số ngày đăng và số lượt vote.

Hướng dẫn

Bước 1: Sử dụng anglar cli và tạo mới dự án

Bước 2: Hiển thị một article lên màn hình chính

Bổ sung data về một article vào app.component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  article = {
    title: 'The Evolution of Async JavaScript: From Callbacks, to Promises, to Async/Await',
    url: 'https://medium.freecodecamp.org/the-evolution-of-async-javascript-from-callbacks-to-promises-to-async-await-e73b047f2f40'
  };
}

Sử dụng syntax hiển thị nội suy để hiển thị thông tin article lên view:

// template
<h2>Today's article</h2>
<hr>
<div>
  <a href="{{article.url}}" target="_blank">{{article.title}}</a>
</div>
<hr>
@CodeGym, 2019

Bước 3: Sử dụng event binding để cập nhật thông tin article

Thêm 3 input sau vào template, bạn tự design cho đẹp:

<textarea [value]="article.title" cols="70" id="article-title"></textarea>
<textarea [value]="article.url" cols="70" id="article-url"></textarea>
<input (click)="updateArticle()" type="button" value="Update">

Đặt logic cho handler method `updateArticle`:

updateArticle() {
  this.article.title = document.getElementById('article-title').value;
  this.article.url = document.getElementById('article-url').value;
}

Bước 4: Sử dụng two-way binding để cập nhật thông tin article

Tìm cách import `FormsModule` vào `AppModule`.
Sửa property binding trên hai textarea trên về thành two-way binding:

<textarea [(ngModel)]="article.title" cols="70"></textarea>
<textarea [(ngModel)]="article.url" cols="70"></textarea>

Bỏ phần tử input, bỏ handler method, kiểm thử lại chương trình.

Bước 5: Hiển thị một danh sách article

Bổ sung dữ liệu về một danh sách các article.

articles = [
  {
    title: 'The Evolution of Async JavaScript: From Callbacks, to Promises, to Async/Await',
    url: 'https://medium.freecodecamp.org/the-evolution-of-async-javascript-from-callbacks-to-promises-to-async-await-e73b047f2f40'
  },
  {
    title: 'Game of Life',
    url: 'https://thefullsnack.com/posts/game-of-life.html'
  },
  {
    title: 'Nguyên tắc thiết kế REST API',
    url: 'https://medium.com/eway/nguyên-tắc-thiết-kế-rest-api-23add16968d7'
  },
  {
    title: 'Why You Only Need to Test with 5 Users',
    url: 'https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/'
  },
  {
    title: 'Let’s Build A Web Server. Part 1.',
    url: 'https://ruslanspivak.com/lsbaws-part1/'
  }
];

Thay vì chỉ hiển thị một article duy nhất, hãy sử dụng directive để hiển thị toàn bộ các article trong danh sách:

<div *ngFor="let art of articles">
  <a href="{{art.url}}" target="_blank">{{art.title}}</a>
</div>

Bước 6: Bổ sung tính năng thêm article vào danh sách

Tính năng cập nhật thông tin article hiện tại trở nên vô nghĩa. Bạn hãy tận dụng những phần tử đã có để tạo thành tính năng thêm mới article.

Bổ sung button như sau vào template:

<button (click)="addArticle()">Add</button>

Bạn tự thêm các logic cần thiết để hoàn thành chức năng.

Bước 7: Bổ sung tính năng hiển thị số lượt thích

Tạo component để hiển thị số lượt like bằng lệnh ng cli sau:

ng g c likes

Dựng các phần tử cần thiết, bạn tự design cho đẹp:

{{likes}} likes. <button (click)="likeThis()">Like</button>

Thêm logic cho component

export class LikesComponent {
  likes: number = 0;
  likeThis() {
    this.likes++;
  }
}

Sử dụng component likes trong danh sách article:

<div *ngFor="let art of articles">
  <a href="{{art.url}}" target="_blank">{{art.title}}</a>
  <likes></likes>
</div>