Một ứng dụng Angular điển hình bao gồm nhiều thành phần.
Các thành phần điều khiển một phần của màn hình được gọi là dạng xem trong Angular.
Vì vậy, khi bạn tạo màn hình của bạn trên ứng dụng Angular của
bạn, bạn có thể chia màn hình của bạn thành nhiều lượt xem,
mỗi người trong số họ được điều khiển bởi một thành phần riêng biệt.
Cho đến nay, trong ví dụ,
chúng ta có một thành phần gốc duy nhất điều khiển toàn bộ màn hình.
Trong bài học này, chúng ta sẽ thêm vào một thành phần nữa mà mất một phần của màn hình và
kiểm soát phần đó của màn hình và chăm sóc
toàn bộ kết xuất của phần đó của màn hình, ở đây.
Hãy truy cập nhanh vào thành phần ứng dụng mà
chúng tôi đã có như là một phần của ứng dụng Angular của chúng tôi.
Vì vậy, trong thành phần này,
bạn có thể thấy rằng chúng ta đang nhập khẩu thành phần từ lõi Angular.
Vì vậy, điều này cung cấp cho chúng ta khả năng để
xác định một trang trí thành phần và áp dụng nó cho lớp của chúng tôi.
Vì vậy, điều này sẽ xác định một thành phần tạo thành một phần của ứng dụng Angular của chúng tôi.
Vì vậy, ở đây, thành phần đặc biệt này,
như bạn có thể thấy, khi bạn xác định bộ trang trí thành phần,
nó bao gồm một số thuộc tính ở đây một trong số họ là bộ chọn, ở đây.
Bây giờ, thuộc tính chọn cụ thể này định nghĩa một chuỗi ở đây.
Lưu ý, đặc biệt, những gì được chứa bên trong chuỗi.
Nó nói là ứng dụng gốc.
Bây giờ, nhìn lại tập tin index.html.
Vì vậy, tôi sẽ tập tin index.html.
Bạn có thể thấy rằng ngay tại đó,
chúng tôi đang sử dụng ứng dụng root này như là một trong những thẻ trong tập tin index.html của chúng tôi.
Vì vậy, bây giờ bạn thấy rằng thẻ cụ thể này mà bạn đang sử dụng đề cập
đến bộ chọn của những gì chúng tôi đã chỉ định ở đây, app-root.
Vì vậy, nếu bạn muốn cung cấp cho một phần của màn hình và làm cho điều đó có thể điều khiển bởi một thành phần,
sau đó bạn sử dụng bộ chọn để xác định và sau đó bạn sẽ bao gồm
các thẻ chọn vào tập tin HTML của bạn.
Điều tương tự cũng áp dụng cho các mẫu của một thành phần.
Nếu bạn bao gồm một bộ chọn khác từ một
thành phần khác vào mẫu của thành phần này,
thì phần đó của màn hình sẽ được bàn giao cho
thành phần thứ hai được điều khiển từ thành phần thứ hai.
Chúng ta cũng sẽ tìm hiểu về điều đó trong một trong những bài học sau này.
Bây giờ, phần thứ hai mà bạn thấy được chỉ định là TemplateUrl.
TemplateURL này chỉ định tên của tập tin mẫu cho thành phần cụ thể này.
Vì vậy, trong trường hợp này, như bạn thấy, đây là app.component.html.
Vì vậy, đó là lý do tại sao mẫu đang được xác định trong
tệp app.component.html cho thành phần cụ thể này.
Ngoài ra, bạn cũng có thể cung cấp các kiểu cho ứng dụng này.
Vì vậy, ở đây chúng ta đang nói StyleUrls và sau đó ở đây,
trong dấu ngoặc vuông bạn đang cung cấp câu nói này. /app.component.scss.
Vì vậy, có nghĩa là tập tin SaaS cụ thể này được áp dụng cho phong cách này.
Vì vậy, như bạn đã thấy khi chúng tôi tạo ra ứng dụng Angular của chúng
tôi, tôi đã chỉ định để định dạng phong cách mà tôi sẽ sử dụng là một SCSS.
Vì vậy, đó là lý do tại sao các tập tin này là SCSS.
Nếu bạn không sử dụng phong cách SCSS và thay vào đó tạo bình thường,
sau đó đây sẽ chỉ là các tập tin CSS và sau đó bạn có thể sử dụng CSS để xác định
các phong cách có thể được sử dụng trong các mẫu ứng dụng của bạn hoặc trong các mẫu thành phần của bạn.
Vì vậy, nếu bạn có bất kỳ
phong cách cụ thể thành phần mà bạn muốn bao gồm cho thành phần cụ thể này,
sau đó bạn sẽ bao gồm chúng trong tập tin này.
Bạn cũng có thể chỉ định mẫu và kiểu nội tuyến.
Vì vậy, nếu bạn chỉ định phong cách hoặc mẫu nội tuyến,
bạn chỉ cần chỉ định rằng như với dấu ngoặc kép ngược.
Vì vậy, ví dụ, tôi có thể đơn giản,
thay vì làm TemplateURL,
tôi chỉ có thể chỉnh sửa này để mẫu và
sau đó tôi sẽ xác định mẫu trong dấu ngoặc kép trở lại đây.
Vì vậy, tôi sẽ nói và trong trở lại qootes tôi thậm chí có thể làm các mẫu như thế này.
Vì vậy, tôi có thể nói h1 và sau đó tiêu đề.
Vì vậy, đây sẽ là những gì chúng tôi gọi là mẫu nội tuyến mà chúng tôi sử dụng trong ứng dụng của chúng tôi.
Bây giờ, nếu bạn sử dụng dấu ngoặc kép trở lại,
bạn cũng có thể sử dụng những thứ như đô la thêm vào
để sử dụng các biến trong các mẫu của bạn và vân vân.
Trong khóa học đặc biệt này,
chúng tôi sẽ sử dụng các tập tin mẫu riêng biệt
và tạo các mẫu trong các tập tin HTML thay thế.
Tôi thích phương pháp xác định các mẫu của tôi hơn là làm các mẫu nội tuyến.
Nhưng nếu mẫu của bạn là rất đơn giản và chỉ chứa hai hoặc ba dòng,
sau đó bằng tất cả các phương tiện sử dụng một mẫu nội tuyến như thế này trong ứng dụng của bạn.
Vì vậy, để tôi thay đổi nó trở lại giá trị ban đầu của tôi ở đây.
Cũng vậy với phong cách.
Ngoài ra, tôi chỉ có thể nói phong cách và sau đó trong dấu ngoặc kép trở lại
bao gồm các lớp CSS của tôi trong dấu ngoặc kép trở lại.
Mặc dù như tôi đã đề cập,
tôi thích giữ chúng trong các tập tin riêng biệt chỉ vì có mã sạch trong các tập tin.t của tôi ở đây.
Vì vậy, chúng tôi có phong cách mẫu chọn.
Chúng tôi cũng sẽ có một cái gọi là mô-đun ID.
Tại thời điểm này tôi không sử dụng nó cho thành phần của tôi,
nhưng trong một số trường hợp, bạn sẽ cần phải chỉ định ID mô-đun một cách rõ ràng cho thành phần của bạn.
Chúng ta sẽ thấy một số ví dụ về điều đó một chút sau đó.
Bây giờ ngoài ra, một thành phần là không có gì ngoài một lớp JavaScript hoặc một lớp Type Script.
Vì vậy, đó là lý do tại sao bạn thấy ở đây,
xác định một lớp nói AppComponent và sau đó bạn đang xuất khẩu lớp này.
Lý do tại sao chúng tôi sử dụng xuất khẩu ở đây,
để thành phần này có thể được nhập khẩu vào mô-đun ứng dụng của tôi.
Vì vậy, bạn đã thấy rằng chúng tôi đang nhập khẩu này vào mô-đun ứng dụng của tôi.
Vì vậy, bất cứ khi nào bạn muốn thực hiện bất kỳ thành phần hoặc một mô-đun trong di động trong mô-đun khác,
sau đó bạn sẽ luôn luôn prepend xuất vào lớp ở đây.
Vì vậy, ngoài ra, cũng,
chúng ta thấy rằng chúng ta có một số thuộc tính địa phương mà chúng tôi xác định
bên trong các lớp học của chúng tôi ở đây và những sẽ có thể truy cập thông qua mẫu của tôi.
Vì vậy, tôi có thể sử dụng những điều này trong mẫu của tôi.
Vì vậy, các thuộc tính được xác định bên trong
tập tin component của tôi có thể truy cập từ các tập tin mẫu của tôi.
Chúng ta sẽ nói về các aspector ràng buộc dữ liệu một chút sau đó trong một bài học khác.
Tóm lại, những gì chúng ta đã học được cho đến nay là một thành phần được định nghĩa bằng cách xác
định mã và cũng chỉ định mẫu tương ứng.
Vì vậy, bên trong mã bạn có thể xác định các thuộc tính và phương thức
sẽ có thể truy cập từ mẫu của bạn từ mẫu tương ứng.
Vì vậy, như bạn đã thấy, trong siêu dữ liệu,
trong trang trí, trong trang trí thành phần,
bạn chỉ định tên tệp mẫu là một trong những
thuộc tính cho lớp thành phần của bạn ở đây.
Tương tự như vậy, bất kỳ thuộc tính và phương thức mà bạn xác định trong
thành phần của bạn sẽ có thể truy cập từ mẫu của bạn.
Không chỉ vậy, bạn cũng có thể có những gì được gọi là sự kiện
ràng buộc từ mẫu của bạn trở lại thành phần của bạn.
Vì vậy, nếu bất kỳ sự kiện nào được tạo ra trong các mẫu của bạn, ví dụ,
nhấp vào một nút trên mẫu của bạn có thể kích hoạt các
cuộc gọi đến
các phương thức bên trong mã của bạn ở đây, Javascript hoặc mã Type Script ở đây.
Chúng ta sẽ thấy việc sử dụng chúng trong một trong những bài học sau này và sau đó, tôi sẽ, một lần nữa, xem
lại điểm này về ràng buộc tài sản và ràng buộc sự kiện,
và giải thích điều này cho bạn một chút chi tiết hơn.
Các thành phần trong một ứng dụng Angular có thể tự tổ chức thành một hệ thống phân cấp.
Vì vậy, bạn sẽ luôn luôn có một thành phần gốc.
Vì vậy, đối với ứng dụng của chúng tôi,
tập tin app.component.t và
mẫu HTML tương ứng tạo thành phần gốc cho ứng dụng của chúng tôi
và thành phần gốc này sau đó có thể chứa các
thành phần xuống trong một hệ thống phân cấp và có thể bao gồm các thành phần trong hệ thống phân cấp.
Chúng ta sẽ thấy rằng trong bài tập tiếp theo,
nơi chúng ta sẽ tạo ra một thành phần khác và sau đó sử dụng nó trong thành phần gốc của chúng tôi.
Vì vậy, bạn có thể có nhiều thành phần được
đưa vào thành phần gốc của bạn và
các thành phần này lần lượt có thể sử dụng các thành phần khác được bao gồm bên trong chúng.
Vì vậy, hệ thống phân cấp của các thành phần là những gì cho phép bạn thiết kế màn hình ứng dụng của bạn.
Với sự hiểu biết nhanh chóng về các thành phần
và làm thế nào các thành phần hữu ích cho việc thiết kế ứng dụng của
chúng tôi, bây giờ chúng tôi sẽ đi vào bài tập tiếp theo của chúng tôi, nơi chúng tôi sẽ tạo ra
và thêm một thành phần khác vào ứng dụng Angular của chúng tôi
và sau đó chúng tôi sẽ xác định một mẫu cho thành phần đó và sau đó chúng tôi sẽ sử dụng thành phần
đó bên trong thành phần gốc của chúng tôi để thiết kế màn hình của chúng tôi.