Trong video này, tôi đang sử dụng trình chỉnh sửa trực tuyến có tên là Plunker để viết và chạy mã Angular. Sách và mã kể từ đó đã được cập nhật để sử dụng StackBlitz thay thế. Để hiểu thêm về lý do tại sao và sự khác biệt giữa
Xem mã
Mã vận hành
- Viết ứng dụng đầu tiên của chúng tôi
- vòng lặp
Bắt đầu làm cho ứng dụng của chúng ta có thể tái sử dụng nhiều hơn một chút bằng cách lưu trữ thiết lập và điểm mấu chốt của trò đùa của chúng ta dưới dạng thuộc tính trên lớp thành phần của chúng ta thay vì được mã hóa cứng trong HTML
Kết quả học tập
Hiểu các lớp chi tiết hơn, cách xác định chúng và cách sử dụng chúng
Phép nội suy chuỗi là gì và cú pháp ria mép
{{ }}
Động lực
Trong chương trước, chúng ta đã tạo ứng dụng Angular đầu tiên của mình, một ứng dụng rất đơn giản chỉ có một thành phần có tên là JokeComponent
với thẻ là joke
Giờ đây, bất cứ khi nào chúng tôi muốn hiển thị trò đùa đó trong ứng dụng của mình, chúng tôi chỉ cần thêm thẻ
let joke = new JokeComponent[]
0 vào HTML của mìnhNhưng nó không thể tái sử dụng được nhiều, nó chỉ hiển thị lặp đi lặp lại cùng một trò đùa, một JokeComponent
có thể tái sử dụng nhiều hơn sẽ là nơi mà nhà phát triển có thể sử dụng các trò đùa khác nhau
Trước tiên, hãy thêm một số thuộc tính vào lớp của chúng ta, như vậy
class JokeComponent {
setup: string;
punchline: string;
}
Chúng ta đang nói rằng lớp này có hai thuộc tính,
let joke = new JokeComponent[]
2 và let joke = new JokeComponent[]
3, cả hai thuộc tính này chỉ có thể chứa let joke = new JokeComponent[]
4Ghi chú
Mã _______0_______5 được gọi là một loại và là một phần cốt lõi của TypeScript, một thứ mà bạn có thể không quen sử dụng nếu trước đây bạn chưa từng làm việc với các ngôn ngữ được nhập
Chúng ta sẽ thảo luận về Loại chi tiết hơn trong phần tiếp theo nhưng tóm lại, nếu chúng ta cố gắng làm cho các thuộc tính này chứa bất kỳ thứ gì khác ngoài chuỗi TypeScript sẽ đưa ra lỗi
Các lớp học
Hãy nhớ rằng tôi đã nói rằng các lớp là bản thiết kế cho đối tượng, hay nói cách khác là hướng dẫn về cách tạo đối tượng. Để thực sự tạo một đối tượng bằng cách sử dụng
let joke = new JokeComponent[]
6, chúng tôi sử dụng từ khóa let joke = new JokeComponent[]
7, như vậylet joke = new JokeComponent[]
joke
là một đối tượng được tạo bằng cách sử dụng lớp JokeComponent
, một từ khác cho đối tượng được tạo bằng cách sử dụng một lớp là một thể hiện của lớp hoặc chỉ là thể hiện
Vì chúng ta đã thêm một số thuộc tính vào lớp JokeComponent
nên thể hiện của lớp được tạo cũng có các thuộc tính đó
console.log[joke.setup];
console.log[joke.punchline];
Nếu chúng ta thực sự cố gắng chạy đoạn mã trên, chúng ta sẽ thấy rằng không có gì được in ra bảng điều khiển, đó là do các thuộc tính
let joke = new JokeComponent[]
2 và let joke = new JokeComponent[]
3 chưa được khởi tạo, chúng trốngVới các lớp, cách chúng ta khởi tạo các thuộc tính khi chúng ta khởi tạo một đối tượng thông qua một hàm lớp đặc biệt có tên là
console.log[joke.setup];
console.log[joke.punchline];
3class JokeComponent {
setup: string;
punchline: string;
constructor[] {
this.setup = "What did the cheese say when it looked in the mirror?";
this.punchline = "Halloumi [Hello Me]";
}
}
Bây giờ, khi chúng ta khởi tạo lớp, hàm
console.log[joke.setup];
console.log[joke.punchline];
3 được gọi và điều này sẽ khởi tạo các thuộc tính let joke = new JokeComponent[]
2 và let joke = new JokeComponent[]
3Quan trọng
Vì lợi ích của ngắn gọn, tôi đang khởi tạo các thuộc tính của chúng tôi trong hàm tạo, phương pháp được đề xuất với việc khởi tạo một thành phần là sử dụng Móc vòng đời thành phần, một lần nữa sẽ nói thêm về điều đó sau
Nội suy chuỗi
Hiện tại thiết lập và đường viền chi tiết được mã hóa cứng thành mẫu HTML của _______26_______ của chúng tôi. Thay vào đó, chúng tôi cần có mẫu xuất ra nội dung của thuộc tính của mình
Chúng tôi có thể làm điều đó trong mẫu bằng cách sử dụng cú pháp {{ }}
đặc biệt, còn được gọi là cú pháp ria mép
_{{ }}
chứa JavaScript được chạy bởi Angular và đầu ra được chèn vào HTML
Vì vậy, nếu chúng tôi đặt
class JokeComponent {
setup: string;
punchline: string;
constructor[] {
this.setup = "What did the cheese say when it looked in the mirror?";
this.punchline = "Halloumi [Hello Me]";
}
}
0 vào mẫu thì số __13_______1 sẽ được chèn vào HTMLMẫu biết về lớp JokeComponent
mà nó được đính kèm vì vậy ở giữa {{ }}
chúng ta cũng có thể đọc các thuộc tính hoặc thậm chí gọi hàm trên _______26_______ của mình và có đầu ra được chèn vào HTML
Chúng tôi chỉ muốn hiển thị các giá trị của các thuộc tính
let joke = new JokeComponent[]
2 và let joke = new JokeComponent[]
3 nên chúng tôi chỉ sử dụng các thuộc tính đó, như vậy{{setup}}
{{punchline}}
Tóm lược
Chúng tôi đã giải thích cách một lớp là một bản thiết kế cho một đối tượng và chúng tôi có thể tạo một phiên bản cụ thể của một lớp bằng cách sử dụng từ khóa
let joke = new JokeComponent[]
7Thể hiện của lớp có thể có các thuộc tính và chúng tôi có thể liên kết các thuộc tính đó với các phần của mẫu của chúng tôi bằng cách sử dụng phép nội suy chuỗi thông qua cú pháp _______25_______
niêm yết
Liệt kê 1. src/chính. ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Component} from '@angular/core';
@Component[{
selector: 'joke',
template: `
{{setup}}
{{punchline}}
`
}]
class JokeComponent {
setup: string;
punchline: string;
constructor[] {
this.setup = "What did the cheese say when it looked in the mirror?";
this.punchline = "Halloumi [Hello Me]";
}
}
@NgModule[{
imports: [BrowserModule],
declarations: [JokeComponent],
bootstrap: [JokeComponent]
}]
export class AppModule {
}
platformBrowserDynamic[].bootstrapModule[AppModule];
Bắt lỗi hay muốn đóng góp cho cuốn sách?
- Viết ứng dụng đầu tiên của chúng tôi
- vòng lặp
JavaScript nâng cao
Khóa học độc đáo này dạy cho bạn kiến thức JavaScript nâng cao thông qua một loạt câu hỏi phỏng vấn. Đưa JavaScript của bạn đến năm 2021 ngay hôm nay
Nâng cấp JavaScript của bạn ngay bây giờ
[🌲,🌳,🌴].push[🌲]Nếu bạn thấy các khóa học của tôi hữu ích, vui lòng xem xét việc trồng cây thay mặt tôi để chống biến đổi khí hậu. Chỉ $4. 50 sẽ trả cho 25 cây được trồng dưới tên tôi. Trồng cây