Bắt đầu với ứng dụng Angular đơn giản

Hướng dẫn này giới thiệu cho bạn những điều cơ bản của Angular bằng cách hướng dẫn bạn xây dựng một trang thương mại điện tử với danh mục, giỏ hàng và biểu mẫu thanh toán.

Để giúp bạn bắt đầu ngay lập tức, hướng dẫn này sử dụng một ứng dụng được tạo sẵn mà bạn có thể kiểm tra và sửa đổi dựa trên StackBlitz — mà không cần phải thiết lập môi trường làm việc cục bộ. StackBlitz là một môi trường phát triển dựa trên trình duyệt, nơi bạn có thể tạo, lưu và chia sẻ các dự án bằng nhiều công nghệ khác nhau.

Điều kiện tiên quyết

Để tận dụng tối đa hướng dẫn này, bạn nên có những hiểu biết cơ bản về những điều sau đây.

Tham quan ứng dụng mẫu

Bạn xây dựng các ứng dụng Angular với các component. Các component định nghĩa các khu vực trong giao diện người dùng cho phép bạn sử dụng lại.

Một component bao gồm ba thứ:

  • Lớp component xử lý dữ liệu và chức năng.
  • Template HTML định nghĩa giao diện người dùng.
  • Style CSS định nghĩa style cho giao diện.

Hướng dẫn này trình bày cách xây dựng một ứng dụng với các component sau.

  • <app-root> — Component đầu tiên để tải và là vùng chứa cho các component khác.
  • <app-top-bar> — Tên cửa hàng và nút thanh toán.
  • <app-product-list> — Danh sách sản phẩm.
  • <app-product-alerts> — Một component chứa các cảnh báo của ứng dụng.

Để biết thêm thông tin về các component, hãy xem bài viết Tổng quan về Component Angular.

Tạo dự án mẫu

Để tạo dự án mẫu, hãy tạo dự án mẫu làm sẵn trong StackBlitz. Để lưu công việc của bạn:

  1. Đăng nhập vào StackBlitz.
  2. Fork dự án bạn đã tạo.
  3. Lưu định kỳ.

Trong StackBlitz, ô xem trước ở bên phải hiển thị trạng thái bắt đầu của ứng dụng mẫu. Bản xem trước có hai thành phần:

  • Thanh trên cùng có tên cửa hàng: My Store và nút Checkout.
  • Tiêu đề cho danh sách sản phẩm: Products.

Phần dự án ở bên trái hiển thị các tệp nguồn tạo nên ứng dụng, bao gồm các tệp cấu hình và cơ sở hạ tầng.

Khi bạn tạo các ứng dụng mẫu StackBlitz đi kèm với các hướng dẫn, StackBlitz sẽ tạo các tệp khởi động và dữ liệu giả cho bạn. Các tệp bạn sử dụng trong suốt hướng dẫn nằm trong thư mục src.

Để biết thêm thông tin về cách sử dụng StackBlitz, hãy xem Tài liệu về StackBlitz.

Tạo danh sách sản phẩm

Trong phần này, bạn sẽ cập nhật ứng dụng để hiển thị danh sách các sản phẩm. Bạn sẽ sử dụng dữ liệu sản phẩm được định nghĩa trước từ tệp products.ts và các phương thức từ tệp product-list.component.ts. Phần này hướng dẫn bạn chỉnh sửa HTML, còn được gọi là template.

1. Trong thư mục product-list, mở tệp template product-list.component.html.

2. Thêm một structural directive *ngFor vào thẻ <div> như sau.

<h2>Products</h2>

<div *ngFor="let product of products">
</div>
src/app/product-list/product-list.component.html

Với *ngFor, thẻ <div> được lặp lại cho từng sản phẩm trong danh sách.

Các structural directive cấu trúc định hình hoặc định hình lại cấu trúc của DOM, bằng cách thêm, xóa và thao tác các phần tử. Để biết thêm thông tin về structural directive, hãy xem Structural directives.

3. Bên trong thẻ <div>, thêm thẻ <h3>{{ product.name }}. Câu lệnh {{ product.name }} là một ví dụ về cú pháp nội suy của Angular. Phép nội suy {{ }} cho phép bạn hiển thị giá trị thuộc tính dưới dạng văn bản.

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
      {{ product.name }}
  </h3>

</div>
src/app/product-list/product-list.component.html

Ô xem trước sẽ cập nhật để hiển thị tên của từng sản phẩm trong danh sách.

Hiển thị tên của từng sản phẩm trong danh sách

4. Để làm cho mỗi tên sản phẩm trở thành một liên kết đến chi tiết sản phẩm, hãy thêm thẻ <a> xung quanh {{ product.name }}.

5. Đặt tiêu đề là tên của sản phẩm bằng cách sử dụng cú pháp ràng buộc thuộc tính [ ] như sau:

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

</div>
src/app/product-list/product-list.component.html

Trong ô xem trước, di chuột qua tên sản phẩm để xem giá trị thuộc tính liên kết, là tên sản phẩm cộng với từ "details". Ràng buộc thuộc tính [ ] cho phép bạn sử dụng giá trị thuộc tính trong một biểu thức mẫu.

Hiển thị tên của từng sản phẩm trong danh sách

6. Thêm mô tả sản phẩm. Trên phần tử <p>, sử dụng một directive *ngIf để Angular chỉ tạo phần tử <p> nếu sản phẩm hiện tại có mô tả.

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

</div>
src/app/product-list/product-list.component.html

Ứng dụng hiện hiển thị tên và mô tả của từng sản phẩm trong danh sách. Chú ý rằng sản phẩm cuối cùng không có đoạn mô tả. Angular không tạo phần tử <p> vì thuộc tính mô tả của sản phẩm trống.

Hiển thị danh sách sản phẩm với tên và mô tả

7. Thêm nút để người dùng có thể chia sẻ sản phẩm. Liên kết sự kiện click của nút với phương thức share() trong product-list.component.ts. Liên kết sự kiện sử dụng bộ dấu ngoặc đơn ( ) xung quanh sự kiện, như trong sự kiện (click) trên phần tử <button>.

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button (click)="share()">
    Share
  </button>

</div>
src/app/product-list/product-list.component.html

Mỗi sản phẩm bây giờ đã có một nút Share.

Hiển thị nút chia sẻ sản phẩm

Nhấp vào nút Share sẽ bật thông báo cho biết "The product has been shared!".

Khi chỉnh sửa template, bạn đã khám phá một số tính năng phổ biến nhất của template Angular. Để biết thêm thông tin, hãy xem Giới thiệu về component và template.

Truyền dữ liệu cho component con

Hiện tại, danh sách sản phẩm hiển thị tên và mô tả của từng sản phẩm. ProductListComponent cũng định nghĩa một thuộc tính products chứa dữ liệu cho từng sản phẩm từ mảng products trong products.ts.

Bước tiếp theo là tạo một tính năng cảnh báo mới sử dụng dữ liệu sản phẩm từ ProductListComponent. Cảnh báo kiểm tra giá của sản phẩm và nếu giá lớn hơn $700, sẽ hiển thị nút Notify Me cho phép người dùng đăng ký nhận thông báo khi sản phẩm được bán.

Phần này hướng dẫn bạn cách tạo một component con, ProductAlertsComponent có thể nhận dữ liệu từ component cha của nó là ProductListComponent.

1. Nhấp chuột phải vào thư mục app và sử dụng Angular Generator để tạo một component mới có tên product-alerts.

Tạo component mới

Trình tạo sẽ tạo 3 file thành phần của component:

  • product-alerts.component.ts
  • product-alerts.component.html
  • product-alerts.component.css

2. Mở ra file product-alerts.component.ts. Decorator @Component() chỉ ra rằng lớp là một component. Decorator @Component() cũng cung cấp siêu dữ liệu về component, bao gồm bộ chọn, template và style của nó.

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

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

}
src/app/product-alerts/product-alerts.component.ts

Các tính năng chính của decorator @Component() như sau:

  • selector, app-product-alerts định danh cho component. Theo quy ước, các bộ chọn component Angular bắt đầu bằng tiền tố app-, theo sau là tên component.
  • Tên file template và style tham chiếu đến file HTML và CSS của component.
  • Khai báo @Component() cũng export lớp ProductAlertsComponent - có các hàm xử lý cho component.

3. Để thiết lập ProductAlertsComponent nhận dữ liệu sản phẩm, hãy thực hiện như sau:

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { Product } from '../products';
src/app/product-alerts/product-alerts.component.ts

4. Trong định nghĩa lớp ProductAlertsComponent, hãy định nghĩa một thuộc tính có tên product bằng decorator @Input(). Decorator @Input() chỉ ra rằng giá trị thuộc tính được chuyển vào từ component cha là ProductListComponent.

export class ProductAlertsComponent implements OnInit {
  @Input() product!: Product;
  constructor() { }

  ngOnInit() {
  }

}
src/app/product-alerts/product-alerts.component.ts

5. Mở file product-alerts.component.html và thay thế nội dung bằng nút Notify Me xuất hiện nếu giá sản phẩm trên $700.

<p *ngIf="product && product.price > 700">
  <button>Notify Me</button>
</p>
src/app/product-alerts/product-alerts.component.html

6. Để hiển thị ProductAlertsComponent dưới dạng component con của ProductListComponent, hãy thêm bộ chọn, <app-product-alerts> vào file product-list.component.html. Truyền sản phẩm hiện tại làm đầu vào cho component bằng cách sử dụng ràng buộc thuộc tính.

<button (click)="share()">
  Share
</button>

<app-product-alerts [product]="product">
</app-product-alerts>
src/app/product-list/product-list.component.html

Component cảnh báo sản phẩm mới lấy một sản phẩm làm đầu vào từ danh sách sản phẩm. Với đầu vào đó, nó sẽ hiển thị hoặc ẩn nút Notify Me, dựa trên giá của sản phẩm. Giá Phone XL là hơn $700, vì vậy nút Notify Me xuất hiện trên sản phẩm đó.

Hiển thị nút Notify Me cho sản phẩm có giá trên $700

Truyền dữ liệu đến component cha

Để làm cho nút Notify Me hoạt động, component con cần thông báo và truyền dữ liệu cho component cha. ProductAlertsComponent cần đưa ra một sự kiện khi người dùng nhấp vào nút Notify MeProductListComponent cần phản hồi sự kiện này.

1. Thêm các khai báo sau trong file product-alerts.component.ts.

import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';
import { Product } from '../products';
src/app/product-alerts/product-alerts.component.ts

2. Trong lớp component, định nghĩa một thuộc tính có tên notify bằng decorator @Output() và một instance của EventEmitter(). Cấu hình ProductAlertsComponent với @Output() cho phép ProductAlertsComponent tạo ra một sự kiện khi giá trị của thuộc tính notify thay đổi.

export class ProductAlertsComponent {
  @Input() product: Product|undefined;
  @Output() notify = new EventEmitter();
}

src/app/product-alerts/product-alerts.component.ts

3. Trong file product-alerts.component.html, cập nhật nút Notify Me với một liên kết sự kiện để gọi phương thức notify.emit().

<p *ngIf="product && product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>
src/app/product-alerts/product-alerts.component.html

4. Định nghĩa điều sẽ xảy ra khi người dùng nhấp vào nút Notify Me. Trong file product-list.component.ts, tạo phương thức onNotify() tương tự như phương thức share().

export class ProductListComponent {
  products = products;

  share() {
    window.alert('The product has been shared!');
  }

  onNotify() {
    window.alert('You will be notified when the product goes on sale');
  }
}
src/app/product-list/product-list.component.ts

5. Cập nhật ProductListComponent để nhận dữ liệu từ ProductAlertsComponent.

Trong file product-list.component.html, liên kết <app-product-alerts> với phương thức onNotify() của component danh sách sản phẩm. <app-product-alerts> sẽ hiển thị nút Notify Me.

<button (click)="share()">
  Share
</button>

<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>
src/app/product-list/product-list.component.html

6. Nhấp vào nút Notify Me để bật thông báo có nội dung "You will be notified when the product goes on sale".

Để biết thêm thông tin về giao tiếp giữa các component, hãy xem Tương tác component.

Tiếp theo là gì

Trong phần này, bạn đã tạo một ứng dụng hiển thị danh sách sản phẩm.

Để tiếp tục khám phá Angular và phát triển ứng dụng này:

AngularTypeScript
Bài Viết Liên Quan:
Trình khởi động bootstrap trong Angular
Trung Nguyen 26/07/2021
Trình khởi động bootstrap trong Angular

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về trình khởi động bootstrap và cách Angular hoạt động bên trong và khởi động ứng dụng của chúng ta.

Cách tạo một dự án mới trong Angular
Trung Nguyen 25/07/2021
Cách tạo một dự án mới trong Angular

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng Angular CLI để tạo một dự án mới trong Angular.

Không gian làm việc và Cấu trúc file dự án
Trung Nguyen 22/07/2021
Không gian làm việc và Cấu trúc file dự án

Trong hướng dẫn này, bạn sẽ tìm hiểu về không dan làm việc và cấu trúc file dự án ứng dụng, dự án thư viện của Angular.

Service và Dependency Injection trong Angular
Trung Nguyen 21/07/2021
Service và Dependency Injection trong Angular

Trong bài viết này, bạn sẽ tìm hiểu vì sao Angular lại tách riêng component và service, cách sử dụng dependency injection để khởi tạo instance của service.