- vừa được xem lúc

Tìm hiểu Component, Template và Directive trong Angular.

0 0 16

Người đăng: Vân Yume

Theo Viblo Asia

Trong bài viết hôm nay tớ sẽ nói về sự khác nhau giữa Component, Template và Directive và mối liên quan của chúng trong Angular.

1. Component

  • Component là một khối xây dựng cơ bản trong Angular. Nó đại diện cho một phần giao diện người dùng (UI) cụ thể trong ứng dụng.

  • Mỗi component có thể có logic riêng, dữ liệu đầu vào và đầu ra, và có thể được sử dụng lại trong suốt ứng dụng.

  • Một component bao gồm:
    - một file TypeScript (.ts) chứa mã logic
    - một file HTML (.html) chứa markup giao diện người dùng
    - một file CSS (.css) chứa kiểu dáng cho giao diện người dùng.

Hình ảnh 1: Một Component

Hình 1: Một Component

Theo tài liệu của Angular( https://angular.io/) Component là một loại Directive có template và chỉ có một component được khởi tạo cho mỗi phần tử trong template. Component có thể tái sử dụng, độc lập và linh hoạt. Component có thể chứa và gọi được nhiều component khác. Để khai báo một component, chúng ta sử dụng trang trí @Component với các thuộc tính như selector, template, styleUrls, ...

2. Template

  • Template là nơi bạn xác định giao diện người dùng của một component trong Angular. Nó chứa các markup HTML và các directive để hiển thị dữ liệu và tương tác với người dùng.

  • Template được viết bằng ngôn ngữ HTML thông thường, nhưng có thêm các cú pháp đặc biệt của Angular để liên kết dữ liệu và điều khiển giao diện người dùng.

  • Trong template, bạn có thể sử dụng các directive, biểu thức liên kết dữ liệu (data binding), sự kiện (event binding), vòng lặp (ngFor), điều kiện (ngIf) và các công cụ khác của Angular để tạo giao diện động.

Template là một phần của component , là nơi định nghĩa cấu trúc HTML cho component đó. Template có thể được viết trực tiếp trong file TypeScript bằng thuộc tính template hoặc được tách ra file HTML riêng bằng thuộc tính templateUrl. Template có thể sử dụng các biến, hàm, thuộc tính của component thông qua cú pháp {{ }} hoặc [ ] hoặc ( ). Template cũng có thể sử dụng các directive để thay đổi cấu trúc DOM hoặc giao diện của các phần tử HTML.

3. Directive

  • Directive là một đối tượng giúp chúng ta thay đổi hành vi, giao diện hoặc thuộc tính của một phần tử HTML hoặc component khác. Directives có thể hiểu như là các đoạn mã typescript (hoặc javascript) kèm theo cả HTML và khi gọi thì gọi như là HTML luôn.

<!-- Đây là 1 Directive *ngIF để kiểm tra điều kiện if ở ngy html-->
<div *ngIF="day"> Day: {{day}} </div>
  • Directive có hai loại chính: structural directive và attribute directive.

    • Structural directive là directive cấu trúc, dùng để vẽ HTML, hiển thị dữ liệu lên giao diện HTML, và thay đổi cấu trúc DOM bằng việc thêm bớt các phần tử trong DOM. Các structural directive thường có dấu * ở trước của directive. Ví dụ *ngFor, *ngIf.
    • Attribute directive là directive thuộc tính, dùng để thay đổi giao diện, tương tác của các phần tử HTML hoặc thêm các thuộc tính động cho element HTML. Ví dụ ngStyle, ngClass.

    Để khai báo một directive, chúng ta sử dụng trang trí @Directive với các thuộc tính như selector, hostListeners, hostBindings, ...

Lời kết:

Tóm lại, Component là một loại directive có template riêng, là một khối xây dựng cơ bản trong Angular. Template là cấu trúc HTML của component, và Directive là cách để thay đổi các phần tử HTML hoặc component khác. Cả ba khái niệm này đều quan trọng trong việc xây dựng ứng dụng Angular.

Tài liệu tham khảo

Angular

Tìm hiểu cơ bản về Directives

Bình luận

Bài viết tương tự

- vừa được xem lúc

Route in Angular JS

Router là một module được đặt tại @angular/router, cung cấp cho ứng dụng Angluar của chúng ta khả năng điều hướng và hiển thị nội dung phù hợp với địa chỉ URL. Với các ứng dụng web thông thường, việc điều hướng theo URL thường sẽ do phía server đảm nhiệm, giống như hình ảnh dưới đây là ví dụ với Rai

0 0 88

- vừa được xem lúc

Có gì mới trong Angular 11

Phiên bản Angular 11.0.0 được phát hành vào tháng 11 năm 2020. Bản phát hành chính Angular 11 cung cấp các bản cập nhật trên toàn bộ nền tảng, bao gồm CLI và các components.

0 0 91

- vừa được xem lúc

Pipe trong Angular

Xin chào tất cả mọi người, bài viết này minh xin giới thiệu về Pipe trong Angular, rất mong được mọi người theo dõi. 1) Pipe trong Angular là gì. . .

0 0 115

- vừa được xem lúc

Angular Reactive Forms: Cách sử dụng FormArray

Trong bài viết này chúng ta sẽ tìm hiểu khi nào và cách sử dụng FormArray, cả trong Component và trong Template, ngoài ra chúng ta sẽ xem cách để custom validation cho nó. Vì sao chúng ta cần sử dụng FormArray.

0 0 95

- vừa được xem lúc

RxJS và Reactive Programming

1 - Stream. Streams are a sequence of values over time.

0 0 344

- vừa được xem lúc

Mapping class Java với Angular Typescript model – Chưa bao giờ dễ đến thế

Xin chào mọi người hôm nay mình giới thiệu một loại đồ chơi cực xịn cực hay ho luôn, đây là một thư viện giúp cho mọi người tạo ra 1 class Typescript trong dự án Frontend ở đây mình lấy ví dụ là Angul

0 0 85