Trong bài tập trước,
chúng tôi giàn giáo ra ứng dụng Angular cơ bản đầu tiên của chúng tôi.
Như tôi đã đề cập, chúng tôi sẽ làm việc trên ứng dụng Angular đó và phát triển
nó hơn nữa trong suốt phần còn lại của khóa học này.
Bây giờ, trước khi chúng tôi bắt đầu làm việc trên ứng dụng Angular của chúng tôi,
hãy cấu hình ứng dụng Angular của chúng tôi để sử dụng một vài mô-đun bổ sung, cho
phép chúng tôi thiết kế các mẫu cho ứng dụng Angular của chúng tôi.
Chúng tôi sẽ sử dụng mô-đun Angular Material để thiết kế các bố cục giao diện người dùng.
Mô-đun Vật liệu góc cung cấp cho chúng tôi một số thành phần bố trí thú vị
mà chúng tôi có thể sử dụng trong việc thiết kế các mẫu thành phần Angular của chúng tôi.
Ngoài ra, chúng tôi sẽ sử dụng bố cục flex dựa trên bố cục CSS flex, cho
phép chúng tôi thực hiện thiết kế đáp ứng trong ứng dụng Angular của chúng tôi.
Vì vậy, trong bài tập này,
chúng ta sẽ làm những cấu hình này.
Trên đường đi, chúng ta sẽ tìm hiểu kiến thức ngắn gọn đầu tiên về các thành phần,
ngay cả trước khi chúng ta tiếp tục kiểm tra các thành phần chi tiết hơn trong bài học tiếp theo.
Để bắt đầu, chúng ta hãy bắt đầu hành trình của chúng tôi với một truy cập nhanh vào tệp app.component.ts.
Đây là tệp hỗ trợ
thành phần gốc tạo thành một phần của ứng dụng Angular của chúng tôi.
Bây giờ, hãy nhìn vào thành phần gốc này,
có một vài điều sẽ trở nên rất rõ ràng đối với bạn ngay cả khi không có nhiều lời giải thích.
Điều đầu tiên mà tôi muốn thu hút sự chú ý của bạn là tuyên bố nhập khẩu này.
Như bạn có thể thấy, đây là nhập khẩu lớp thành phần từ thư viện lõi Angular.
Sau đó, chúng tôi đang chuẩn bị lớp AppComponent của chúng tôi ở đây,
và xuất khẩu lớp đó.
Vì vậy, trong lớp AppComponent này mà chúng tôi đã tuyên bố,
chúng tôi có một biến mà chúng tôi đã tuyên bố ở đây gọi
là title, mà hiện đang được gán để là một chuỗi.
Bây giờ, hãy nhìn nhanh vào biến này,
bạn ngay lập tức bắt đầu tự hỏi,
làm thế nào là điều này liên quan đến những gì chúng ta đã thấy trong trình duyệt,
khi bạn thấy ứng dụng Angular của chúng tôi được hiển thị trong trình duyệt,
ứng dụng Angular đã hiển thị chính xác những từ này trong trình duyệt.
Thật vậy, biến này đóng một vai trò quan trọng trong việc
đưa ra quan điểm mà bạn đã thấy trong trình duyệt của chúng tôi.
Bây giờ, ngoài ra, bạn cũng thấy rằng
lớp thành phần này được gắn thêm với một decorator ở đây.
Vì vậy, một lần nữa, đây là một trang trí khác mà bạn sẽ gặp phải trong Angular.
Vì vậy, điều này như chúng ta thấy là một trang trí thành phần.
Các trang trí thành phần nội bộ có một đối tượng JavaScript như một tham số ở đây,
và các thuộc tính đầu tiên mà bạn thấy ở đây gọi là selector: app-root.
Bây giờ, nếu bạn nhớ lại khi chúng tôi nhìn vào tập tin index.HTML,
chúng tôi thấy rằng chúng tôi đã bao gồm một phần tử có gọi là app-root.
Bây giờ, bạn bắt đầu thấy nguồn gốc ứng dụng đó phát sinh từ đâu.
Vì vậy, đây là chọn cho các thành phần mà chúng tôi khai báo ở đây,
đó là những gì được sử dụng trong lớp mẫu của chúng tôi để xác
định nơi xem tương ứng với thành phần này sẽ được hiển thị trong trình duyệt.
Thuộc tính thứ hai mà bạn xác định ở đây là TemplateURL.
Điều này trỏ đến một tập tin,
một tập tin HTML như bạn có thể thấy,
trong đó có các mẫu tương ứng với thành phần cụ thể này.
Mẫu xác định chế độ xem cho thành phần này.
Thuộc tính thứ ba mà bạn xác định ở đây như bạn có thể thấy, nói, StyleUrls,
mà như bạn nhận thấy ở đây được gán cho các tập tin app.component.scss.
Vì vậy, tập tin này nên chứa tất cả các mã scss có thể được
sử dụng cho phong cách CSS cho mẫu thành phần của chúng tôi.
Vì vậy, đây là một truy cập nhanh vào các tập tin app.component.t.
Bây giờ, chúng ta hãy đi đến tệp App.Component.html,
và xem nhanh mẫu.
Đi vào tệp App.Component.html,
bạn thấy rằng tệp app.component này,
mã HTML ở đây chỉ chứa một thẻ h1 với một cái gì đó ở đây với một dấu ngoặc kép.
Bây giờ, rõ ràng, đây không phải là một cái gì đó mà bạn đang quen với kiến thức của bạn về HTML,
hoặc CSS hoặc JavaScript mà bạn đã thấy trước đó.
Đây là cú pháp góc.
Đây là những gì chúng tôi gọi là nội suy.
Điều này đang sử dụng liên kết dữ liệu một chiều của Angular.
Tôi sẽ đưa ra một vài điều khoản với anh vào lúc này. Hãy
giữ các điều khoản này, chúng tôi sẽ quay lại để xem xét
chi tiết hơn trong các bài học còn lại của khóa học này.
Điều đầu tiên như tôi đã đề cập là nội suy,
thứ hai mà tôi đề cập là ràng buộc dữ liệu một chiều.
Ngoài ra, bạn ngay lập tức thấy rằng đây là biến mà bạn thấy trong
tệp đồng hành, TypeScript, định nghĩa mã TypeScript tương ứng với thành phần App.
Vì vậy, một khi bạn chỉ định một cái gì đó như
thế này ở đây, ngụ ý là bất cứ giá trị cho tiêu đề này sẽ được thay thế tại chỗ ở
đây và sẽ được sử dụng như là mã HTML bên trong cho thẻ h1 này ở đây.
Đó là mục đích của việc đưa vào đây.
Bây giờ chúng ta sẽ tiếp tục cài đặt một số
mô-đun quan hệ góc khác mà sẽ cho phép chúng tôi thiết kế các mẫu.
Sau đó, chúng tôi sẽ trở lại tập tin App.Component.html này.
Sau đó thiết kế lại mẫu này một chút sau đó trong bài tập này.
Để giúp chúng tôi thiết kế chế độ xem đáp ứng trong ứng dụng Angular của
chúng tôi, chúng tôi sẽ có sự giúp đỡ của một vài
mô-đun liên quan cho Angular được gọi là mô-đun Vật liệu góc.
Mô-đun Vật liệu góc cung cấp cho chúng tôi một số thành phần.
Các thành phần bố trí mà chúng tôi có thể sử dụng trong việc thiết kế
các mẫu mới cho các thành phần Angular của chúng tôi.
Mô-đun Vật liệu góc nếu bạn muốn so sánh điều này có phần giống như những gì Bootstrap
cung cấp cho chúng tôi để thiết kế các trang web của chúng tôi mà chúng tôi đã kiểm tra trong khóa học trước đó.
Ngoài ra, tôi sẽ sử dụng một mô-đun khác được gọi là mô-đun bố trí Angular flex.
Mô-đun layout flex cung cấp hỗ trợ cho việc sử dụng CSS
flex layout trong các mẫu Angular của chúng tôi cho các thành phần Angular của chúng tôi.
Bây giờ, hai mô-đun này cần phải được
cài đặt một cách rõ ràng và sau đó nhập khẩu vào ứng dụng Angular của
chúng tôi, đó là những gì chúng ta sẽ làm trong bước tiếp theo.
Nhưng trước khi chúng tôi đi về phía trước,
một câu hỏi mà bạn có thể tự hỏi là,
tại sao không sử dụng Bootstrap để thực hiện việc thiết kế các mẫu cho ứng dụng Angular của chúng tôi?
Thật vậy, bạn cũng có thể sử dụng Bootstrap để thiết kế các mẫu cho ứng dụng Angular của chúng tôi.
Nhưng bạn chỉ có thể sử dụng
các thành phần CSS một phần của Bootstrap trong ứng dụng Angular của bạn.
Các thành phần dựa trên jQuery.
Các thành phần JavaScript không thể được sử dụng rõ ràng có thể có một số xung đột
giữa các thành phần dựa trên jQuery từ Bootstrap và mã Angular chính nó.
Vì vậy, tốt nhất là tránh sử dụng các thành phần JavaScript từ Bootstrap
trong trường hợp bạn chọn sử dụng Bootstrap làm cách để thiết kế các mẫu Angular của bạn.
Nhưng mặt khác,
tôi cũng nghĩ rằng điều này sẽ cung cấp cho chúng ta một cơ hội tốt để học có được một
khung bố trí giao diện người dùng khác là khung vật liệu Angular.
Vì vậy, đó là lý do tại sao tôi chọn sử dụng khung vật liệu Angular
và bố cục Angular flex trong khóa học cụ thể này.
Bây giờ, khi chúng ta trải qua phần còn lại của khóa học này,
tôi sẽ không giải thích rõ ràng cách sử dụng
các thành phần vật liệu góc hoặc cách sử dụng Angular Flex-Layout.
Thay vào đó, chúng ta sẽ học chúng bằng cách xem xét các ví dụ.
Chúng tôi sẽ sử dụng hai,
cả hai thành phần vật liệu góc tốt nhất và hỗ trợ Angular Flex-Layout,
khi chúng tôi thiết kế các mẫu của chúng tôi cho các thành phần góc của chúng tôi trong khóa học đặc biệt này.
Vì vậy, bằng quá trình sử dụng các thành phần này,
bạn cũng sẽ trên đường đi,
tìm hiểu làm thế nào để sử dụng cả vật liệu góc và góc
Flex-Layout trong ứng dụng Angular của bạn.
Tôi nghĩ rằng bằng cách thực hiện các bài tập,
bạn sẽ học được nhiều hơn về Vật liệu góc.
Bây giờ, để giải thích các khía cạnh khái niệm về lý do tại sao
các thành phần vật liệu góc làm việc theo cách họ làm hoặc làm thế nào Grid hoạt động ví dụ,
hoặc làm thế nào một thiết kế đáp ứng hoạt động,
chúng tôi đã kiểm tra một số trong các khóa học trước đó trên Bootstrap.
Vì vậy, các khái niệm tương tự cũng sẽ đến với sự trợ giúp của chúng tôi.
Thay vào đó, chúng ta sẽ xem xét cơ chế sử dụng cả vật liệu góc và góc
Flex-Layout trong ứng dụng Angular của chúng tôi trong khóa học cụ thể này.
Để bắt đầu sử dụng vật liệu góc,
tất nhiên điều đầu tiên bạn cần làm là cài đặt mô-đun Vật liệu góc.
Vì vậy, tại dấu nhắc nhập npm install —save @angular /material.
Vì vậy, như bạn có thể thấy,
chúng tôi chỉ định tất cả các mô-đun Angular liên quan với @angular,
vì vậy bạn sẽ thấy cũng điều tương tự cho Flex-Layout.
Chúng tôi đang cài đặt phiên bản 6.4.7 của mô-đun Vật liệu góc.
Ngoài ra, mô-đun vật liệu yêu cầu lắp đặt CDK.
Vì vậy, chúng tôi cũng sẽ cài đặt đó bằng cách làm
npm cài đặt @angular /cdk @6 .4.7 —save,
và cài đặt cùng với Góc vật liệu.
Vì vậy, Vật liệu góc sử dụng cdk góc cho các thành phần của nó.
Ngoài ra, khi bạn đang sử dụng Angular Material,
bạn cũng cần nhập mô-đun hoạt hình Angular vào ứng dụng Angular của bạn.
Bắt đầu với phiên bản Angular bốn,
hỗ trợ hoạt hình Angular đã được trích xuất
ra khỏi các mô-đun cốt lõi vào mô-đun riêng biệt của nó.
Vì vậy, có nghĩa là nếu bạn cần phải
sử dụng các hình ảnh động trong ứng dụng Angular của bạn,
bạn cần phải cài đặt một cách rõ ràng các mô-đun hình ảnh động Angular.
Vì vậy, chúng ta hãy đi trước và cài đặt nó quá.
Vì vậy, bạn sẽ nói
npm cài đặt —save @angular /animation @6 .1.7.
Ngoài ra, một mô-đun khác mà tôi sẽ cài đặt
cùng nhau được gọi là HammerJS.
Mô-đun HammerJS được Angular sử dụng
để hỗ trợ một số cử chỉ trong ứng dụng Angular của bạn.
Vì vậy, đó là lý do tại sao chúng tôi cài đặt HammerJS cũng trong ứng dụng của chúng tôi,
và phiên bản hiện tại của HammerJS mà chúng tôi đang sử dụng là 2.0.8.
Bây giờ, chúng tôi đã cài đặt bất cứ điều gì chúng tôi cần
cho mô-đun vật liệu góc được sử dụng trong ứng dụng Angular của chúng tôi.
Tiếp theo, tôi sẽ chuyển sang cài đặt
Angular Flex-Layout trong ứng dụng Angular của tôi.
Vì vậy, để làm điều đó, tôi pad nhắc
npm cài đặt —save @angular/flex-layout
và chúng tôi sẽ cài đặt phiên bản mới nhất của điều đó.
Vì vậy, bây giờ chúng ta có tất cả các mảnh mà chúng ta cần cho ứng dụng Angular của chúng tôi cài đặt, chúng ta
hãy đi trước và sau đó cấu hình ứng dụng Angular
của chúng tôi để sử dụng các mô-đun mới mà chúng tôi cài đặt vào ứng dụng Angular của chúng tôi.
Điều đầu tiên mà chúng tôi sẽ làm là đi đến tập tin index.HTML,
và sau đó chúng tôi sẽ cấu hình các tập tin index.HTML để sử dụng các biểu tượng vật liệu góc.
Vì vậy, để bao gồm các biểu tượng vật liệu góc để chúng có thể được
sử dụng trong các mẫu của ứng dụng Angular của bạn, vì vậy,
hãy để tôi đi ngay ở đó trong đầu của index.HTML,
và sau đó tạo một liên kết mới với
href=” https://fonts.googleapis.com/icon?family=Material+Icons "và đây là một phong cách tờ.
Vì vậy, với điều này, bây giờ tôi có thể sử dụng các biểu tượng vật liệu góc trong
ứng dụng Angular của tôi bất cứ nơi nào tôi chọn để làm như vậy trong các mẫu.
Bước tiếp theo là đi đến ứng dụng module.t và
sau đó nhập ba mô-đun mà chúng tôi vừa cài đặt.
Vì vậy, một trong những đầu tiên mà tôi sẽ nhập khẩu được gọi là
BrowserAnimationsModule mà tôi sẽ nhập khẩu từ
@angular /platform-trình duyệt/hoạt hình. Vì vậy, bây giờ một trong những tiếp theo
mà tôi sẽ nhập khẩu là MaterialToolBarModule.
Vì vậy, điều này nhập khẩu mô-đun @angular /vật liệu/thanh công cụ
có thể được sử dụng trong các mẫu ứng dụng Angular của chúng tôi.
Vì vậy, Vật liệu góc, và cũng
nhập FlexlayoutModule từ @angular /flex-layout.
Vì vậy, một khi chúng tôi có tất cả các mô-đun nhập khẩu sau đó một thay đổi bổ sung mà tôi cần phải
làm là- oh hãy để tôi cũng nhập khẩu Hammer.JS trong khi tôi đang ở ngay đó.
Vì vậy, hãy để tôi nhập
Hammer.JS vào ứng dụng của tôi.
Và một khi tôi ở đó,
sự thay đổi khác mà tôi cần làm là cũng bao gồm
những mô-đun vào đầu vào của trình trang trí mô-đun NG ở đây.
Vì vậy, tôi sẽ đi đến đó và nói mô-đun trình duyệt,
mô-đun hoạt hình trình duyệt ở đó và sau đó sau khi mô-đun HTTP,
tôi sẽ nhập các mô-đun thanh công cụ vật liệu và cũng
là mô-đun bố trí flex như một phần của các đầu vào bên trong trình trang trí mô-đun NG cho mô-đun ứng dụng của tôi.
Vì vậy, với điều này tất cả các cấu hình của tôi để sử dụng mô-đun thanh công cụ vật liệu và
mô-đun bố trí flex góc và cùng với
các mô-đun hình ảnh động trong góc được hoàn thành.
Bây giờ chúng ta hãy bước vào mẫu thành phần và tận dụng thành phần
vật liệu góc đầu tiên của chúng tôi trong việc thiết kế bố cục
cho thành phần ứng dụng của chúng tôi.
Đi đến tập tin mẫu thành phần ứng dụng,
tôi sẽ thay thế điều này bây giờ với
một thành phần vật liệu góc
được gọi là mat-toolbar.
Vì vậy, mat-toolbar cho phép tôi thiết kế
một thanh công cụ mà tôi có thể sử dụng trong ứng dụng góc cạnh của tôi.
Thanh công cụ thường được hiển thị ở đầu trang của bạn trong ứng dụng của bạn.
Vì vậy, đối với thanh công cụ này, tôi sẽ chỉ định màu sắc là chính.
Chúng ta sẽ thấy điều này có nghĩa là gì trong một thời gian ngắn.
Và chúng tôi cũng sẽ đóng thanh công cụ MD này ở đây.
Bây giờ bên trong này tôi sẽ sử dụng một khoảng với
tên của nhà hàng của tôi mà tôi đang thiết kế trang web này.
Vậy, Ristorante Con Fusion.
Bây giờ bạn thấy lý do tại sao tôi đặt tên thư mục này là sự nhầm lẫn.
Vì vậy, những gì là bản cập nhật mà chúng ta cần phải làm cho các thành phần ứng dụng HTML tập tin.
Trong khi chúng tôi đang ở đó, chúng tôi cũng sẽ bao gồm một vài bản cập nhật SCSS vào tập tin Styles.scss của tôi.
Vì vậy, nếu bạn đi xuống vào mã của bạn ở đây,
bạn sẽ tìm thấy tập tin Styles.scss này ở đây.
Vì vậy, đây là nơi bạn có thể bao gồm tất cả các phong cách toàn cầu trong
tập tin này và điều này sẽ có sẵn cho tất cả các thành phần để sử dụng.
Mỗi thành phần có tệp SCSS riêng của mình nơi bạn có thể bao gồm
tùy chỉnh cấp thành phần hoặc
mã SCSS cấp thành phần được sử dụng trong đó thành phần cụ thể.
Chúng tôi sẽ sử dụng cả hai cách tiếp cận trong
ứng dụng góc cạnh này mà chúng tôi đang phát triển trong khóa học này.
Nhưng ngay bây giờ tôi sẽ cập nhật các
tập tin styles.scss chính với một số mã sẽ hữu ích cho toàn bộ ứng dụng góc cạnh của tôi.
Điều đầu tiên mà tôi sẽ làm,
là nhập một chủ đề được xây dựng sẵn có thông qua tài liệu góc cạnh.
Chủ đề được xây dựng sẵn trong vật liệu góc cạnh cung cấp cho chúng ta một cách xác
định màu sắc nhất định và cách một số thứ được bố trí
trong các thành phần vật liệu góc cạnh của tôi.
Các màu sắc sẽ có sẵn thông qua khung được xây dựng sẵn màu chính của chúng tôi
, màu nhấn và màu cảnh báo.
Bây giờ chủ đề cụ thể mà tôi sẽ sử dụng được gọi là màu tím sâu.
Vì vậy, trong trường hợp này màu chính sẽ là màu tím sâu.
Màu nhấn sẽ có màu hổ phách và màu cảnh báo sẽ có màu đỏ trong trường hợp này.
Bây giờ bạn có thể xây dựng các chủ đề vật liệu góc cạnh
của riêng bạn mà bạn có thể sử dụng trong ứng dụng của bạn nhưng tôi sẽ
để lại đó như một bài tập cho bạn để khám phá một mình.
Ngay bây giờ trong ứng dụng góc cạnh của tôi, tôi sẽ sử dụng một trong
những thứ được xây dựng sẵn gọi là hổ phách màu tím sâu.
Vì vậy, để làm điều đó đi đến các tập tin Styles.scss,
tôi sẽ nhập
tài liệu góc
được xây dựng sẵn chủ đề sâu màu tím amber.CSS.
Vì vậy, một chủ đề được xây dựng sẵn này tôi sẽ sử dụng trong ứng dụng góc cạnh của tôi.
Bạn sẽ sớm thấy chủ đề được xây dựng sẵn này hoạt động như thế nào
trong ứng dụng góc cạnh trong các mẫu mà chúng tôi thiết kế cho ứng dụng góc cạnh của chúng tôi.
Ngoài ra, tôi sẽ cấu hình một số thuộc tính cho
cơ thể của tôi của trang index.HTML vì vậy tôi sẽ chỉ định padding là zero,
lề là zero, và sau đó gia đình phông chữ mà tôi sẽ
sử dụng là rubato hoặc sans serif trong ứng dụng của tôi.
Bạn có thể chọn để sử dụng bất cứ điều gì bạn muốn trong các ứng dụng góc cạnh của bạn.
Tôi đã chọn để sử dụng hai trong ứng dụng góc cạnh của tôi.
Hãy lưu các thay đổi,
và chúng ta hãy đi và xem nhanh ứng dụng góc cạnh của chúng tôi trong trình duyệt.
Trước khi bạn làm điều đó,
hãy đảm bảo rằng dịch vụ NG của bạn đang chạy trong
một trong các cửa sổ thiết bị đầu cuối trong máy tính của bạn.
Máy chủ phát triển nên được liên tục chạy để nó sẽ tự động thực hiện
decompilation và sau đó tải
phiên bản cập nhật của ứng dụng góc vào cửa sổ trình duyệt.
Đi đến trình duyệt,
bây giờ bạn thấy những thay đổi mà chúng tôi đã thực hiện đối với
các ứng dụng góc được phản ánh vào chế độ xem trong
trình duyệt của tôi, vì vậy bạn có thể thấy rằng bây giờ chúng tôi có một thanh công cụ ở phía trên cùng với
các từ ngữ mà chúng tôi bao gồm trong các thành phần ứng dụng tập tin mẫu ở đó.
Và bạn có thể thấy màu sắc đã được áp dụng cho thanh công cụ.
Vì vậy, màu sắc, màu chính,
vì vậy đây là màu tím sâu được áp dụng cho thanh công cụ.
Bây giờ chủ đề mà chúng tôi đã xác định sẽ thêm màu tím hoặc màu hổ phách sâu,
tùy thuộc vào những gì được sử dụng bởi các thành phần vật liệu góc cạnh cụ thể
mà chúng tôi sử dụng trong các mẫu ứng dụng góc cạnh của chúng tôi.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng tôi đã cấu hình ứng dụng góc cạnh của chúng tôi để
sử dụng vật liệu góc cạnh và bố cục uốn cong góc cạnh.
Chúng tôi cũng đã sử dụng
thành phần vật liệu góc đầu tiên của chúng tôi trong tập tin mẫu thành phần ứng dụng.
Và chúng tôi đã sử dụng chủ đề tích hợp từ vật liệu góc cạnh cho ứng dụng góc cạnh của chúng tôi.
Lưu tất cả các thay đổi và sau đó đây là thời điểm tốt
để bạn thực hiện một cam kết git với thông điệp cấu hình góc cạnh.