Trước khi chúng tôi tiến lên phía trước với phần còn lại của bài tập và bài tập trong khóa học này,
tôi nghĩ rằng đây sẽ là thời điểm tốt cho tôi để
cung cấp cho ứng dụng góc cạnh của tôi một cấu trúc đẹp.
Vì vậy, đây là nơi tôi sẽ thêm vào đầu trang và chân trang
cho ứng dụng góc cạnh của tôi để cách
giao diện người dùng được trả lại hấp dẫn hơn rất nhiều so với những gì nó đã được cho đến nay.
Vì vậy, chúng ta hãy xem làm thế nào chúng ta có thể xây dựng nhiều thành phần để
chiếm các phần khác nhau của màn hình trong ứng dụng góc cạnh của chúng tôi.
Vì vậy, ở đây, bạn sẽ thấy rằng ứng dụng góc cạnh của tôi bây giờ sẽ bao gồm một tiêu đề,
đó là một thành phần riêng biệt, chân trang,
đó là một thành phần khác,
và sau đó ở giữa hai,
tôi sẽ có một phần của ứng dụng góc cạnh của tôi
sẽ được kiểm soát sau này bằng cách sử dụng bộ định tuyến góc cạnh.
Vì vậy, bạn thấy đấy, tôi đang thiết lập sân khấu cho những gì sẽ diễn ra sau này trong khóa học này.
Vì vậy, trên đường đi,
chúng tôi cũng sẽ sử dụng Font Awesome Icons trong ứng dụng góc cạnh của chúng tôi.
Tôi chỉ thích các biểu tượng Font Awesome,
vì vậy tôi nghĩ rằng đây sẽ là một nơi tốt để
giới thiệu các biểu tượng này vào ứng dụng góc cạnh của tôi.
Để tiếp tục, chúng ta hãy cài đặt phông chữ awesome vào ứng dụng góc cạnh của chúng tôi.
Vì vậy, để làm điều đó, tôi sẽ sử dụng NPM để đi,
và lấy font-awesome cho tôi,
vì vậy NPM cài đặt font-awesome 4.7.0, và tiết kiệm.
Sau đó, hãy để font-awesome được cài đặt.
Vì vậy, một khi font-awesome được vào ứng dụng góc của chúng tôi,
và sau đó trở thành một phần của các mô-đun nút
được bao gồm trong ứng dụng góc của chúng tôi,
bước tiếp theo là để làm cho nó có sẵn cho ứng dụng góc của chúng tôi.
Chúng ta cần phải tích hợp font-awesome vào ứng dụng góc cạnh của chúng tôi.
Vì vậy, để làm điều đó,
đi đến thư mục nguồn,
và sau đó tạo một tập tin có tên _variables.scss trong thư mục nguồn.
Trong tập tin variables.scss,
thêm vào $fa-font-path: và
sau đó trong dấu ngoặc kép, đặt.. /node_modules/font-awesome/fonts.
Vì vậy, chúng tôi đang chỉ định đường dẫn phông chữ cho các tập tin tuyệt vời phông chữ của chúng tôi ở đây.
Sau đó, mở tập tin Styles.scss,
và sau đó trong tập tin Styles.scss,
chúng tôi sẽ thêm vào một vài dòng có.
Đầu tiên, chúng tôi sẽ nhập các biến mà chúng tôi vừa khai báo bằng cách nói @import,
và trong dấu ngoặc kép biến,
sau đó chúng tôi sẽ nhập các tập tin font-awesome ở đó,
sau đó chúng tôi sẽ nói
@import.. /node_modules/Font-awesome/SCSS/Font-awesome. Chúng tôi đang nhập khẩu
phiên bản SCSS của nó bởi vì chúng tôi đang sử dụng SCSS trong ứng dụng góc cạnh của chúng tôi.
Một khi chúng tôi đã sửa đổi các phong cách cho các tập tin CSS,
chúng ta hãy lưu các thay đổi.
Tại thời điểm này, chúng ta có thể cần phải khởi động lại
máy chủ của chúng tôi đã phục vụ lên ứng dụng góc cạnh của chúng tôi.
Vì vậy, nơi bạn gõ dịch vụ NG,
bạn có thể muốn dừng máy chủ đang phục vụ ứng dụng góc cạnh của bạn và
khởi động lại nó để nó sẽ bao gồm những thay đổi mới đã được thực hiện.
Vì vậy, đi đến thiết bị đầu cuối của
tôi, tôi sẽ dừng máy chủ của tôi,
và sau đó khởi động lại máy chủ để nó sẽ đưa vào tài khoản thay đổi mà tôi đã thực hiện.
Bạn sẽ thấy trạng thái hiện tại của
ứng dụng góc cạnh của chúng tôi bằng cách nhìn vào nó trong trình duyệt.
Vì vậy, đây là những gì chúng ta có trong ứng dụng góc cạnh của chúng tôi.
Tôi muốn có thể thêm một đầu trang và chân trang vào
chế độ xem này để tôi có thể sử dụng cả đầu trang và chân trang,
và sau đó là nội dung thực tế giữa đầu trang
và chân trang theo cách tôi xây dựng ứng dụng góc cạnh của tôi.
Vì vậy, để làm điều đó,
tôi sẽ tạo ra hai thành phần mới được gọi là đầu trang và chân trang,
và để họ quản lý một phần của màn hình được phân bổ cho họ.
Đi đến dấu nhắc, hãy để tôi tạo ra một thành phần tiêu đề mới.
Tôi thậm chí có thể nói ng g,
đó là đủ cho CLI góc để
nhận ra rằng nó muốn tạo ra một thành phần.
Vì vậy, tôi nói ng g thành phần tiêu đề,
và cũng ng g thành phần chân.
Vì vậy, bây giờ, tôi có hai thành phần có sẵn cho tôi
để sử dụng trong ứng dụng góc cạnh của tôi.
Làm thế nào tôi sẽ sử dụng hai thành phần này?
Hãy đi đến tệp App component.html,
và sau đó sử dụng hai thành phần này theo cách chúng tôi
soạn toàn bộ màn hình cho ứng dụng góc cạnh của chúng tôi.
Quay trở lại ứng dụng của chúng
tôi, chúng tôi thấy rằng các tập tin module.t ứng dụng
đã bao gồm các tiêu đề và thành phần chân trang
và chúng đã được bao gồm trong các tờ khai ở đây.
Vì vậy, đây là lợi thế của việc sử dụng CLI góc cạnh,
nó sẽ chăm sóc tất cả các nền tảng này cho
bạn để bạn có thể tập trung vào việc xây dựng ứng dụng góc cạnh của bạn.
Vì vậy, đó là lý do tại sao tôi yêu CLI góc cạnh
như một cách tiếp cận để xây dựng ứng dụng góc cạnh của tôi.
Vì vậy, bây giờ, chúng ta hãy đi đến các thành phần ứng dụng tập tin HTML.
Vì vậy, ở đây, bạn thấy rằng chúng tôi đã bao gồm các menu ứng dụng dưới đó.
Tôi sẽ loại bỏ thanh công cụ này từ tập tin HTML thành phần ứng dụng của tôi.
Thanh công cụ đó sẽ trở thành một phần của tiêu đề mẫu cho thành phần tiêu đề của tôi.
Vì vậy, thay vào đó,
tập tin mẫu thành phần ứng dụng của tôi sẽ chỉ chứa các tiêu đề và chân trang ở phía dưới.
Vì vậy, bạn thấy rằng bây giờ,
chúng tôi có quan điểm của ba thành phần.
Đầu trang, menu
và chân trang chiếm toàn bộ màn hình.
Vì vậy, ba thành phần này có được những phần của màn hình cho chính họ.
Hãy lưu các thay đổi và xem nhanh ứng dụng của chúng tôi trong trình duyệt.
Đi đến ứng dụng trong trình duyệt,
bây giờ bạn thấy rằng tiêu đề đã chiếm nó là
một phần của màn hình lên đó, và rõ ràng,
kể từ khi chúng tôi vừa chuẩn bị thành phần,
nó chỉ nói tiêu đề hoạt động
, và sau đó xuống dưới đây,
chân trang cũng đã diễn ra trong trang màn hình.
Bây giờ, bây giờ chúng ta sẽ đi trước và cập nhật các mẫu cho cả tiêu đề và chân trang
để chúng tôi có thể độc đáo xác định giao diện người dùng của chúng tôi cho ứng dụng góc cạnh của chúng tôi.
Hãy bắt đầu công việc trên chân trang của chúng tôi.
Vì vậy, để bắt đầu trên chân trang, chúng
ta hãy đi đến tập tin mẫu của chân trang,
và sau đó chúng ta sẽ thay thế này với mẫu mới được thiết kế của chân trang.
Bây giờ, để thuận tiện cho bạn,
tôi đã cung cấp mã cho bạn trong hướng dẫn.
Nó sẽ là khôn ngoan để sao chép toàn bộ mã từ đó,
và sau đó dán nó vào đây.
Sau đó, kiểm tra xem chân trang này làm gì.
Vì vậy, ở đây, bạn thấy rằng tôi đã dán trong mã cho mẫu chân trang của tôi.
Bây giờ, tôi sẽ trở lại với mã này một chút sau.
Nếu bạn đã thực hiện khóa học trước đó trên Bootstrap,
bạn sẽ thấy rằng đây là cách vật liệu góc cạnh để thực hiện
cùng một loại cấu trúc cho chân trang mà chúng tôi đã thực hiện trong khóa học Bootstrap.
Một số trong những điều này sẽ được nhận ra cho bạn đã,
nhưng hãy để tôi hoàn thành bản cập nhật cho các mẫu chân trang,
và sau đó chúng tôi cũng sẽ thêm trong một vài mã SCSS vào tập tin thành phần.scss chân trang của tôi,
và sau đó có một cái nhìn vào cách chân trang bây giờ hình thành.
Vì vậy, ở đây, tôi đã một lần nữa dán trong mã
từ các hướng dẫn tập thể dục mà theo dõi video này,
để hiển thị các lớp SCSS khác nhau mà tôi đã thêm vào chân trang của tôi.
Vì vậy, tôi có một vài lớp mà tôi đã định nghĩa ở đây,
Tôi sẽ sử dụng chúng để xác định một phần của chân trang của tôi,
và sau đó tương tự lớp chân trang ở đây,
và tôi có một SCSS trộn ở đây,
và một số biến ở đây
xác định màu sắc khác nhau mà tôi sẽ sử dụng trong ứng dụng góc cạnh của tôi.
Vì vậy, chúng ta hãy lưu những thay đổi mà chúng tôi đã thực hiện. Chúng
ta hãy nhìn vào chân trang trong hóa thân hiện tại của nó,
và sau đó chúng tôi sẽ trở lại và trả một truy cập nhanh vào mã mà tôi đã bao gồm cả
trong các thành phần chân trang mẫu tập tin và mã SCSS ở đây.
Đi đến ứng dụng góc cạnh của chúng tôi trong trình duyệt, wallah, ở
đó bạn có chân trang mới cho ứng dụng góc cạnh của chúng tôi.
Vì vậy, bạn có thể thấy rằng tôi có một vài điều ở đây.
Đây ở cạnh trái là các liên kết khác nhau
đến các trang khác nhau mà sẽ tạo thành một phần của ứng dụng Angular của tôi.
Chúng ta sẽ xem làm thế nào chúng ta làm điều đó như một phần của vài bài tập tiếp theo.
Bây giờ, ở đây tôi đang sử dụng các thành phần nút
là một phần của tài liệu Angular để xác định các liên kết ở đây,
sau đó tôi có địa chỉ ở đây,
và sau đó tôi cũng sử dụng một lần nữa nút để xác định chuỗi các
nút cho các liên kết phương tiện truyền thông xã hội khác nhau cho nhà hàng của tôi ở đây.
Vì vậy, bạn có thể thấy rằng tôi có tất cả những thứ này.
Để tạo ra những, tôi sử dụng
hỗ trợ vật liệu Angular cho các nút hành động nổi nhỏ ở đây,
và cung cấp cho một cấu trúc tốt đẹp cho việc này.
Nếu bạn đã nhìn thấy phiên bản Bootstrap của điều này,
tôi thích điều này tốt hơn nhiều so với phiên bản Bootstrap mà tôi đã tạo ra trong khóa học trước đó.
Vì vậy, chân trang của chúng tôi bây giờ là tốt tại chỗ.
Hãy nhanh chóng xem xét một số mã ở chân trang.
Bây giờ, tôi sẽ không giải thích rằng trong một toàn bộ rất nhiều chi tiết bởi vì đó là để
đối phó với nhiều hơn với các vật liệu góc hơn là Angular chính nó,
nhưng trên đường đi bằng cách chỉ nhìn vào cấu trúc của mã,
bạn sẽ bắt đầu thấy làm thế nào các
thành phần vật liệu góc này có thể được sử dụng để xác định một cái gì đó như thế này.
Đi đến thành phần chân trang,
bạn thấy rằng tôi có một div bên ngoài ở đây mà tôi đã chỉ định một số bố trí góc,
thuộc tính bố trí flex ở đây,
vì vậy tôi nói rằng hàng FXLayout,
và sau đó FXLayout sm và xs là cột.
Vì vậy, đối với kích thước màn hình nhỏ và thêm nhỏ
sẽ vị trí tất cả các nội dung như cột,
nhưng đối với kích thước màn hình lớn hơn,
nó sẽ vị trí chúng như hàng.
Vì vậy, đây là những gì mang lại cho tôi cấu trúc tốt đẹp cho chân trang của tôi.
Như bạn thấy trong giao diện người dùng div,
Tôi đang định vị tất cả các trung tâm nội dung ở đây,
và xuống dưới đây,
tôi xác định một trong những đầu tiên.
Vì vậy, xoắn toán học này ở đây mà tôi đang sử dụng định nghĩa các liên kết của tôi ở đây.
Vì vậy, trong này tôi đang sử dụng mat như để thành phần vật liệu góc,
và bên trong đó tôi đang sử dụng một với
các thuộc tính nút mat gán cho một để tạo ra các nút ở đây.
Sau đó, tôi sẽ trở lại và thêm
mã thực tế cho các liên kết này trong các bài tập tiếp theo ở đây.
Đây là những gì giúp tôi tạo ra danh sách các liên kết ở phía bên trái.
Đây là địa chỉ mà bạn thấy,
đây là khá đơn giản để xem xét.
Vì vậy, đây là một div mà tôi đang sử dụng FXFlex với 50,
và một trong những khác với FXFlex với 40.
Vì vậy, 40 nghĩa là 40 phần trăm và 50 nghĩa là 50 phần trăm,
và ở đây tôi đang sử dụng FXFlex offset 20 pixel.
Vì vậy, nó di chuyển nội dung này sang phải 20 pixel.
Vì vậy, tôi có một không gian 20 pixel còn lại ở phía bên trái cho
div đặc biệt này chứa các liên kết ở đây.
Sau đó, cuối cùng dưới đây,
tôi có tập hợp các liên kết mà tôi đang sử dụng để
tạo thanh với tất cả các liên kết truyền thông xã hội ở đó.
Vì vậy, tôi đang sử dụng một với nút biểu tượng mat đây.
Vì vậy, đó là những gì tạo ra các nút tròn mà bạn nhìn thấy ở chân trang ở đó.
Bây giờ, đối với mỗi người trong số này,
tôi đang áp dụng các lớp tương ứng ở đây.
Vì vậy, bạn có thể nhận thấy rằng nút Google Plus, nút Facebook,
tất cả các lớp được định nghĩa trong tập tin SCSS của tôi ở đó,
nơi tôi đã chỉ định các màu sắc cho nền và như vậy cho điều này, để
nó phù hợp với màu sắc điển hình mà các trang web truyền thông xã hội sử dụng.
Vì vậy, dành một chút thời gian nhìn vào mã này ở đây,
và sau đó bạn sẽ nhanh chóng nhận được một cảm giác như thế nào chân trang đã được thiết kế.
Tương tự như vậy, đi đến các thành phần chân trang Sass mã ở đây,
vì vậy bạn có thể thấy rằng tôi đã xác định màu sắc khác nhau ở đây.
Tôi đang sử dụng một sự pha trộn với lề thiết lập ở đây,
và sau đó cho chân trang của
tôi, tôi xác định màu nền một cách thích hợp,
và nhận thấy các lớp khác nhau mà tôi đang xác định ở đây
một nút Facebook mà màu sắc và
màu nền tôi đã xác định cho mỗi một trong số họ.
Vì vậy, màu tương ứng của
trang mạng xã hội đó đang được sử dụng làm màu nền cho mỗi một trong số này.
Bây giờ, trong khóa học Bootstrap trước đó,
tôi đã sử dụng Bootstrap Social để đạt được điều tương tự.
Điều đó không hoạt động rất tốt với vật liệu Angular,
vì vậy đó là lý do tại sao tôi chỉ cần tạo ra bộ kính Sass của riêng tôi ở đây,
và sau đó thêm vào mã mà tôi cần phải tạo ra những nút đó.
Nếu bạn cần thêm nhiều nút hơn,
sau đó chỉ cần tạo ra nhiều lớp như thế này là tương ứng với
các nút mà bạn muốn thêm vào ứng dụng của bạn.
Vì vậy, điều đó xây dựng chân trang của chúng tôi.
Bây giờ, tiêu đề là phần tiếp theo mà chúng ta sẽ nhắm mục tiêu.
Đi đến tiêu đề, sẽ mở
tập tin mẫu thành phần tiêu đề và bạn thấy những gì nó chứa.
Chúng tôi sẽ thay thế này bằng
mẫu mà tôi đã đưa ra cho bạn trong các hướng dẫn tiếp theo ở đây.
Vì vậy, chỉ cần đi trước và cắt và dán mã đó vào đây,
bởi vì điều này không có gì để làm cụ thể với góc cạnh.
Vì vậy, đó là lý do tại sao tôi chỉ cho phép bạn cắt và dán mã trực tiếp từ đó,
tiết kiệm thời gian cho chúng tôi.
Bạn có thể thấy rằng bây giờ tôi đã thay thế tiêu đề mẫu với một số mã ở đây.
Tương tự như vậy,
trong khi chúng tôi đang ở đó, chúng tôi cũng sẽ thêm vào một số mã SCSS cho tập tin header.components.scss của tôi ở đây,
chỉ cần đi và sao chép mã từ các hướng dẫn.
Tương tự như vậy, trong khi chúng tôi đang ở đó,
chúng tôi sẽ thêm vào một vài lớp SCSS để tập tin Styles.scss chính của tôi.
Vì vậy, vào tập tin Styles.scss chính này,
tôi sẽ thêm vào màu phụ và một vài lớp khác vào này.
Vì vậy, chúng ta hãy dán vào mã từ các hướng dẫn mà tôi đã cung cấp cho bạn.
Vì vậy, bản cập nhật cho các tập tin Styles.scss bây giờ đã hoàn tất,
vì vậy tôi đã thêm vào trong một số màu sắc ở đây và trộn trong đó,
và sau đó ở dưới cùng tôi đã thêm vào trong một vài lớp học ở đây
giúp tôi khi tôi đang thiết kế mẫu của tôi cho ứng dụng góc cạnh của tôi.
Vì vậy, tất cả những thay đổi này, chúng
ta hãy lưu các thay đổi,
hãy xem nhanh như thế nào tiêu đề của tôi trông giống như bây giờ trong ứng dụng,
và sau đó chúng tôi sẽ trở lại và nhanh chóng truy cập lại mã mà chúng tôi vừa bao gồm ở đây.
Quay trở lại ứng dụng Angular của tôi trong trình duyệt,
bây giờ bạn thấy thanh công cụ xuất hiện lại trong tiêu đề ở đây,
cùng với một vài liên kết trong
đó và sau đó một hình ảnh đại diện cho logo cho nhà hàng của tôi,
và sau đó ở đây, bạn có một cái gì đó mà chúng tôi sử dụng các tập tin jumbotron trong khóa học trước đó.
Tôi sẽ chỉ sử dụng một lớp học gọi là jumbotron để tạo ra điều này
trong ứng dụng Angular cũng,
vì vậy ở phía bên trái tôi có thông tin nhà hàng của tôi và
logo của nhà hàng và để lại cho bản thân mình một số không gian ở đây để thêm một cái gì đó trong tương lai.
Vì vậy, ở đây bạn thấy ứng dụng của tôi bây giờ hình thành với một tiêu đề,
với một số liên kết trong đó.
Bây giờ, chúng ta sẽ sử dụng các liên kết này trong
vài bài tập tiếp theo để thiết lập ứng dụng Angular của tôi,
và sau đó trình đơn ngồi ở giữa và sau đó xuống dưới đây chân trang của tôi.
Đi đến tập tin mẫu thành phần tiêu đề của tôi,
bây giờ bạn có thể xem làm thế nào tôi đã tạo thanh công cụ với các nút bổ sung ở đây.
Vì vậy, bạn nhớ lại rằng chúng tôi đã có thanh công cụ
đã được sử dụng trong tập tin mẫu thành phần ứng dụng,
tôi đã cắt nó từ đó và thay vào đó sử dụng thanh công cụ vào tiêu đề mẫu ở đây.
Bây giờ, bên trong thanh công cụ này,
tôi đã bao gồm một số liên kết với các lớp nút áp dụng cho nó và đây là
những gì cho phép tôi để tạo ra các liên kết trong thanh công cụ như một trình đơn cho ứng dụng web của tôi.
Dưới đây, tôi đã tạo ra một div với container lớp và jumbotron.
Đó là lý do tại sao tôi thêm các lớp chứa và jumbotron vào tập tin SCSS của tôi,
để tôi có thể sử dụng chúng trong các mẫu của tôi ở đây.
Vì vậy, mà một lần nữa,
tôi áp dụng và một số thuộc tính bố trí flex ở đây để giúp tôi thiết kế màn hình ở đó.
Sau đó, bạn có thể thấy làm thế nào tôi đã sử dụng một vài divs ở đây với
các thuộc tính FXFlex áp dụng cho phù hợp để tạo ra giao diện người dùng,
cho ứng dụng của tôi ở đây.
Vì vậy, dành một chút thời gian ở đây để có một cái nhìn nhanh vào mã này ở đây để
hiểu nhanh cách bố trí của tôi cho tiêu đề mẫu của tôi đã được tạo ra.
Nó không phải là phức tạp,
một khi bạn đã hoàn thành khóa học Bootstrap,
điều này không phải là khó hiểu.
Trên đường đi, bạn cũng đang học cách bố trí uốn cong góc cạnh và sau đó
cũng là các thành phần vật liệu góc cạnh ở đây.
Đi đến tập tin SCSS cho các thành phần tiêu đề,
bạn có thể thấy rằng tôi đã thêm vào trong một số màu sắc ở đây và sau đó một hỗn hợp
trong và sau đó cũng được thêm vào trong một lớp jumbotron ở đây.
Bây giờ, lớp chứa không có ở đây,
lớp chứa nằm trong tập tin style chính.
Bởi vì lớp chứa là một cái gì đó mà tôi sẽ
sử dụng cho nhiều người trong số các mẫu có.
Vì vậy, đó là lý do tại sao, tôi đã thêm trong lớp chứa vào tập tin Styles.scss
đó là tập tin phổ biến cho toàn bộ ứng dụng góc cạnh của tôi.
Vì vậy, có tôi đã thêm vào trong một số màu sắc bổ sung ở đây,
và tôi cũng đã tạo ra một hỗn hợp
ở đây, và sau đó thêm vào trong container
, nền chính,
và màu nền giọng, và sau đó tôi cũng đang sử dụng một lớp gọi là flexes spacer,
mà tôi sẽ sử dụng trong một trong các bài tập sau này.
Tất cả các bước này là để chuẩn bị cho những gì sẽ xảy
ra trong một số bài tập tiếp theo.
Ứng dụng Angular của tôi bây giờ đã có một hình dạng tốt về cách giao diện người dùng được đặt ra,
để bây giờ tôi có thể bắt đầu giới thiệu nhiều tính năng mới hơn cho góc cạnh.
Trả thêm một lần nữa vào ứng dụng Angular của tôi trong trình duyệt,
hãy để tôi xem ứng dụng này trông như thế nào ở các kích cỡ màn hình khác nhau.
Vì vậy, đây là kích thước màn hình máy tính để bàn tiêu chuẩn,
vì vậy hãy di chuyển đến kích thước màn hình nhỏ hơn và sau đó xem ứng dụng trông như thế nào.
Vì vậy, đây là một kích thước màn hình iPhone 6 Plus,
vì vậy bạn có thể thấy cách bố trí là khác nhau cho kích thước màn hình nhỏ hơn.
Vì vậy, tiêu đề của tôi là ngay trên đó và trình đơn của tôi ở dưới cùng và chân trang ở đây,
nhận thấy làm thế nào các phần khác nhau của chân trang đã
được đặt ra khác nhau cho kích thước màn hình nhỏ thêm.
Đây là ứng dụng tương tự trong chế độ phong cảnh hoặc iPhone 6 Plus,
vì vậy bạn có thể thấy rằng tiêu đề của tôi được đặt ra như thế và menu ở đó và chân trang.
Vì vậy, điều đó cho bạn thấy rằng tôi đã tận dụng bố cục flex góc
để có thể tạo ra các bố cục khác nhau cho các kích thước màn hình khác nhau.
Vì vậy, một lần nữa, nếu bạn đã tham gia khóa học Bootstrap trước đó,
bạn sẽ bắt đầu thấy cách thiết kế đáp ứng với
bố cục flex góc cũng có thể được sử dụng để đạt được kết quả tương tự.
Vì vậy, 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 đã chuẩn bị ứng dụng Angular của chúng tôi và làm cho
nó sẵn sàng cho phần còn lại của các bài tập trong khóa học này.
Đây cũng là thời điểm tốt để bạn thực hiện một cam kết git với tiêu đề tin nhắn và chân trang.