Biến scss góc

Question

Bài viết này tôi sẽ giải thích rõ từng thành phần cấu trúc và cách code Angular 4. Chúng ta sẽ đi lần lượt từ dễ đến khó về các khái niệm trong Angular 4, giúp bạn có cái nhìn tổng thể về cách code chuẩn nhất một hệ thống sử dụng Angular

Nội dung chính Show

3. 1 Xử lý tác vụ của người dùng
3. 2 Xử lý thao tác của người dùng (ngon hơn cách 3. 1)
3. 3 Xử lý sự kiện ràng buộc 2 chiều
6. 1 lần tiêm phụ thuộc (DI)
6. 2 Viết dịch vụ dưới dạng chung
7. 1 Ng-nếu… khác
7. 2 Ng-Mẫu
7. 3 Ng-Container
7. 4 NgSwitch và NgSwitchCase
7. 5 hàm đầu vào
7. 6 hàm đầu ra
14. 1 ổ cắm bộ định tuyến
14. 2 Cài đặt Route cho ứng dụng Angular
14. 3 tuyến đường con
14. 4 tham số

Phiên bản mới nhất của Angular hiện tại là bản 6, tuy nhiên, phiên bản chính thức được sử dụng rất tốt bởi nhiều doanh nghiệp Doanh nghiệp, công ty lớn (ứng dụng nhiều người dùng, ứng dụng dành cho doanh nghiệp) và được Google . That main is phiên bản Angular 4. Do đó chúng ta hãy lấy bản này làm chuẩn. Còn bản 5, bản 6 thật ra đang là phiên bản thử nghiệm cho cộng đồng để tăng hiệu suất, thêm nhiều cách code hay ho hơn, cũng nhưng ẩn nhiều bug hơn nếu xử lý code không tốt

Nếu bạn chưa biết gì hoặc mới học code Angular, bạn vẫn có thể sử dụng bài viết này để tham khảo và học hỏi cách code. Hãy upvote, chia sẻ bạn bè và clip (bookmark) bài viết này nếu bạn thấy hữu ích nhé

1. Các thành phần

Các thành phần là một mã khối trong ứng dụng Angular. Nó là sự kết hợp của bộ mẫu html (bộ khung html) và nhúng kèm theo mã TypeScript (hoặc Javascript). Các thành phần là độc lập với nhau và độc lập với hệ thống. Nó có thể được cài đặt vào hoặc loại bỏ khỏi hệ thống một cách dễ dàng. Một thành phần có thể hiểu là một điều khiển trên màn hình hiển thị, bao gồm giao diện html và logic mã xử lý sự kiện đi kèm điều khiển đó. Một thành phần cũng có thể lớn như là cả 1 màn hình chứa nhiều điều khiển hoặc một nhóm nhiều màn hình. Tức giận là một thành phần cũng có thể chứa và được gọi là nhiều thành phần khác được kết nối vào. Như vậy Angular 4 rất linh hoạt trong việc chia nhỏ code ra các thành phần

Trong Angular 4 chúng ta khai báo một Component với cấu trúc như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello Angular world`
})
export class HelloWorld { 
}

Như chúng ta thấy từ khóa @Component sẽ giúp định nghĩa một bộ khung html cho nó. Và bên dưới là một class HelloWorld dùng để viết code logic. Trong định nghĩa bộ khung html, chúng ta có một số thuộc tính cần chú ý sau đây

bộ chọn. Là tên được đặt để gọi một thành phần trong mã html. At ví dụ vừa rồi, từ khóa

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

24 được đặt tên cho thành phần này. Khi cần gọi thành phần này ra ở màn hình html cha, ta sẽ gọi bằng thẻ html

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

25. Gọi như vậy thì component con sẽ được render ra component cha

mẫu. Luôn luôn định nghĩa khung html cho định dạng chuỗi thành phần trong tệp này. Ví dụ ở trên chỉ định nghĩa một thẻ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

26 đơn giản. Cách này chỉ sử dụng cho đơn giản thành phần

mẫuUrl. Là đường dẫn url tới tệp html bên ngoài để tải tệp đó vào làm khung html cho thành phần này. Đây là cách mã hay được sử dụng vì cho phép tách riêng các khung html ra khỏi logic mã, người làm thiết kế sẽ chỉnh sửa tệp html riêng, độc lập với người làm mã
phong cách. Là viết kiểu css luôn vào thành phần tệp này. Cách này chỉ sử dụng cho đơn giản thành phần
phong cáchUrl. Là đường dẫn url đến file style css độc lập cho thành phần này. Cách này được khuyến khích sử dụng vì tệp css nên dành riêng cho người thiết kế ôm vào

2. Ràng buộc dữ liệu

Angular có cách code Binding (kết nối giữa html và dữ liệu) dữ liệu theo kiểu 2 chiều, nghĩa là html input thay đổi thì biến javascript sẽ ngay lập tức nhận giá trị được trả về và đảo ngược, giá trị trong js thay đổi thì . Chúng ta không cần phải đi nhanh từng giá trị của các ô đầu vào như thời gian sử dụng jQuery nữa. Để ràng buộc một chuỗi ra ngoài màn hình html thì rất đơn giản, sử dụng 2 dấu ngoặc nhọn

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

27 Ví dụ chúng ta có một Thành phần đơn giản như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

That is show string string. Nhưng nếu bạn muốn hiển thị giá trị đã có ra một văn bản đầu vào ô, thì phải viết 2 dấu ngoặc nhọn

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

28 như sau

<input type="text" [value]="title">

Chú ý một chút, trong ví dụ này thì

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

29 là từ khóa html chứ không phải tên biến,

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

30 mới là tên biến dùng để truyền vào cho

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

31 nhưng chúng ta không đóng

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

30 mà đóng khung

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

29. Điều này cho phép chúng ta linh hoạt để gán giá trị cho bất cứ thuộc tính html nào cũng được

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

3

Câu hỏi nhỏ. Liệu có thể viết lộn xộn

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

34 được hay không?

3. Xử lý sự kiện

Để gắn một sự kiện của một điều khiển html với một hàm javascript, trong Angular 4 chúng ta viết như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

5

Khi chúng tôi viết (nhấp chuột) tức thì là muốn ràng buộc sự kiện nhấp chuột của người dùng trong điều khiển này và gọi hàm updateTime() tương ứng trong mã của Thành phần này để xử lý

3. 1 Xử lý tác vụ của người dùng

Event thì có nhiều loại. Nếu sự kiện nhấp chuột, thì đơn giản là khi nhấn xong chúng ta mới xử lý hành động. Nhưng có một số loại sự kiện cần xử lý dữ liệu ngay trong lúc người dùng đang thao tác. Ví dụ người dùng gõ phím trên văn bản đầu vào, người dùng chọn một tùy chọn trong danh sách thả xuống, giá trị đang được chọn phải phản ánh ngay sang một điều khiển khác không có giới hạn

Lúc này chúng ta cần sử dụng đến các sự kiện biến. Đoạn mã ví dụ sau đây, ngay khi người dùng nhập phím vào hộp văn bản, giá trị của hộp văn bản sẽ được lưu lại vào một biến

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

35

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

7____18

3. 2 Xử lý thao tác của người dùng (ngon hơn cách 3. 1)

Cách viết mã ở ví dụ 3. 1 hoàn toàn chạy ngon và không ai bắt bẻ gì. Nhưng vấn đề là biến sự kiện, nó chứa rất nhiều chức năng/thành phần bên trong (nó chứa toàn bộ hàm xử lý hàng trăm loại sự kiện khác nhau của một thành phần, một điều khiển). Do đó sẽ không thông minh khi gửi và nhận cả một cục bộ như vậy đã đưa javascript sang trong khi cái chúng ta cần chỉ là giá trị đang được nhập của hộp văn bản

Vui lòng viết lại đoạn mã vừa rồi như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

9

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

0

Như chúng ta thấy, hàm updateValue() lúc này nhận truyền vào là một biến

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

36 (biến này được gọi là mỹ miều là

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

37) và

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

38 sẽ chứa giá trị được liên kết với hộp văn bản hiện tại

Cách viết này rất được khuyến khích sử dụng. Các bạn bác quá thì viết kiểu 3. 1 cũng được nhưng nếu biết chính xác cái sự kiện mình cần là gì thì nên viết theo 3. 2

3. 3 Xử lý sự kiện ràng buộc 2 chiều

Cấm, tôi đã bảo đảm các bạn đã viết như thế này là ràng buộc 2 chiều

<input type="text" [value]="title">

Nhưng tôi lừa các bạn đấy, viết như thế này chỉ là ràng buộc một chiều, nghĩa là chỉ hiển thị được giá trị ra thôi chứ không lấy được giá trị từ html tự động bỏ vào tiêu đề biến. Ví dụ viết như sau thì giá trị của

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

39 sẽ không thay đổi bất cứ điều gì khi ta nhập vào ô đầu vào

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

0

Từ phiên bản Angular 2 trở lên thì anh Google đã quyết định là không nên cái gì cũng ràng buộc 2 chiều

Đó là vì bind 2 chiều sẽ làm khổ html. Nó sẽ phải hiển thị liên tục khi người dùng nhập vào đầu vào ô

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

40

Rất đơn giản, lúc này chúng ta sẽ viết theo kiểu nối

Viết theo cú pháp bên dưới đây sẽ giúp bạn liên kết được 2 chiều, khi nhập vào ô đầu vào thì giá trị của

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

39 sẽ thay đổi tương ứng

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

1

Từ khóa

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

42 lúc này không phải là thuộc tính html nữa mà nó là từ khóa của Angular 4. Khi viết

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

43 chúng ta sẽ buộc chặt giá trị của html đầu vào với biến

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

30. Dẫn đến việc người dùng nhập vào ô này thì biến js

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

30 thay đổi theo => ô h1 hiện giá trị tương ứng của

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

30. Cách viết

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

47 được gọi là

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

48 hay nôm na là

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

49

4. Sử dụng các trường ngModel và biểu mẫu

Từ khóa

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

42 như ta thấy bên trên, có thể dùng để ràng buộc 2 chiều. Hiện đại hơn, biến này còn chứa cả các lớp CSS được gắn với biến mô hình có thể hiển thị tính hợp lệ của dữ liệu được nhập vào điều khiển biểu mẫu

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

2

Biến vm trong thành phần gồm 2 thuộc tính là fname và lname. Chúng ta ràng buộc nó bằng 2 đầu vào html để nhập giá trị cho nó. Tuy nhiên, cần phải xác thực giá trị nhập vào. Nên kiểm tra bằng cách gọi {{fname. className}} to view class of input textbox current is what is what

Chú ý, khi sử dụng ngModel trong một biểu mẫu html. Bắt buộc phải có thuộc tính

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

51. Nếu không có thì sẽ bị báo lỗi như sau

Nếu ngModel được sử dụng trong thẻ biểu mẫu, thuộc tính tên phải được đặt hoặc điều khiển biểu mẫu phải được xác định là 'độc lập' trong ngModelOptions

Chúng ta sẽ có các class tự động sinh ra ở input type="text" như sau

ng-untouched - Lớp CSS này có nghĩa là trang đã tải xong và đầu vào chưa được chống lại
ng-touched - Người dùng đã quên vào điều khiển, ví dụ dí chuột hoặc nhấn chuột vào nó
ng-pristine - Lớp này có nghĩa là đầu vào có giá trị được ràng buộc sẵn nhưng chưa bị sửa đổi
ng-dirty - Giá trị bên trong đã được sửa đổi, người dùng đã ánh sáng bên ngoài
ng-valid - Người dùng nhập giá trị hợp lệ
ng-invalid - User input value invalid. Ví dụ bỏ trống một đầu vào bắt buộc

Các lớp sẽ tự động sinh ra và gắn vào mỗi đầu vào khi có sự thay đổi dữ liệu trên biểu mẫu. Và nhiệm vụ của bạn là định nghĩa kiểu css tương ứng với các thay đổi đó. Ví dụ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

3

Sau khi áp dụng phong cách, thì sẽ như sau

5. ngModule

Mô-đun là khái niệm mở rộng nhất của Angular. Một mô-đun có thể bao gồm các thành phần, chỉ thị, đường ống, v. v

Mô-đun có thể được biên dịch (biên dịch) dưới định dạng trước thời hạn (AoT). Nghĩa là biên dịch ra mã thực thi để hiển thị luôn trên trình duyệt mà không cần vẽ hay gì từ đầu. Hãy tưởng tượng thành phần có html và js viết riêng, khi tải trang thì thứ 2 này mới làm mát chung để hiển thị html+data lên màn hình. AoT là thứ html+data đã sẵn sàng

Mô-đun cũng có thể gọi mô-đun con và bắt tay với các mô-đun khác

Ví dụ về mô-đun chúng ta có thể bắt gặp ngay trong ứng dụng. mô-đun. ts

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

4

Như vậy thì bản thân một ứng dụng Angular chính là một mô-đun cho tất cả, trong đó cài đặt nhiều mô-đun con

Các thuộc tính của module được định nghĩa như sau

nhập khẩu. Định nghĩa sự phụ thuộc (Dependency) của mô-đun này, mô-đun phụ thuộc sẽ được tải trước rồi mô-đun này tải mới
tuyên bố. Định nghĩa tất cả các thành phần sẽ được sử dụng trong mô-đun này. Nếu chưa định nghĩa thì các thành phần trong module sẽ không thể gọi nhau vì không tìm thấy nhao
khởi động. Mỗi ứng dụng Angular đều cần một mô-đun gốc, mô-đun này sẽ có một thành phần gốc chứa bố cục gốc sẽ được hiển thị ở chỉ mục tệp. html

6. Dịch vụ

Một dịch vụ là một đoạn mã trong ứng dụng Angular mà phục vụ cho nhiệm vụ gì đó, xử lý logic mã gì đó. Ví dụ xử lý (xử lý) dữ liệu gửi nhận từ/đến một API, hoặc cung cấp hàm xác thực

Tất nhiên là dịch vụ thì chỉ có mã không có giao diện

Để tạo ra một dịch vụ, chúng ta cần nhập và mô tả một lớp với từ khóa

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

52 lấy từ mô-đun

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

53

Ta hãy lấy một ví dụ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

5

Sau khi định nghĩa lớp TimeService là

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

54, chúng ta sẽ gọi dịch vụ này ở nhiều vị trí khác nhau trong ứng dụng

6. 1 lần tiêm phụ thuộc (DI)

Khi một lớp muốn được gọi (được tiêm vào, tiêm vào) một thành phần cần gọi hàm bên trong nó, chúng ta cần sử dụng đến Dependency Injection. Và rất đơn giản chỉ cần gọi hàm khởi tạo (hàm tạo) của thành phần là sẽ đưa dịch vụ vào để sử dụng nó bên trong thành phần đó

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

6

6. 2 Viết dịch vụ dưới dạng chung

Nếu chúng ta sử dụng dịch vụ ở nhiều nơi cùng lúc và không muốn khai báo nhiều lần, thành phần nào cũng phải tiêm nó vào. Lúc này có thể khai báo dịch vụ ở phần

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

55 của mô-đun hoặc thành phần luôn

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

77. chỉ thị

Các chỉ thị có thể được 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, ví dụ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

8

Từ Angular 2 trở đi, các chỉ thị được chia làm các loại sau đây

Các thành phần. Không nghi ngờ gì khi gọi thành phần là chỉ thị cũng được, vì rõ ràng là thành phần cho phép định nghĩa

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

56 và gọi ra như một thẻ html thẻ (

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

57)

chỉ thị cấu trúc. Là chỉ thị cấu trúc, dùng để vẽ html, hiển thị dữ liệu lên giao diện html. Ví dụ cho, ngIf
chỉ thị thuộc tính. Thêm các thuộc tính động cho phần tử html, ví dụ như Style

7. 1 Ng-nếu… khác

Đây là một chỉ thị cấu trúc, có tác dụng kiểm tra điều kiện ngay tại html. Ví dụ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

9

Mã ở trên, khi tiêu đề biến có giá trị, thì chuỗi

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

58 được hiển thị ra. And the local

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

59 is hideaway,backback, other condition are running and

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

60 are being out

Như ta thấy dùng cái directive

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

61 này rất tiện lợi khi có thể ẩn hiện html dễ dàng

7. 2 Ng-Mẫu

This also as a Structural directives. Nó giúp gom html cục bộ cần hiện

<input type="text" [value]="title">

0

Chú ý là đoạn mã vừa rồi sử dụng

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

62. Cách viết này đầy đủ hơn của 7. 1

7. 3 Ng-Container

Tương tự như

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

63 used to gom html. Nhưng điểm mạnh của

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

64 là chỉ thị thẻ này không hiển thị ra thẻ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

65 html như là

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

66 mà thẻ sẽ được ẩn đi, giúp bố cục css không bị phá vỡ nếu bạn gom html (Không sợ bị nhảy từ div cha sang div con, cấu trúc

Vui lòng xem ví dụ sau đây

<input type="text" [value]="title">

1

Will be render ra as after

Khi soi html chúng ta sẽ thấy.

Dòng div tự hoang có

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

68 nó lại chèn một thuộc tính

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

69, dẫn đến dòng đó bị xuống dòng, làm sai thiết kế bố cục

Bây giờ hãy viết lại như sau

<input type="text" [value]="title">

2

Kết quả sẽ nuột nà ngay

Đó là bởi vì html đã được sắp xếp gọn gàng.

7. 4 NgSwitch và NgSwitchCase

Chúng ta hoàn toàn có thể sử dụng câu lệnh điều kiện switch case trong Angular y như switch case trong Javascript vậy

Cách viết như sau

<input type="text" [value]="title">

3

Trong trường hợp muốn sử dụng switch case default ( if full case k a screen thì to default) thì chúng ta viết như sau

<input type="text" [value]="title">

4

7. 5 hàm đầu vào

Một lệnh hoàn toàn có thể nhận giá trị truyền vào để hiển thị hoặc tính toán

Hãy xem một ví dụ sau đây. Giả sử chúng ta khai báo một

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

70 như bình thường. Nhưng có thêm một biến

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

71 định nghĩa với từ khóa

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

72

<input type="text" [value]="title">

5

Chúng ta định nghĩa template html của component như sau

<input type="text" [value]="title">

6

Khi gọi render ra component login thì truyền biến Input cho nó như sau

<input type="text" [value]="title">

7

Nếu bạn muốn giá trị của biến

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

71 được lấy động từ một biến khác, thì vẫn có thể viết như sau nhé

<input type="text" [value]="title">

8

Trong đó

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

74 là biến true or false tùy tình hình

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

75showĐăng ký

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

76show-đăng ký

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

77

vẫn được nhé, hãy viết như sau khi khai báo @Input()

<input type="text" [value]="title">

9

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

30

7. 6 hàm đầu ra

Một chỉ thị nhận giá trị về để hiển thị được. Do đó, có thể có bất kỳ bên nào trong chỉ thị trả lại giá trị ngược lại không?

Lúc này chúng ta sẽ cần sử dụng đến EventEmitter (lấy giá trị trả lại từ sự kiện của người dùng thao tác). Ví dụ khi người dùng nhập xong id và mật khẩu của một chỉ thị. Chúng ta muốn nhận giá trị đã nhập ở một chỉ thị gọi chỉ thị đăng nhập chứ không chỉ xử lý id và pass bên trong chỉ thị đăng nhập

Lúc này cần nhập thư viện EventEmitter trước

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

31

Sau đó khai báo một

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

78 đầu ra và biến này có kiểu là EventEmitter. Chú ý lúc này đang viết trong chỉ thị con

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

32

At the html of directive con then handle event click normal

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

33

Và ở code logic thì shot value nhận được từ đầu vào gửi sang cho thằng

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

79 đang chờ chuực sẵn

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

34

Giờ thì sang viết ở

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

80 gọi

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

81, chúng ta sẽ dùng

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

79 và gán nó cho hàm

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

83 để chỉ thị cha toàn quyền xử lý

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

35

Trong lệnh cha, giờ mã lệnh thì sự kiện nhận được từ lệnh con sẽ bao gồm Đối tượng truyền sang (là id và chuyển đầu vào từ lệnh con)

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

36

Như vậy là chúng ta đã biết cách bắn giá trị từ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

84 sang

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

80 rồi nhé

8. Phát hiện thay đổi trong Angular

Để ràng buộc được 2 chiều thì rõ ràng Angular phải có cơ chế để phát hiện sự thay đổi, cho dù là từ html hay là biến js thay đổi giá trị, đều phải quét lần lượt các thành phần thì mới biết được cái gì thay đổi

Angular dùng cơ chế quét từ trên xuống dưới (từ trên xuống), tức là từ thành phần cha rồi đến thành phần con được kiểm tra lần

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

86

Rất đơn giản, mỗi thành phần trong Angular đều có một lớp đi kèm với nó để so sánh. Khi có sự thay đổi giá trị của từng biến trong thành phần (do người dùng nghịch với các sự kiện), lúc này giá trị ban đầu của thành phần được lưu trước đó sẽ lấy ra so sánh. Nếu mô hình có sự thay đổi, hiển thị là Angular lập tức gọi html đang làm việc, hiển thị giá trị mới trên DOM ngay lập tức

Đó là cách lưu giá trị và so sánh các kiểu dữ liệu giá trị như string, bool, int. Còn nếu dữ liệu là kiểu lớp phức tạp mà người dùng định nghĩa ra. Thì lúc này cơ chế so sánh giá trị sẽ sử dụng 1 trong 2 cách sau

So sánh nông (So sánh nông). Tức là một số thuộc tính của biến này (biến này là một lớp để) thay đổi, cả biến đó vẫn không được nhận xét là đã thay đổi và không cập nhật giá trị. Tại sao lại so sánh khập khiễng như thế này? . Rõ ràng là cần phải tạo một biến mới để chứa giá trị thay đổi chứ không phải bản thân giá trị đó k được phép thay đổi => cập nhật làm gì cho mất công

So sánh sâu (So sánh sâu). Move times of each property of the variable and so sánh giá trị đã bị thay đổi. Dĩ nhiên là toàn bộ giá trị của lớp phải được lưu lại trước đó để so sánh. Khi một số thuộc tính bị thay đổi, toàn bộ biến đó coi như bị thay đổi và toàn bộ html cần thay đổi theo

9. Transclusion (trao đổi giữa các chỉ thị) trong Angular

Ở mục 7, chúng ta đã biết về việc một Chỉ thị có thể nhận đầu vào và cả đầu ra. Nhưng chúng ta chỉ có thể nhập và xuất lệnh tại thuộc tính html của thẻ gọi chỉ thị. Ví dụ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

87

Nếu bây giờ chúng ta lại muốn viết vào giữa thẻ gọi chỉ thị thì sao?

Trong Angular bản 1. X thì có một khái niệm là Transclusion (trao đổi giá trị giữa các directive). Lên Angular 4 thì vẫn hỗ trợ. Lúc này ta có thể viết như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

37

Sau khi định nghĩa ra

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

88 như bên trên, ta muốn lấy ruột của nó là chữ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

89 và ở chỗ khác thì sử dụng một

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

90 để ra như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

38

Chỗ này hơi khó hiểu một chút vì không có lời gọi directive (component) gì ở html cả, mà thật ra là gọi ngầm bên dưới code ts.

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

91 đã inject và gọi

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

92 rồi, và để lấy được ruột của blue ra thì dùng tag

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

90 là sẽ lấy đc ra, và chèn

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

94 vào chỗ nào cần chèn nữa là xong.

Rõ ràng là công việc lấy được html ruột của chỉ thị cực kỳ hữu ích khi chúng ta có thể chứa html của

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

95 trong đó không giới hạn và chỉ cần khai báo 1 lần ở nhiều nơi

10. Use observables at now html

Chúng ta biết Observables là luồng dữ liệu được gửi nhận từ api. Đài quan sát sẽ chứa dữ liệu json từ máy chủ gửi tới nhưng nó không phải là dữ liệu json thuần. Nếu đưa luồng dữ liệu này cho html thì nó sẽ không hiểu được để hiển thị ra màn hình. Tuy nhiên, với từ khóa pipe async chúng ta có thể ra trực tiếp như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

39

Lúc này biến

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

96 được gọi kèm theo từ khóa

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

97, dữ liệu bên trong nó sẽ được đưa ra html

Nếu chúng ta có một mảng ở dạng Observables thì cũng hoàn toàn có thể in ra trực tiếp bằng cách sử dụng async

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

98

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

5011. Unable to input value Null

TypeScript 4 hỗ trợ việc kiểm tra giá trị Null hoặc Undefined và không cho phép gán 2 loại giá trị này cho một biến đã được khai báo theo kiểu cụ thể. Ví dụ

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

51

Một biến cũng hoàn toàn có thể được khai báo là một trong 2 kiểu dữ liệu, như ví dụ dưới đây

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

52

Mặc dù không nói gì, Typescript sẽ bậttrictNullCheck là true. Do đó, nếu muốn chuỗi có thể chứa cả giá trị null, chúng ta có thể tắt nó đi bằng cách sửa đổi trong tệp

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

99

12. Call to HTTP API and get about stream Observables

To call api from server, Angular đã trang sẵn sàng cho bạn bộ dịch vụ http nằm ở thư viện

<input type="text" [value]="title">

00. Chúng ta chỉ việc inject ( đưa vào) constructor của component để bắt đầu sử dụng. Sau đó viết mã gọi api như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

53

Hàm

<input type="text" [value]="title">

01 sẽ trả về cho bạn một dạng dữ liệu có thể quan sát được. Nó sẽ giúp mã của bạn chạy nhanh và không bị đơ vì phải chờ yêu cầu đến máy chủ. Cách mã của observable cũng rất linh hoạt giúp cho phép bạn thao tác với dữ liệu ngay khi nhận được. Ví dụ ta xử lý như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

54

Chú ý là chỗ này chúng ta sử dụng đến hàm

<input type="text" [value]="title">

02 của rxjs nên phải nhập nó vào rồi mới bắt đầu sử dụng được nhé

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

55

Dùng hàm map thì chúng ta vẫn chưa lấy được dữ liệu json thực sự, cần phải dùng hàm subcribe để đọc ra cái data đã được map

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

56

<input type="text" [value]="title">

03

May thay cho you, is still have a way writing for people. that is used to function pipe

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

97

Ví dụ đây

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

57

Và để hiển thị biến

<input type="text" [value]="title">

05 ra thì ở html chúng ta viết như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

58

<input type="text" [value]="title">

06

Chúng ta có thể sử dụng dấu chấm để gọi các thuộc tính con của nó

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

59

Chú thích một chút chỗ này.

<input type="text" [value]="title">

07 cách viết này chắc chắn là dino có giá trị khác null thì mới gọi thuộc tính con của nó ra. Cách viết này rất hay sẽ giúp tránh được ngoại lệ tham chiếu null và rất ngắn gọn

13. Nhưng tôi yêu cách code kiểu Promise, ghét tôi Observables

Trong Angular, default, rxjs used to handle data return from http request. Nhưng nếu chúng ta thích trả lại Promises cho dễ thao tác hơn. Thì rxjs đã hoàn thành toàn bộ câu trả lời. Chúng ta sẽ có hàm

<input type="text" [value]="title">

08

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

70

Cách sử dụng như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

71

This time to get data from local Promises then used to callback function

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

72

Và ở html không cần sử dụng async gì ngang cứ bắn ra giá trị nào

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

73

Hihi ngu.
<input type="text" [value]="title">
09 if variable dino which null thì vị trí này chứng tỏ?
=> Đừng lo, đã có Fugaka diệt trừ giun, hãy viết là
<input type="text" [value]="title">
10 nhé anh em. Thêm dấu ?

Hỏi ngu chút nữa. Thế thì có thể viết như thế này không?
=> Hãy thử và cảm nhận

14. bộ định tuyến

Khi sử dụng Router, chúng ta sẽ có thể xây dựng nên một trang web SPA (Single Page Application). Khi viết một mẫu tuyến đường, các thành phần sẽ được ánh xạ tương ứng với các URL cố định. And when click into link, url will load component which does not need load back both page. Dẫn đến hiệu ứng là trang web chạy trong 1 tab và các màn hình được tải động. Cách hoạt động này khác với MPA (Ứng dụng nhiều trang) thông thường thì mỗi màn hình sẽ có url tương ứng và phải bật một tab riêng trên trình duyệt

Bộ định tuyến cũng có bộ đệm, tức là thành phần đã tải một lần thì sẽ được tải lại không cần tải toàn bộ về từ máy chủ nữa

Để bắt đầu sử dụng Bộ định tuyến, khi tạo dự án bằng Angular CLI, chúng ta chạy dòng lệnh sau đây

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

74

Còn nếu dự án của bạn đã có sẵn và ứng dụng Bộ định tuyến chưa được áp dụng, hãy chạy đoạn lệnh sau để thêm Định tuyến vào ứng dụng của bạn

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

75

14. 1 ổ cắm bộ định tuyến

Mỗi một Router sẽ có một URL để tải thành phần. Và để biết được là thành phần sẽ hiển thị ra vị trí nào thì chúng ta viết đoạn mã sau vào khung html cần chèn

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

76

14. 2 Cài đặt Route cho ứng dụng Angular

Để cài đặt toàn bộ Bộ định tuyến cho một ứng dụng Angular, chúng ta cần tạo ra một đối tượng JSON chứa các thuộc tính như sau

con đường. Đường dẫn URL của thành phần hiện tại
thành phần. Ứng với đường dẫn bên trên thì load thành phần nào
chuyển hướng tới. Chuyển hướng đến URL này nếu URL ở đường dẫn không trùng lặp. Ví dụ, khi người dùng nhập URL linh tinh, họ muốn chuyển hướng và tải trang Trang chủ hoặc trang báo lỗi 404 thì cần ghi rõ URL trang Trang chủ hoặc 404 vào
```
<input type="text" [value]="title">
```
12
đường dẫnMatch. Cài đặt xem chế độ kiểm tra url là như thế nào. when the value is
```
<input type="text" [value]="title">
```
13, mean is a whole url from the head to end will must CHÍNH XÁC NHƯ TRONG BỘ ĐỊNH TUYẾN JSON. Còn khi giá trị là
```
<input type="text" [value]="title">
```
14 thì chuỗi đầu tiên của url (xác định đầu tiên) sẽ được kiểm tra. Default if not said what,
```
<input type="text" [value]="title">
```
14 will be choose

Vui lòng xem đoạn mã ví dụ về Bộ định tuyến bên dưới

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

77

14. 3 tuyến đường con

Khi chúng ta muốn một trang có các trang con bên trong nó. Ví dụ: Dữ liệu lưới sẽ bao gồm các trang Thêm, Sửa, Xóa tương ứng. Lúc này chúng ta viết thêm thuộc tính

<input type="text" [value]="title">

16 cho Route cha.

<input type="text" [value]="title">

16 là một đối tượng JSON giống đối tượng Route cha

Cách viết như sau

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

78

<input type="text" [value]="title">

18

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

79

Như vậy là các thành phần nếu sử dụng Route để định nghĩa cho nhau thì chúng ta sẽ sử dụng lại biến

<input type="text" [value]="title">

19 để kết xuất con của nó

14. 4 tham số

Toàn bộ dữ liệu có thể được truyền từ màn hình này sang màn hình kia bằng cách đưa giá trị vào trong url để gọi (hay còn gọi là cách gọi hàm bằng cách truyền URL tham số)

Các bước để thực hiện công việc này như sau

Định nghĩa giá trị cần lấy trong định nghĩa tuyến đường. Ví dụ bên dưới sẽ cho ta thấy cách định nghĩa tham số cần lấy trong url

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

80

Đọc dữ liệu từ URL truyền tới. Chúng ta cần sử dụng biến ActivedRoute của bộ @angular/router

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `Hello {{title}} world` //Hiển thị biến javascript ra html. Chú ý đoạn này sử dụng dấu ` thay vì dấu ', ví lúc này chúng ta nhúng cả code Angular vào string.
})
export class HelloWorld { 
    title = 'Angular 4'; //Đặt một biến giá trị javascript;
}

81Kết bài

Bài này là một bài dịch. Link bài gốc ở đây. https. //www. dotnetcurry. com/angular/1385/angular-4-cheat-sheet

Hi vọng các bạn sẽ chia sẻ thật nhiều cho bạn bè của mình và lưu lại bài viết này để tham khảo về sau. Hẹn gặp lại các bạn trong các bài sắp tới

programming css