Bây giờ chúng ta sẽ chuyển sang
bài tập tiếp theo của chúng tôi, nơi chúng tôi sẽ tạo ra
một thành phần mới và thêm nó vào ứng dụng Angular của chúng tôi.
Sau đó, chúng tôi sẽ sử dụng thành phần đó để điều khiển một phần
của màn hình mà chúng tôi đã thiết kế cho ứng dụng Angular của chúng tôi.
Màn hình cho ứng dụng Angular của chúng tôi là khá nhàm chán tại thời điểm này.
Tất cả những gì chúng ta có là một thanh công cụ ở trên cùng và sau đó là một
màn hình trắng, trống ở đây, nhưng điều đó cũng cho chúng ta những ý tưởng.
Bây giờ chúng ta có thể lấy thêm nội dung và sau
đó đặt nó vào phần này của màn hình ở đây. Làm thế nào để chúng ta làm được điều đó?
Chúng ta có thể tạo ra một thành phần mới và sau đó bàn
giao phần này của màn hình cho thành phần đó và nói,
“Bạn chăm sóc kết xuất bất cứ điều gì bạn muốn vào phần đó của màn hình.”
Vì vậy, quan điểm đó sẽ được điều khiển bởi các thành phần mới.
Làm thế nào để chúng ta làm được điều đó? Chúng ta hãy đi qua bài tập ngay bây giờ.
Để bắt đầu với bài tập,
hãy đi đến hướng dẫn tập thể dục theo video cụ thể này.
Sau đó, trong hướng dẫn tập thể dục,
bạn sẽ thấy một số tài nguyên tập thể dục,
đó là một tập tin zip có sẵn cho bạn.
Tải tập tin zip đó vào máy tính của bạn,
và điều này sẽ cung cấp cho bạn một tập tin images.zip.
Vì vậy, chỉ cần lưu nó dưới dạng tập tin images.zip vào thư mục tải xuống của bạn,
giải nén nó, và sau đó điều này sẽ cung cấp cho bạn
một thư mục hình ảnh có chứa
một tập hợp các hình ảnh mà chúng tôi sẽ sử dụng trong ứng dụng của chúng tôi.
Giải nén tệp images.zip mà bạn vừa tải xuống,
và di chuyển tệp images.zip đó vào dự án của bạn,
và trong dự án của bạn,
vào thư mục nguồn và tài sản ở đây.
Vì vậy, một lần nữa, di chuyển thư mục hình ảnh mà bạn nhận được bằng cách
giải nén các tập tin images.zip và sau đó di chuyển thư mục hình ảnh đó vào ứng dụng của bạn,
do đó, bên trong ứng dụng của bạn,
dưới nguồn và tài sản thư mục con.
Những hình ảnh được cung cấp ở đây sẽ
có sẵn để sử dụng trong ứng dụng Angular của bạn.
Bây giờ, chúng ta sẽ sử dụng các CLI góc để
tự động tạo ra một thành phần cho chúng ta và thêm nó vào ứng dụng Angular của chúng tôi.
Vì vậy, trong thiết bị đầu cuối,
đi đến thư mục chứa ứng dụng Angular của bạn và gõ
ng tạo ra trình đơn thành phần.
Vì vậy, chúng ta sẽ đặt tên thành phần này là MenuComponent.
MenuComponent này sẽ chứa menu cho
nhà hàng mà chúng tôi đang chuẩn bị ứng dụng Angular của chúng tôi cho.
Vì vậy, khi bạn gõ này, điều
này sẽ tự động tạo ra
các MenuComponent và sau đó thêm nó vào ứng dụng Angular của bạn.
MenuComponent này sẽ được tạo ra và thêm
vào thư mục nguồn/ứng dụng/menu của ứng dụng của bạn.
Vì vậy, nó sẽ tạo ra một tập hợp các tập tin trong thư mục menu.
Vì vậy, bạn có thể thấy rằng nó tạo ra một tập tin SCSS,
một tập tin HTML, và các tập tin s,
và sau đó một cái gì đó được gọi là tập tin s phổ.
Chúng ta sẽ quay lại với điều đó sau.
Sau đó, nó cũng sẽ cập nhật tệp module.t ứng dụng của bạn.
Vì vậy, chúng ta hãy đi và xem những gì vừa xảy ra khi bạn
tạo MenuComponent này và thêm nó vào ứng dụng Angular của bạn.
Chúng ta hãy đi đến BTV.
Đến với biên tập viên của chúng tôi,
bây giờ bạn sẽ nhận thấy rằng,
trong thư mục ứng dụng,
có một thư mục mới được gọi là menu ở đó,
và thư mục menu này chứa tất cả các tệp liên quan đến MenuComponent ở đây.
Angular CLI tuân theo hướng dẫn kiểu tiêu chuẩn Angular.
Hướng dẫn phong cách cho thấy rằng mỗi thành phần nên được đặt
vào thư mục riêng của nó như được nhìn thấy ở đây,
và tôi khá thích điều này bởi vì tôi rất ám ảnh về
việc giữ nó hệ thống phân cấp sạch cho các thư mục ứng dụng của tôi ở đây.
Vì vậy, điều này hiệu quả rất tốt với tôi.
Một số người thích một hệ thống phân cấp phẳng,
nhưng tôi chỉ bị nhầm lẫn với phần đó.
Vì vậy, tôi thích lưu trữ mỗi thành phần trong thư mục riêng của nó.
Vì vậy, nó có tác dụng tốt cho tôi.
Bây giờ, nếu bạn mở tệp.t ứng dụng module.t,
bạn sẽ nhận thấy rằng tệp.t ứng dụng module.t đã được cập nhật
bằng cách bao gồm một lần nhập khác vào tệp.t ứng dụng module.t.
Vì vậy, bạn thấy rằng, cùng với AppComponent,
MenuComponent đã tự động được thêm vào như là một nhập khẩu vào mô-đun ứng dụng của bạn.
Vì vậy, điều này có nghĩa là MenuComponent bây giờ
có sẵn cho ứng dụng Angular của bạn được sử dụng.
Ngoài ra, nếu bạn kiểm tra thuộc tính khai báo bên trong trình trang trí NgModule,
bạn sẽ thấy rằng trong thuộc tính khai báo,
ngoài AppComponent,
bạn cũng có MenuComponent bao gồm.
Đây là lý do tại sao tôi yêu Angular CLI,
bởi vì nó đơn giản hóa tất cả điều này làm việc cho tôi.
Nếu tôi đã làm điều đó bằng tay,
tôi sẽ phải tự đi vào ứng dụng module.t và sau đó gõ vào tất cả các mã này ở đó,
và có một xác suất cao mà tôi sẽ kết thúc phạm sai lầm ở đó.
Vì vậy, chúng tôi đang tiết kiệm cho mình rất nhiều rắc rối bằng cách sử dụng CLI Angular.
Vì vậy, đó là lý do tại sao tôi đã yêu
Angular CLI để tạo ra các ứng dụng Angular của tôi.
Vì vậy, với điều đó, chúng tôi đã thiết lập
MenuComponent của chúng tôi để có sẵn cho ứng dụng Angular của chúng tôi.
Bây giờ, tôi sẽ sử dụng MenuComponent ở đâu?
Tôi sẽ làm cho sử dụng các MenuComponent bên trong mẫu AppComponents của tôi.
Vì vậy, tôi sẽ đi đến mẫu AppComponents và sau đó
bao gồm các MenuComponent ở đây trong AppComponent của tôi.
Vì vậy, mà về cơ bản sẽ bàn giao rằng một phần của màn hình để MenuComponent của tôi.
Làm thế nào để chúng ta làm được điều đó?
Để làm điều đó, trước tiên chúng ta sẽ xem nhanh các tập tin MenuComponent.ts.
Vì vậy, khi bạn mở tập tin MenuComponent.Ts,
bạn sẽ thấy rằng chọn cho MenuComponent đã được định nghĩa là ứng dụng menu.
Vì vậy, đây là tên chọn tiêu chuẩn mà Angular CLI cung cấp cho các thành phần của bạn.
Bạn có thể thay đổi điều này nếu bạn muốn,
nhưng bất kỳ bộ chọn nào bạn chỉ định ở đây, nó
sẽ tạo thành các thẻ mà bạn sử dụng để đưa nó vào tập tin mẫu của bạn.
Vì vậy, quay trở lại AppComponent.html,
bây giờ, nếu tôi muốn bao gồm các tập tin menu ở đây,
vì vậy tôi sẽ chỉ nói,
thẻ menu ứng dụng và thì
đấy, một phần của màn hình bây giờ được bàn giao cho MenuComponent
của tôi, và nó lên đến MenuComponent để quyết định những gì nó muốn đặt trong đó.
Vì vậy, bất cứ điều gì được định nghĩa,
mẫu MenuComponents sẽ được đặt vào vị trí ở đây.
Vì vậy, bây giờ, tất cả những gì chúng tôi còn lại với là đi và chuẩn bị
MenuComponent của chúng tôi để hiển thị các thông tin thích hợp cho chúng tôi.
Hãy lưu các thay đổi,
và sau đó chúng tôi sẽ chuyển sang
bước tiếp theo, nơi chúng tôi sẽ tạo menu cho nhà hàng của chúng tôi bằng cách sử dụng MenuComponent.
Trước khi tôi làm điều đó,
những gì tôi sẽ làm là,
đi đến thư mục ứng dụng ở đây,
và sau đó trong thư mục ứng dụng,
tôi sẽ tạo một thư mục con mới và tên đó là thư mục con được chia sẻ.
Bây giờ, bất kỳ tập tin mà tôi sẽ chia sẻ trên các thành phần khác nhau,
tôi sẽ đặt nó vào thư mục được chia sẻ ở đây.
Bây giờ, bên trong thư mục được chia sẻ,
tôi sẽ tạo ra một tập tin mới có tên là dish.t.
Bên trong món ăn này.s, tôi sẽ tạo ra một lớp để xác định
một món ăn và làm cho nó có sẵn cho các thành phần còn lại để sử dụng.
Vì vậy, để xác định một lớp TypeScript ở đây,
tôi sẽ nói xuất khẩu,
vì vậy tôi đang xuất khẩu lớp TypeScript này ở đây,
lớp xuất khẩu, và sau đó tôi sẽ đặt tên lớp như món ăn.
Bên trong lớp món ăn này,
bây giờ tôi có thể xác định các thuộc tính khác nhau.
Vì vậy, đối với lớp món ăn,
tôi sẽ xác định một thuộc tính,
đó là một ID, mà tôi định nghĩa là một chuỗi.
Bây giờ, hãy chú ý, nếu bạn đến từ thế giới JavaScript,
trong JavaScript, bạn không cần phải xác định kiểu của bất kỳ biến nào.
TypeScript mang đến cơ sở này cho bạn để xác định kiểu cho mỗi biến.
Vì vậy, nếu bạn chỉ định tên, cột và chuỗi,
điều đó có nghĩa là biến tên sẽ luôn thuộc kiểu chuỗi.
Vì vậy, nếu bạn cố gắng gán một số nguyên cho tên,
sau đó trình biên dịch TypeScript sẽ tự động
bắt nó cho bạn và sau đó cho bạn biết rằng có một lỗi.
Đó là lý do, sử dụng TypeScript,
bạn có thể giảm số lượng lỗi mà bạn có thể gây ra.
JavaScript truyền thống không thực hiện
kiểm tra lỗi này vì nó không có bất kỳ khái niệm về kiểu dữ liệu.
Nhưng nếu bạn đến từ một ngôn ngữ lập trình truyền thống như C++ hoặc Java,
bạn đã rất quen thuộc với các kiểu dữ liệu,
các kiểu dữ liệu nguyên thủy, và
các kiểu dữ liệu khác đã được định nghĩa vào ngôn ngữ.
TypeScript mang tính năng đó đến JavaScript hay đúng hơn là một phần của TypeScript,
và cho phép bạn xác định các biến và đính kèm các kiểu vào
các biến đó, do đó tên TypeScript.
Vì vậy, đối với các món ăn,
tôi sẽ tạo ra một tài sản tên.
Sau đó, tôi sẽ tạo ra một tài sản hình ảnh
, cũng là một chuỗi.
Chuỗi hình ảnh này sẽ là một chuỗi mà trỏ đến
URL của hình ảnh mà tôi sẽ sử dụng cho món ăn đặc biệt này.
Sau đó, tôi sẽ xác định một thể loại cho món ăn này như cũng là một chuỗi đặc trưng như Boolean,
nhãn như một chuỗi.
Giá như một chuỗi và sau đó mô tả như một chuỗi.
Vì vậy, đây là những đặc tính mà tôi liên kết với lớp món ăn.
Vì vậy, điều này sẽ xác định các món ăn khác nhau trong thực đơn của tôi của nhà hàng của tôi,
và cho mỗi món ăn tôi cần phải xác định tất cả các thuộc tính khác nhau.
Bây giờ, tại sao tôi lại cần điều đó?
Điều đó sẽ giúp tôi xây dựng thực đơn cho nhà hàng của tôi như bạn sẽ thấy khá sớm.
Vì vậy, với điều này, chúng tôi hoàn thành định nghĩa của lớp học của tôi ở đó.
Hãy lưu các thay đổi vào tập tin dish.t.
Bây giờ, tập tin dish.t này đang xuất khẩu một lớp học.
Bây giờ, tôi có thể nhập lớp này vào bất kỳ
tập tin kịch bản kiểu thành phần của ứng dụng của tôi.
Tiếp theo, tôi sẽ chuyển sang tập tin menu.component.t của tôi.
Bên trong tập tin menu.component.t ngoài việc nhập khẩu các thành phần,
sau đó tôi cũng sẽ thấy rằng bạn đang nhập một onInit ở đó.
Chúng ta sẽ đến phần OnInit trong một trong những bài tập sau này.
Tôi sẽ giải thích những gì nó làm trong một bài tập sau.
Chúng tôi cũng sẽ nhập lớp mới mà chúng tôi tạo ra được gọi là lớp Dish.
Tại sao chúng ta nhập khẩu lớp món ăn này?
Vì vậy mà chúng ta có thể sử dụng đó như là một loại cho một biến mà tôi đang xác định ở đây.
Vậy, lớp món ăn này ở đâu?
Nó là trong.. /shared/dish thư mục.
Vì vậy, điều này nằm trong thư mục món ăn được chia sẻ ở trên đó.
Sau đó, bạn sẽ thấy rằng chúng tôi đã xác định các thành phần menu ở đây.
Vì vậy, bạn có thể thấy rằng nó nói,
“Xuất trình đơn lớp thành phần” và sau đó nó nói, “Thực hiện trên nó.”
Chúng ta sẽ trở lại với điều đó trong một chút sau đó.
Bạn cũng thấy rằng có một constructor và có một phương pháp khác ở đây được gọi là ngOnIt.
Chúng ta sẽ sử dụng những điều này trong một số bài tập sau này.
Vì vậy, chúng ta hãy để nó ở đó như vậy và chúng ta sẽ
trở lại để hiểu nó là gì trong một thời gian ngắn.
Ngoài ra, lưu ý rằng đối với thành phần này,
mẫu được định nghĩa trong thành phần menu chấm HTML,
và URL phong cách được định nghĩa ở đó.
Bây giờ, ngoài ra, vào lớp thành phần menu của tôi,
tôi sẽ bao gồm một biến mới được gọi là
các món ăn mà sẽ là một mảng của các loại món ăn.
Được chứ? Sau đó, tôi sẽ chỉ đơn giản là bao gồm các bộ
món ăn vào biến món ăn của tôi mà tôi đã định nghĩa ở đây.
Bây giờ, để gõ tất cả những thứ bằng tay sẽ mất rất nhiều thời gian.
Vì vậy, thay vào đó, những gì tôi muốn đề nghị bạn làm là chỉ cần đi và sao chép
nội dung trực tiếp từ các hướng dẫn theo video này.
Vì vậy, đó là những gì tôi sẽ làm.
Sau đó quay lại và dán nó vào đây.
Bây giờ bạn có thể thấy rằng tôi đã cắt và dán các thông tin cho
tất cả các món ăn của tôi từ các hướng dẫn trong đây.
Vì vậy, điều này hoàn thành mảng của tất cả các món ăn được xác định trong hướng dẫn của tôi.
Vì vậy, đó là cách dễ nhất để nắm giữ thông tin này.
Vì vậy, chỉ cần cắt và dán nó từ đó.
Bây giờ, lưu ý rằng đối với món ăn này,
mỗi một trong số họ là một đối tượng JavaScript ở đây.
Vì vậy, đó có thể được ánh xạ vào lớp kịch bản kiểu tương ứng ở đó.
Vì vậy, bạn có thể thấy rằng mỗi đối tượng JavaScript có thuộc tính ở đó,
và các thuộc tính này chính xác phù hợp với các thuộc tính mà tôi xác định cho lớp món ăn của tôi.
Vì vậy, một khi tôi xác định điều này,
sau đó các món ăn bây giờ sẽ trở thành một mảng các
món ăn và điều này bây giờ sẽ trở thành có sẵn cho
tôi để sử dụng khi tôi xác định mẫu HTML của tôi cho thực đơn của tôi.
Hãy lưu những thay đổi mà chúng tôi đã thực hiện cho đến nay và sau đó chúng tôi sẽ
mở tệp menu.component.html.
Vì vậy, chúng tôi sẽ đi đến các menu.component.html tập tin.
Bạn sẽ thấy rằng trong menu.component.html tập tin,
bạn hiện chỉ có một P với trình đơn hoạt động ở đây.
Vì vậy, nếu bạn chỉ cần dán nó vào đó và sau đó nhìn thấy các ứng dụng làm việc,
bạn sẽ thấy chỉ trình đơn này hoạt động trên màn hình.
Tôi sẽ thay thế này bằng mã mẫu riêng của tôi ở đây.
Đây là nơi tôi sẽ có sự giúp đỡ của bố cục flex góc để giúp tôi bố trí
nội dung của tôi tốt trong màn hình của tôi.
Vì vậy, để bắt đầu,
tôi sẽ bắt đầu với một div,
mà tôi sẽ áp dụng một lớp được gọi là container.
Tôi sẽ xác định lớp chứa bằng cách sử dụng một
số mã CSS một chút sau đó trong bài tập này.
Vì vậy, tôi sẽ áp dụng các container lớp ở đây.
Tôi cũng sẽ xác định một tài sản được gọi là fxlayout.
Một thuộc tính được gọi là fxlayout.
Bây giờ, fxlayout này là một thuộc tính
mà bố trí flex góc cho phép tôi áp dụng cho một div.
Điều này xác định xem nội dung khác nhau
mà tôi bao gồm bên trong những div nên được đặt ra theo chiều ngang hoặc chiều dọc.
Vì vậy, tôi sẽ chỉ định điều này là một cột.
Vì vậy, bất cứ nội dung tôi bao gồm bên trong div này,
sẽ được đặt ra theo chiều dọc một bên dưới khác trên màn hình của tôi.
Nếu bạn đã nhìn thấy cách lưới làm việc với nội dung trong Bootstrap,
bạn sẽ thấy rằng điều này về cơ bản nói với tôi rằng tôi sẽ
đặt tất cả mọi thứ vào một cột duy nhất dưới đó.
Đừng nhầm lẫn cột này với cột Bootstrap từ lưới Bootstrap của Bootstrap.
Chúng là hai thứ khác nhau.
Ở đây, thuộc tính là fxlayout và tôi chỉ định cột.
Tôi cũng có thể chỉ định điều này như là hàng
, có nghĩa là nội dung sẽ được đặt ra theo chiều ngang.
Bây giờ cũng, một thuộc tính nữa tôi sẽ chỉ định cho điều này là FxLayoutGap,
mà tôi sẽ chỉ định là 10 pixel.
Vì vậy, điều này có nghĩa là bất cứ nội dung nào tôi bao gồm ở đây
sẽ được tách ra với nhau bằng khoảng cách 10 điểm ảnh giữa mỗi một trong số họ.
Từ kiến thức Bootstraps, bạn sẽ thấy những gì một cắt là ở đây.
Điều này định nghĩa sự tách rời giữa
hai phần nội dung trong mẫu ứng dụng của tôi.
Vì vậy, với điều này, chúng tôi sẽ đóng div ở đây.
Bây giờ, bên trong div này,
tôi sẽ xác định nội dung thực tế sẽ đi vào tập tin menu.component.html của tôi.
Bây giờ ở đây, tôi sẽ sử dụng một thành phần khác mà
thiết kế vật liệu cung cấp cho tôi gọi là một thành phần danh sách mat.
Vì vậy, thành phần này cho phép tôi tạo ra một danh sách các
mục mà tôi đưa vào mẫu của tôi ở đây.
Vì vậy, đây là một thành phần danh sách vật liệu góc cạnh.
Từ Bootstrap, bạn nhận thấy rằng trong Bootstrap chúng tôi đã có đối tượng media.
Vì vậy, danh sách mat giống như đối tượng phương tiện truyền thông trong một số ý nghĩa từ Bootstrap.
Bây giờ để điều này, tôi sẽ áp dụng một lớp,
một thuộc tính được gọi là FXFlex.
Bây giờ, điều này có nghĩa là toàn bộ điều này sẽ được coi là một đơn vị hoặc một phần
nội dung mà chúng sẽ được bố trí bởi bố cục flex của tôi ở đây.
Vì vậy, nếu bạn đã quen thuộc với CSS flex layout.
Vì vậy, đây là một phần của nội dung sẽ được đặt ra bởi cách bố trí CSS flex của tôi.
Vì vậy, áp dụng FXFlex ở đây,
và sau đó bên trong đây tôi sẽ xác định mat-list-item.
Vì vậy, đây là một mục danh sách ở đây.
Vì vậy, từ kiến thức HTML của bạn,
nếu thẻ LI mà bạn sử dụng trong HTML là tương tự như điều này ở đây.
Vì vậy, đây là một mục danh sách mg ở đây.
Vì vậy, rõ ràng, bên trong danh sách mục này,
bạn sẽ được xác định danh sách của sự vật.
Bây giờ, góc cạnh cung cấp một số chỉ thị cấu trúc mà bạn có thể áp dụng
cho thẻ của bạn ở đây cho phép bạn tạo nội dung của bạn.
Bây giờ, tôi sẽ sử dụng một chỉ thị cấu trúc được gọi là ngFor.
Chúng ta sẽ thấy cách chúng ta sử dụng nó trong mẫu này.
Sau đó, sau bài tập này,
tôi sẽ giải thích ngắn gọn cho bạn những gì các chỉ thị cấu trúc là và
mục đích mà họ phục vụ trong việc xác định các mẫu của bạn ở đây.
Vì vậy, bên trong mục danh sách trống này, tôi sẽ nói,
sao, lưu ý cú pháp, sao NGFor.
Vì vậy, đây là chỉ thị cấu trúc, chỉ
thị cấu trúc NGFor theo góc cạnh.
Chỉ thị cấu trúc NGFor này cho phép bạn
làm là lặp lại một mảng các mục.
Hãy nhớ rằng chúng tôi định nghĩa các món ăn như là một mảng các đối tượng món ăn trong mã của chúng tôi.
Bây giờ, trong mẫu của tôi,
tôi sẽ có quyền truy cập vào đối tượng món ăn đó.
Vì vậy, ở đây, nếu tôi muốn lặp lại nó,
cách tôi chỉ định nó là tôi sẽ nói,
“Hãy để món ăn.”
Đây là cách cú pháp hoạt động cho chỉ thị cấu trúc NGFor.
Vì vậy, hãy để món ăn của các món ăn.
Điều này có nghĩa là các món ăn là mảng của các đối tượng món ăn.
Khi chúng ta chọn nói cho món ăn của các món ăn,
điều này sẽ cho phép tôi truy cập vào từng phần tử của
mảng và sau đó nó giúp tôi lặp lại trên mảng.
Điều này giống như một vòng lặp for,
nếu bạn đã quen thuộc với các vòng lặp từ lập trình.
Vì vậy, điều này hoạt động như một vòng lặp for cho bạn và sau đó nó giúp bạn lặp
lại tất cả các yếu tố của mảng món ăn ở đây.
Món ăn này trở thành một đối tượng JavaScript cho phép tôi
truy cập vào từng phần tử của mảng đó ở đó.
Bây giờ, từ điều này, chúng ta cũng có thể
truy cập vào các thuộc tính của từng đối tượng riêng lẻ bên trong mảng món ăn của tôi.
Vì vậy, sau đó, tôi có thể sử dụng chúng để xác định mẫu của tôi ở đây.
Hãy để tôi đặt ra mẫu và sau đó chúng tôi sẽ quay trở lại và
nhìn vào cách hai cái này có liên quan với nhau ở đây.
Bây giờ, bên trong mục danh sách trống của tôi,
tôi có thể bao gồm một hình ảnh với các thuộc tính như MatlistaVatar.
Vì vậy, điều này cho phép tôi bao gồm một hình ảnh và sau đó với nguồn được chỉ định ở đây.
Bây giờ thú vị, nhìn vào cú pháp mà tôi đang sử dụng ở đây.
Bên trong niềng răng đôi, tôi sẽ nói dish.image.
Điều này có nghĩa là đây là một nội suy một chiều mà chúng ta đang nói đến.
Ở đây, khi tôi chỉ định này,
những gì điều này có nghĩa là nguồn này sẽ nhận được giá trị của dish.image đã được định nghĩa trong
đối tượng JavaScript của tôi mà tôi đã định nghĩa trong
lớp kịch bản kiểu của tôi ở đó và đó là có sẵn cho tôi để làm bố trí ở đây.
Vì vậy, rằng giá trị dish.image sẽ có sẵn cho tôi và cũng cho hình ảnh này,
tôi sẽ chỉ định một giá trị thay thế như dish.name.
Nhớ lại rằng món ăn của tôi cũng có tài sản tên có sẵn cho
tôi để xác định một hình ảnh cho danh sách của tôi ở đây.
Bạn sẽ sớm nhận ra danh sách này trông như thế nào trên
màn hình khi chúng tôi hoàn thành mẫu này ở đây.
Ngoài ra, tôi sẽ sử dụng một h1 với thẻ MatLine.
Một lần nữa, đây là việc sử dụng
các thành phần vật liệu góc danh sách để xác định mẫu của tôi ở đây.
Vì vậy, tôi nói h1 MatLine vì vậy điều này giúp tôi xác định một dòng ở đây và sau đó bên trong đó,
tôi sẽ sử dụng niềng răng đôi và nói dish.name ở đây.
Vì vậy, điều này cho phép tôi có được giá trị của tên món ăn ở đó.
Vì vậy, mà định nghĩa một dòng và sau đó trong dòng tiếp theo tôi sẽ nói p MatLine.
Vì vậy, tôi sẽ sử dụng thẻ p ở đây và sau đó
đóng thẻ p và sau đó bên trong thẻ p,
tôi sẽ sử dụng một span để xác định dish.description.
Vì vậy, nếu bạn đã quen thuộc với các đối tượng JavaScript,
bây giờ bạn thấy làm thế nào tôi đang truy cập vào các thuộc tính của
đối tượng JavaScript của tôi ở đây, dish.description ở đây.
Để lưu ý, chạy qua này một lần nữa
thuộc tính ngFor cho phép tôi lặp lại một mảng các đối tượng ở đây.
Vì vậy, các món ăn ở đây là một loạt các đối tượng món ăn.
Vì vậy, khi tôi nói cho món ăn của các món ăn,
món ăn này sẽ cho tôi truy cập vào mỗi yếu tố của
mảng món ăn của tôi và tôi lặp lại trên mỗi yếu tố của mảng
và sau đó tôi sẽ được tạo ra nội dung này cho mỗi người trong số họ.
Vì vậy, mục danh sách trống này,
về cơ bản hoạt động giống như một vòng lặp for từ
ngôn ngữ máy tính truyền thống của bạn và sau đó nó lặp lại
danh sách các món ăn và sau đó đặt ra mỗi một trong số họ trên màn hình của tôi.
Vì vậy, với sự thay đổi này,
chúng ta hãy lưu tệp thành phần menu.
Tiếp theo, chúng ta đi đến app.module.t và chúng ta cần nhập mô-đun MatList vào này.
Vì vậy, chúng ta nói, nhập MatlistModule
từ Angular/Material/list.Một khi chúng tôi đã nhập khẩu này ở
đó, sau đó chúng tôi đi xuống và sau đó cập nhật nhập khẩu trong
bộ trang trí mô-đun Ng và thêm vào
mô-đun MatList vào danh sách nhập khẩu có.
Điều này module.t ứng dụng của tôi bây giờ được cập nhật và sau đó cũng,
tôi sẽ đi đến các tập tin styles.scss và sau đó thêm vào
lớp chứa ở đây.
Lớp container định nghĩa gì ở đây?
Lớp chứa là lề 20 pixel
và hiển thị flex và lưu các thay đổi.
Bây giờ, chúng ta hãy đi và nhìn vào trang web của chúng tôi.
Đi đến trang web của chúng tôi.
Thì đấy. Đây rồi.
Thực đơn cho nhà hàng của chúng tôi hiển thị trong tất cả sự lộng lẫy của nó trên màn hình.
Bạn thấy trình đơn này đã được tạo ra như thế nào.
Nhìn vào mảng đối tượng JavaScript mà bạn đã thấy.
Xem cách mỗi thuộc tính cho mảng đối tượng JavaScript đã được sử dụng và
ánh xạ đến bốn mục trong danh sách của tôi.
Nhìn vào cách các hình ảnh tương ứng đã được bao gồm ở đây
bằng cách sử dụng MatlistaVatar ở đây.
Vì vậy, điều này tạo ra hình ảnh tròn ở đây và sau đó lưu ý cách tên
của món ăn được hiển thị ở đây và sau đó mô tả của món ăn bao gồm ở đây.
Tuyệt vời. Bây giờ, chúng tôi có menu cho nhà hàng của chúng tôi trên
màn hình bằng cách sử dụng một thành phần menu trong Angular.
Điều này hoàn thành bài tập này.
Trong bài tập này, chúng tôi đã học cách tạo ra một thành phần mới.
thêm nó vào ứng dụng Angular của chúng tôi,
làm thế nào để bao gồm thành phần đó vào mẫu của
một thành phần khác để tạo ra hệ thống phân cấp của các thành phần.
Sau đó, chúng tôi thấy làm thế nào chúng tôi có thể sử dụng bố cục flex góc và cũng
là các thành phần thiết kế vật liệu để thiết kế
mẫu cho thành phần menu của chúng tôi để hiển thị nội dung ở đây.
Bây giờ, nếu anh hỏi tôi làm thế nào để tôi nhớ tất cả những điều này.
Vâng, thành thật mà nói,
bạn không thể nhớ tất cả mọi thứ nhưng bạn cần phải hiểu cách tiếp cận. Điều
đó quan trọng hơn là cố gắng ghi nhớ bất cứ điều gì trong số những điều này.
Bây giờ, nếu bạn hỏi tôi ở đâu để tôi có được thông tin về
thành phần danh sách từ tài liệu góc cạnh.
Chúng tôi có thể sắp xếp tài liệu góc cạnh và ở đó bạn
sẽ có các chi tiết về cách một thành phần danh sách nên được chuẩn bị.
Bây giờ, nơi nào chúng ta có được các chi tiết về cách chúng ta thiết kế một thành phần theo góc cạnh?
Chúng tôi chỉ kiểm tra một chút về điều đó và sau đó trong bài tập này,
chúng tôi đã học cách tạo ra một thành phần mới và sau đó áp dụng nó trong ứng dụng góc cạnh của chúng tôi.
Vì vậy, đây là một điểm tốt để bạn có thể làm một
nhận xét với các thành phần tin nhắn phần một.
Trong bài tập tiếp theo,
chúng tôi sẽ cải thiện điều này một chút hơn bằng cách sử dụng một loại
thành phần vật liệu góc cạnh khác để đặt ra nội dung trên màn hình của tôi.