Chắc hẳn các bạn đọc đã quan tâm đến series bài học Angular đang chờ đợi bài học số 4 này. Hôm nay, LAPTRINHVIEN.IO sẽ tiếp tục giới thiệu đến các bạn cách xây dựng mẫu Template với HTML chúng ta sẽ cần đến Angular Data Bidding và Directives.

Nhắc lại kiến thức trong bài học trước một chút, Component trong Angular. Một Component trong Angular gồm có 3 thành phần: Template, Class và Metadata để khai báo những thuộc tính cho Class. Chúng ta đã biết được cách làm như thế nào để tạo ra một Class, xây dựng Metadata cho Class đó.

Như chúng ta biết những ứng dụng web ngày nay thì phần giao diện rất là quan trọng và Angular làm cho việc xây dựng giao diện của chúng ta đơn giản và mạnh mẽ hơn. Angular cung cấp cơ chế data binding, giúp cho việc hiển thị thông tin cũng như phản hồi những hành động của người dùng một cách dễ dàng.

Trong video bài học bên dưới, chúng ta sẽ tìm hiểu làm thế nào để xây dựng mẫu template với html? Để giải quyết vấn đề này chúng ta phải cần đến Angular Binding và Directives.

Với Angular Directives, dễ dàng thêm những logic hay là những đoạn mã HTML như là if và for,... Và Angular Components cho phép các xây dựng những giao diện lồng nhau khiến cho việc bóc tách giao diện một cách dễ dàng.

Dễ quan sát, angular component là một cái view được định nghĩa bởi template. Code được liên kết với Class và thông tin bổ sung cho Class được định nghĩa bởi Metadata thông qua một Decorator.

Vấn đề ở bài học này là sử dụng những kỹ thuật để xây dựng một mẫu template tiếp cận bằng những cách khác nhau.

Có 2 cách tiếp cận như sau: Inline Template và Linked Template

• Inline Template: code trực tiếp phần HTML trong phần biến template. Có 2 cách để khai báo biên template: dùng dấu “” hoặc kỹ thuật mới ES 2015 Back Ticks.
  Ưu điểm: Dễ dàng kết hợp với thuộc tính và hàm trong class, không tạo thêm file html đỡ cồng kềnh trong project.
  Nhược điểm: Không cung cấp intellisence, không phù hợp nếu template quá phức tạp.
• Linked Template:
  Ưu điểm: Tách riêng html, quen thuộc khi lập trình.
  Nhược điểm: Không nên sử dụng trong trường hợp link template quá đơn giản.

Trong Angular thì việc giao tiếp giữa các class component và template của nó chủ yếu là việc truyền dữ liệu. Chúng ta có thể truyền một giá trị từ class tới một template để hiển thị và template cũng có thể lắng nghe những sự kiện để truyền những hành động hoặc giá trị mà người dùng nhập để trở lại class. Angular cung cấp một số loại ràng buộc (hay còn gọi là binding), chúng ta sẽ tìm hiểu về tất cả những loại binding trong Angular, nhưng bài học hôm này chỉ giới thiệu về Interpolation.

Cú pháp của Interpolation: {{ thuộc tính của class }}. Chúng ta có thể truyền các thuộc tính của class, một biểu thức hay cả một function ở Interpolation. Đó là cách binding dữ liệu từ class và template, ngoài ra chúng ta có thể binding một chuỗi, một mảng, một số hay bất kì một object nào ở trong class ra ngoài template.

*ngIf: là một struck directive nó loại bỏ hoặc tái tạo một phần của DOM giữa trên một biểu thức. Nếu biểu thức gán cho ngIf trả về một giá trị false thì phần tử đó sẽ bị loại bỏ khỏi DOM, nếu không một bản sao của phần tử được thêm vào DOM.

Cú pháp sử dụng ngIf:

Nếu là true thì thẻ <h1> sẽ được rander.

*ngFor: lặp lại một phần của DOM trong một danh sách hay mảng. Vì vậy cần xác định một khối HTML, cái mà chúng ta muốn hiển thị lặp lại để đặt directive ngFor trong đó.

Cú pháp dử dụng ngFor:

Để hiểu rõ hơn về những vấn đề trong bài học hôm nay, hãy tập trung và cùng xem video bên dưới các bạn nhé! Video có các ví dụ cụ thể và hướng dẫn chi tiết.

Cảm ơn các bạn đọc đã luôn theo dõi laptrinhvien.io. Hẹn gặp các bạn ở những bài học tiếp theo.

Phần trước: [#ANG03] Giới thiệu component trong Angular

Luôn mang những kiến thức bổ ích cung cấp đến các bạn yêu thích lập trình.

Hãy đón xem và ủng hộ bằng cách LIKE/SHARE hay SUBCRIBE để có thể cập nhật thông tin mới nhất từ chúng tôi. Và đừng quên chia sẻ bài học này tới bạn bè của mình để cùng nhau chinh phục Angular bạn nhé!

Lê Xuân Quỳnh – Developer @ JANETO

TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN JANETO

 0933067997 – 0933267337
 facebook.com/laptrinhvienio
 YouTube/laptrinhvienio
 tuyensinh@laptrinhvien.io
 Tầng 2 Tòa nhà The Morning Star – 57 Quốc Lộ 13, Phường 26, Quận Bình Thạnh, Tp. Hồ Chí Minh.