[MUSIC]
Chúng tôi vừa tạo ra ứng dụng Angular đầu tiên của chúng tôi trong bài tập trước đó.
Bạn phải tự hỏi, một ứng dụng Angular điển hình trông như thế nào? Cấu trúc
và kiến trúc của nó là gì, và
làm thế nào để chúng ta xây dựng một ứng dụng Angular?
Hãy nói về những điều này từng bước, bắt đầu với bài giảng này.
Xem nhanh thư mục ứng dụng, trong trình soạn thảo.
Bạn nhận thấy ngay lập tức rằng Angular CLI đã tạo ra một loạt các
tập tin trong các thư mục khác nhau trong ứng dụng của chúng tôi.
Những tệp này chứa những gì?
Làm thế nào để họ tạo thành một ứng dụng Angular?
Hãy kiểm tra chúng từng bước để hiểu kiến trúc điển hình của
một ứng dụng Angular.
Như chúng ta đã nhận ra,
các ứng dụng Angular được xây dựng như là một sự kết hợp
của HTML và một trong hai TypeScript hoặc JavaScript.
Trong khóa học này, chúng tôi sẽ sử dụng TypeScript như là ngôn ngữ của sự lựa chọn để
xây dựng ứng dụng Angular của chúng tôi.
Bản thân Angular bao gồm một số thư viện,
một số thư viện được gọi là thư viện và một số khác là thư viện tùy chọn.
Tùy thuộc vào loại của một ứng dụng Angular mà bạn đang cố gắng để xây dựng,
bạn sẽ bao gồm một số trong số này vào ứng dụng của bạn.
Như chúng ta đã học được, Angular là một framework JavaScript và
chúng tôi sẽ tận dụng nó để xây dựng ứng dụng của chúng tôi.
Để tóm tắt, ứng dụng Angular là mô-đun trong bản chất của nó và sẽ bao gồm
một số thành phần, cùng với các mẫu của họ, bao gồm các ứng dụng.
Không chỉ vậy, các thành phần này, và các phần khác của ứng dụng Angular,
như các dịch vụ, sẽ được tổ chức thành các mô-đun.
Và các mô-đun này, lần lượt, sẽ được sử dụng bởi các mô-đun cấp cao hơn.
Vì vậy, bạn có thể nhìn vào một ứng dụng Angular là một
kiến trúc mô-đun với một mô-đun gốc ở trên cùng,
mà có sự giúp đỡ của các mô-đun khác được tổ chức vào hệ thống phân cấp mô hình của bạn.
Hãy kiểm tra ứng dụng của chúng tôi để hiểu làm thế nào điều này được tạo ra.
Trước khi chúng tôi tiếp tục, mô-đun gốc theo mặc định
trong Angular thường được đặt tên là mô-đun ứng dụng.
Đi đến mã của chúng tôi, chúng ta hãy bắt đầu cuộc hành trình của chúng tôi và index.html.
Vì vậy, trong tập tin index.html này, bạn có thể thấy rằng chúng ta có mã html điển hình ở đây,
cùng với dòng đặc biệt này mà nói app-root.
Bạn ngay lập tức nhận ra chúng, điều này không giống như một thẻ HTML điển hình.
Vì vậy, chúng ta hãy bắt đầu bằng cách tự hỏi mình câu hỏi, điều này
là gì, và tại sao nó được bao gồm trong trang index.html?
Như chúng ta đã thấy, một ứng dụng Angular điển hình
là một hệ thống phân cấp của các mô-đun với một mô-đun gốc.
Ứng dụng Angular của bạn được bootstrapped bằng cách bootstrapping module gốc
để bắt đầu ứng dụng của bạn.
Vậy làm thế nào để chúng ta bootstrap một ứng dụng Angular?
Chúng tôi đã thấy trang index.html, và bạn đã thấy một phần tử có tên là app-root.
Vì vậy, hãy tự hỏi mình một vài câu hỏi nữa.
Một người bạn đồng hành với trang index.html là tệp.t chính.t.
Nếu bạn mở tập tin đó, bạn sẽ thấy rằng nó chứa một tập hợp
các báo cáo nhập khẩu trong TypeScript, như được viết ở đây.
Chúng ta không đi sâu quá nhiều vào các chi tiết, nhưng
tôi sẽ quay lại để giải thích điều này trong một thời gian ngắn.
Nhưng đặc biệt,
hãy để tôi thu hút sự chú ý của bạn đến dòng cụ thể này trong tập tin.t chính. Trong
đó nói PlatformBrowserDynamic () .BootStrapModule
và sau đó lưu ý các tham số ở đây, mà nói (AppModule).
Vì vậy, như tôi đã đề cập, trước đó mô-đun ứng dụng là
tên điển hình được đặt cho mô-đun gốc trong một ứng dụng Angular.
Nếu bạn nhìn vào hệ thống phân cấp tệp,
bạn đã thấy một tệp có tên là app_module.ts.
Chúng tôi sẽ truy cập vào tập tin đó trong một thời gian ngắn để xem những gì nó chứa.
Bây giờ, trở lại với những nhập khẩu này,
bạn có thể thấy rằng chúng ta hãy lấy ví dụ về nhập khẩu đầu tiên ở đây.
Nó nói nhập EnableProdMode từ '@angular /core'.
Vì vậy, những gì điều này xác định là chúng tôi sẽ nhập
mô-đun cụ thể này từ thư viện lõi Angular.
Và tương tự, bạn thấy thứ hai nói nhập khẩu PlatFormBrowserDynamic
từ '@angular /platform-browser-dynamic'.
Vì vậy, từ thư viện này bạn đang nhập mô-đun này vào vị trí.
Bây giờ, mô-đun PlatformBrowserDynamic cho phép bạn khởi động
ứng dụng Angular của bạn bằng cách lấy mô-đun gốc của bạn như là một tham số.
Rõ ràng có rất nhiều tập tin khác trong thư mục này và các thư mục con ở đó.
Chúng ta đừng quan tâm đến bản thân mình quá nhiều về họ vào lúc này.
Chúng tôi sẽ tìm hiểu về một số trong số họ khi chúng tôi đi cùng trong khóa học này.
Bây giờ, Angular CLI giúp tạo ra hệ thống phân cấp của các thư mục và
tập tin, với các cài đặt cần thiết
để bạn có thể khởi động ứng dụng góc cạnh của bạn và bắt đầu.
Làm điều này bằng tay là một nhiệm vụ tẻ nhạt.
Vì vậy, Angular CLI đơn giản hóa việc chuẩn bị
thư mục cho ứng dụng Angular của bạn.
Vì vậy, một lần nữa, đi đến tập tin app_module.ts.
Như tôi đã đề cập, đây là mô-đun gốc cho ứng dụng Angular của bạn.
Bây giờ thông thường, mô-đun gốc sẽ được đặt tên như tập tin app.module,
nhưng đó chỉ là một tên được đề xuất trong Angular.
Bạn sẽ thấy rằng nhiều tập tin cấu thành một ứng dụng Angular,
có những cách đề xuất để đặt tên cho những tập tin đó.
Khi chúng ta đi qua khóa học, chúng ta sẽ tìm hiểu cụ thể về từng
tập tin này.
Vì vậy, tham gia một cái nhìn vào nội dung của app_module.t,
bên trong đó bạn thấy một tập hợp các báo cáo nhập khẩu ở đó.
Lấy một cái nhìn nhanh vào chúng nó nói import {BrowserModule} từ
'@angular -platform-browser'.
Nhập {NGModule} từ '@angular /core'.
Và NGModule là một mô-đun góc cạnh.
Chúng ta sẽ tìm hiểu thêm một chút về nó sau.
Ngoài ra, bạn thấy một tuyên bố nhập khẩu khác ở đây,
cho biết import {AppComponent} from '. /app.component '.
Và nhìn vào các tập tin ở đây,
bạn đã thấy một app.component.tsfileware, và
sau đó một số tập tin khác ở đây, bao gồm một app.component card.html,
một app.component.acss, và các tập tin khác.
Bây giờ, tuyên bố này xác định rằng mô-đun gốc này sẽ bao gồm thành phần này,
và sẽ tạo thành lời khen gốc của ứng dụng Angular của bạn.
Một ứng dụng Angular điển hình, như chúng ta đã thấy, bao gồm một số
mô-đun với mô-đun gốc là mô-đun chính,
giúp bạn khởi động ứng dụng Angular của bạn.
Mô-đun gốc là một mô-đun Angular với một tính năng, hoặc là một lớp.
Vì vậy, đây là nơi bạn thấy việc sử dụng một lớp TypeScript ở đây,
vì vậy nếu bạn đi xuống vào các mô-đun màu đỏ xuống dưới đây bạn sẽ thấy
tuyên bố này được gọi là lớp xuất khẩu AppModule.
TypeScript thêm các lớp vào mã JavaScript điển hình của bạn.
Nếu bạn chỉ quen thuộc với JavaScript ES-5,
thì các lớp học vẫn chưa được giới thiệu ở đó, nhưng
các phiên bản JavaScript mới hơn sẽ giới thiệu sự hỗ trợ cho các lớp học.
TypeScript cũng có hỗ trợ cho các lớp học.
Vì vậy, nếu bạn có kinh nghiệm với lập trình hướng đối tượng,
bạn đã quen thuộc với các lớp học.
Vì vậy, loại phương pháp tiếp cận đó đang được đưa vào JavaScript với sự ra đời
của các lớp học trong TypeScript và các phiên bản tương lai của JavaScript.
Ngoài ra bạn sẽ nhận thấy rằng lớp này có
một trang trí Ngmodule liên kết với điều đó.
Vì vậy, một decorator, một lần nữa, một chức năng của
nó sửa đổi các lớp JavaScript.
Chúng ta sẽ thấy việc sử dụng trang trí ở nhiều nơi trong ứng dụng Angular của chúng tôi.
Đây là một Ngmodule.
Trình trang trí cho phép bạn xác định một số chi tiết về
mô-đun ứng dụng này.
Vì vậy, chức năng decorator này có một
bộ siêu dữ liệu nhất định để giúp bạn mô tả mô-đun này.
Vì vậy, đối tượng siêu dữ liệu này ở đây chứa, như bạn có thể thấy,
khai báo, nhập khẩu, nhà cung cấp, bootstrap.
Và cũng sẽ chứa xuất khẩu nếu mô-đun này đang xuất khẩu một cái gì đó có thể được
sử dụng bởi một mô-đun khác.
Vì điều này xảy ra là mô-đun gốc, chúng tôi không có một xuất khẩu từ mô-đun này.
Vì vậy, thay vào đó chúng tôi chỉ có khai báo, nhập khẩu, nhà cung cấp, và bootstrap.
Vì vậy, ở đây một trong những điều này là khá thẳng về phía trước để hiểu.
Nó chỉ định rằng để bootstrap ứng dụng Angular này,
chúng ta cần phải bootstrap các AppComponent.
Vì vậy, AppComponent là thành phần gốc của ứng dụng Angular của chúng tôi.
Ngoài ra, phần nhập khẩu chỉ định các thuộc tính,
thấy tất cả các mô-đun này cần phải được nhập khẩu để được sử dụng với mô-đun ứng dụng này.
Vì vậy, mô-đun ứng dụng này bây giờ phụ thuộc vào các mô-đun khác.
Vì vậy, đây là những mô-đun sẽ được nhập khẩu vào các mô-đun ứng dụng như là
một phần của hệ thống phân cấp, do đó lý do tại sao chúng tôi nhập các mô-đun này lên đây.
Vì vậy, khi bạn nhập các mô-đun,
bạn đang chỉ định ở đây nói rằng mô-đun ứng dụng sẽ sử dụng mô-đun này.
Vì vậy, thuộc tính import xác định những mô-đun cần phải được nhập khẩu hoặc
những mô-đun mà trên đó mô-đun cụ thể này là phụ thuộc vào.
Các khai báo ở đây, thuộc tính khai báo,
là thuộc tính khai báo
các lớp view thuộc về mô-đun cụ thể này.
Vì vậy, các lớp view trong trường hợp của một mô-đun Angular
sẽ ở dạng của một trong hai thành phần, chỉ thị, và ống dẫn.
Chúng ta sẽ nói về các chỉ thị và đường ống một chút sau đó trong khóa học này,
chúng ta sẽ nói về các thành phần trong bài học tiếp theo.
Các nhà cung cấp chỉ định tất cả các dịch vụ mà
mô-đun cụ thể này sẽ sử dụng. Các
dịch vụ mà chúng ta sẽ nói về chi tiết hơn một chút
trong mô-đun tuần tới.
Chúng tôi sẽ nói thêm chi tiết về các dịch vụ, cách chúng tôi tạo ra chúng,
và cách chúng tôi có thể sử dụng chúng với ứng dụng Angular của chúng tôi.
Để tóm tắt những gì chúng tôi đã học được cho đến nay, chúng tôi nhận ra rằng một mô-đun
trong một ứng dụng Angular có thể bao gồm một tập hợp các thành phần và
dịch vụ sẽ được yêu cầu của mô-đun này bằng cách nhập chúng.
Và chúng sẽ được khai báo bằng cách sử dụng tài sản khai báo
của trình trang trí Ngmodule trong mô-đun ứng dụng của chúng tôi.
Bây giờ, các thành phần này có thể phụ thuộc vào
các thành phần khác, dịch vụ, hoặc chỉ thị, hoặc
đường ống, như chúng ta sẽ thấy trong phần còn lại của khóa học cụ thể này.
Vì vậy, với điều này chúng tôi có một ý tưởng thô về cách một ứng dụng Angular điển hình được cấu trúc.
Quay trở lại mã của chúng tôi, bây giờ là thời gian để sử dụng để kiểm tra
tệp app.component.t này, và tệp app.component.html.
Trong đó tuyên bố mẫu cho thành phần của chúng tôi,
và tập tin app.component.t,
trong đó xác định phần TypeScript của thành phần của chúng tôi.
Bây giờ, chúng ta sẽ làm điều đó trong bài học tiếp theo, nơi chúng ta sẽ đối phó với các thành phần và
cách chúng ta có thể tạo ra các thành phần mới và thêm chúng vào ứng dụng Angular của chúng tôi.
[ NHẠC]