Trong các bài trước chúng ta đã làm việc qua với cú pháp của template, trong phần này chúng ta sẽ tìm hiểu kỹ hơn.

Hệ thống template chịu trách nhiệm việc hiển thị nội dung lên trang web, trong các web framework phổ biến khác như Django, Ruby on Rails… v.v cũng có hệ thống template tương tự như của Angular.

HTML

Ngôn ngữ chính của template là HTML, nhưng không phải các phần tử (hay các thẻ) đều hợp lệ với Angular, điển hình là thẻ <script>, với Angular thì <script> sẽ bị bỏ qua, không được biên dịch vì lý do bảo mật.

Chúng ta cũng có thể tự tạo ra các thẻ cho riêng mình thông qua component như trong các bài trước đã làm.

Cú pháp lấy dữ liệu {{…}}

Chúng ta đã làm việc với cú pháp sử dụng cặp dấu ngoặc nhọn {{...}} nhiều rồi, đây là cú pháp dùng để lấy giá trị của thuộc tính trong lớp component.

<h3>
     {{title}}
     <img src="{{name}}" style="height:30px">
</h3>

Angular sẽ lấy giá trị của thuộc tính trong lớp component rồi chuyển thành chuỗi và thay vào đoạn dấu ngoặc nhọn {{...}}.

<p>The sum of 1 + 1 is {{1 + 1}}</p>

Chúng ta cũng có thể thực hiện tính toán trong này.

Biểu thức

Biểu thức ở đây là các phép tính cộng, trừ, nhân, chia, gán, so sánh…v.v

Hầu hết các biểu thức có thể sử dụng là các biểu thức của Javascript, các biểu thức có thể sử dụng là:

• Phép gán: =, +=, -= ...
• new
• Dấu chấm phẩy (;), dấu phẩy (,)
• Phép tăng (++), giảm (--)

Nhưng không phải tất cả đều có thể dùng được:

• Không thể sử dụng toán tử bit OR (ký hiệu |) và toán tử AND (ký hiệu &)

Ngữ cảnh của biểu thức

Một “ngữ cảnh” nói một cách đơn giản là các đối tượng thực hiện các biểu thức.

{{title}}
<span [hidden]="isUnchanged">changed

Trong đoạn code trên thì title và isUnchanged là các thuộc tính của một lớp component nào đó, chẳng hạn như lớp AppComponent, và AppComponent chính là một “ngữ cảnh”.

Không phải tất cả các biến trong biểu thức luôn luôn thuộc về một đối tượng ngữ cảnh nào đó, ví dụ:

<div *ngFor="let cus of customers">{{cus.name}}</div>

Ở đây cus lại là một đối tượng trong phép duyệt mảng customers thôi.

Chúng ta không thể dùng các đối tượng toàn cục của Javascript hay Node.js…v.v như console.log, Math.max, window, document… trong biểu thức được.

Câu lệnh

Các câu lệnh là các đoạn code thực hiện một công việc gì đó để phản hồi lại các sự kiện. Ví dụ:

<button (click)="createCustomer()">Register</button>

Trong đoạn code trên thì createCustomer() chính là một câu lệnh trả lời lại sự kiện (click).

Ngữ cảnh của câu lệnh

Cũng tương tự như ngữ cảnh của biểu thức, ngữ cảnh của câu lệnh cũng là một đối tượng của lớp component đã tạo ra template đó. Chẳng hạn như trong đoạn code trên thì câu lệnh createCustomer() có thể có ngữ cảnh là đối tượng của một lớp AppComponent nào đó.

Câu lệnh gọi hàm có thể nhận vào tham số là các biến biểu thức, ví dụ:

<button (click)="onSave($event)">Save</button>
<button *ngFor="let cus of customers" (click)="createCustomer(cus)"></button>
<form #customerForm (ngSubmit)="onSubmit(customerForm)"> ... </form>

Và cũng tương tự như ngữ cảnh của biểu thức, chúng ta không thể gọi những đối tượng toàn cục như window, document, console.log, Math.max…v.v

Cú pháp kết nối dữ liệu

Đây là các cú pháp dùng để kết nối dữ liệu qua lại giữa lớp component và template, hỗ trợ việc đọc ghi dữ liệu một cách dễ dàng, chiều kết nối có thể là 1 chiều hoặc 2 chiều, tức là chỉ có thể đọc dữ liệu từ lớp component ra template hoặc ngược lại hoặc cả hai. Việc chúng ta cần làm là ghi cú pháp ra và Angular sẽ lo nốt phần bên dưới.

Nhìn chung thì có thể chia các cú pháp này ra làm 3 loại dựa theo chiều kết nối:

Loại (hay target) là tên các sự kiện, lớp, thuộc tính… và được bọc trong cặp dấu ngoặc vuông [], ngoặc tròn () hoặc sau các tiền tố bind-, on-, bindon-.