Bây giờ chúng ta có một sự hiểu biết về các ứng dụng đơn trang,
chúng tôi sẽ tiếp tục làm việc trên
ứng dụng góc cạnh của chúng tôi mà chúng tôi đã làm việc trong các bài tập cho
đến nay và phát triển nó thành
ứng dụng đơn trang bằng cách sử dụng sự hỗ trợ của mô-đun bộ định tuyến góc cạnh.
Chúng tôi đã bao gồm nhiều thành phần như là một phần của
ứng dụng góc của chúng tôi trong bài tập trước đó và chúng tôi đã
cấu hình cho ứng dụng góc của chúng tôi để có thể định tuyến
giữa hai thành phần khác nhau.
Bây giờ, chúng tôi sẽ tích hợp nhiều hơn vào ứng dụng góc cạnh của chúng tôi và
phát triển nó vào ứng dụng góc cạnh đầy đủ cùng với
điều hướng trong số các quan điểm khác nhau được thực
hiện bởi các thành phần khác nhau của ứng dụng của chúng tôi.
Tiếp tục với ứng dụng của chúng tôi như nó đứng bây giờ,
chúng tôi có nhà được render khi bạn điều hướng đến ứng dụng của chúng tôi
ngay bây giờ và sau đó mẫu Home
đã được hiển thị giữa tiêu đề và chân trang và sau đó khi bạn đi đến Menu,
menu đang được hiển thị giữa tiêu đề và chân trang trong chế độ xem ở đây.
Bây giờ, rõ ràng, chúng ta cần tích hợp các thành phần khác mà chúng tôi
đưa vào ứng dụng góc cạnh của chúng tôi
để phát triển nó như là một ứng dụng góc cạnh chính thức.
Trong bài tập này, chúng tôi sẽ tích hợp ContactComponent,
chúng tôi sẽ cập nhật mẫu cho ContactComponent,
chúng tôi cũng sẽ cập nhật mẫu cho HomeComponent và thực hiện
một bước tiến tới ứng dụng góc một trang của chúng tôi.
Hãy bắt đầu với ContactComponent.
Để bắt đầu, trước tiên hãy sao chép mẫu cho
ContactComponent mà tôi đã cung cấp cho bạn trong hướng dẫn tập thể dục và sau đó
dán nó vào tệp contactcomponent.html để chúng tôi sẽ tuôn
ra xem thực tế của ContactComponent của chúng tôi trong một chút chi tiết hơn ở đây.
Bây giờ, bạn có thể thấy rằng tôi đã cắt và dán mã cho các
tập tin mẫu từ các hướng dẫn vào ContactComponent của tôi.
Chúng tôi sẽ hoàn thành việc tích hợp
ContactComponent trong ứng dụng của chúng tôi và sau đó chúng tôi sẽ xem xét
những gì ContactComponent trông như thế nào và sau đó trở lại
và nhanh chóng nhìn vào mã này một chút sau đó.
Bây giờ, để tích hợp ContactComponent vào ứng dụng góc cạnh của chúng
tôi, chúng ta cần phải bao gồm một đường dẫn đến ContactComponent vào các tuyến đường của chúng tôi.
Vì vậy, đi đến các tập tin routes.s ngay sau khi Menu,
tôi sẽ bao gồm một đường dẫn khác cho ContactComponent tôi sẽ sử dụng
URL như liên hệ với chúng tôi và
các thành phần tương ứng là ContactComponent ở đây.
Vì vậy, với điều này, chúng tôi đã tích hợp ContactComponent của
chúng tôi vào ứng dụng của chúng tôi và chúng ta hãy lưu những thay đổi
này và sau đó chúng tôi cũng sẽ cần phải cập nhật các thành phần tiêu đề và cập nhật
một liên kết trong thành phần tiêu đề để giúp chúng tôi điều hướng đến ContactComponent.
Vì vậy, tôi chỉ sẽ sao chép điều này từ menu một liên kết trong
thanh công cụ của thành phần tiêu đề của tôi ở đó và sau đó sao chép rằng vào
ContactComponent và sau đó cập nhật nó như liên hệ với chúng tôi.
Hãy lưu các thay đổi cho tất cả các tệp và
sau đó xem ứng dụng kết quả.
Đi đến ứng dụng trong trình duyệt của chúng tôi,
nếu bây giờ chúng ta điều hướng đến ContactComponent,
chúng ta có thể thấy rằng các chi tiết của ContactComponent được hiển thị
ở đây giữa đầu trang và chân trang như chúng ta mong đợi.
Vì vậy, bên trong ContactComponent,
chúng tôi có tiêu đề Liên hệ với chúng tôi
ở đó và sau đó một số thông tin vị trí mà tôi đã hiển thị địa chỉ.
Vì vậy, điều này là tương tự như địa chỉ mà chúng tôi
có trong chân trang vì vậy tôi sẽ không giải thích rằng
chi tiết sau đó chúng tôi có một phần khác ở đây, nơi chúng tôi bao gồm bản đồ của vị trí của chúng tôi.
Chúng tôi sẽ không làm điều đó vào lúc này,
chúng tôi sẽ chỉ để nó trống và sau đó bạn cũng thấy rằng tôi có
ba nút mà tôi đã bao gồm ở đây cho cuộc gọi, Skype, và Email.
Ba nút này được kích hoạt trong ứng dụng của chúng
tôi và tôi đang sử dụng nút mat nâng lên để hiển thị ba nút này.
Vì vậy, bạn có thể thấy rằng các nút này trông khác
với các nút khác mà bạn đã bao gồm trong ứng dụng của bạn ở đó.
Vì vậy, đây là một thành phần nút nâng lên từ vật liệu góc cạnh của chúng tôi ở đó.
Vì vậy, khi nhìn thấy ContactComponent và
thực tế là chúng tôi có thể điều hướng đến ContactComponent.
Bây giờ, từ các thành phần khác, chúng
ta hãy xem nhanh
mã HTML mà chúng tôi bao gồm cho mẫu cho ContactComponent của chúng tôi.
Đi đến contactcomponent.html, bạn sẽ thấy rằng chúng ta có
tiêu đề cho trang này bao gồm bằng cách sử dụng div này
ở đây và div thứ hai bên trong đây với FXFlex
bao gồm các thông tin vị trí và sau đó điều này bên trong thông tin vị trí này,
Tôi một lần nữa xác định một div mà sẽ cho phép tôi để
bao gồm nhiều lượt xem vào div khác này ở đây.
Vì vậy, bên trong này, tôi xác định
một div với hiệu ứng bố trí cột và hiệu ứng lớp hàng.
Vì vậy, đây là cách lồng nhau để xác định xem CSS Flex của tôi ở đây.
Vì vậy, bên trong này một lần nữa,
tôi đang sử dụng một cái nhìn div Flex với FXFlex 50 vì vậy nó
chiếm một nửa và sau đó FXFlex bù đắp 20 pixel.
Vì vậy, xem CSS này sẽ được di dời sang bên phải bởi 20 pixel vì vậy tôi
có một số lề có và sau đó chúng tôi có
địa chỉ bao gồm ở đây và sau đó xuống dưới đây,
bạn có thể thấy rằng bên trong div khác,
Tôi có một thẻ với mat nâng nút liên kết với nó.
Đây là nguyên nhân gây ra các nút được nâng lên mà chúng tôi
có ở dưới cùng của trang Liên hệ ở đó.
Vậy là, ba người trong số họ ở đây.
Một cho số điện thoại.
Một cho Skype và một cho email ở đây và cũng lưu ý rằng tôi đang sử dụng
các biểu tượng Font Awesome cho mỗi người trong số họ và sau đó là bản
đồ vị trí của bạn trong div khác đây.
Vì vậy, cả hai này kèm theo bên trong div bên ngoài này được kèm theo một lần nữa bên trong div.
Vì vậy, cách lồng nhau để xác định các bố cục flex cho các bộ phận khác nhau của chúng tôi ở đây.
Vì vậy, đó là về nó cho ContactComponent.
Chúng tôi đã tích hợp nó vào ứng dụng đơn trang của chúng tôi.
Bây giờ, đi đến DishService.
Bây giờ, trong DishService cùng với phương pháp GetDishes,
tôi sẽ giới thiệu hai phương pháp nữa.
Một phương pháp gọi là GetDish,
một món ăn cụ thể và sau đó tôi sẽ xác định món ăn với một id được chỉ định ở đây.
Vì vậy, id sẽ
được và đó sẽ chỉ định cho tôi các món ăn với id tương ứng với số này.
Vì vậy, đó sẽ là một phương pháp nữa mà tôi sẽ thêm
vào và cũng có thể thêm vào một phương pháp gọi là getFeaturedDish.
Vì vậy, món ăn đặc trưng này sẽ sử dụng
thuộc tính đặc trưng mà chúng tôi thêm vào
và sau đó trả lại món ăn mà tính năng được thiết lập thành true.
Vì vậy, đó là cách bạn có thể chọn ra một món ăn cụ thể và sau đó làm cho nó có sẵn.
Bây giờ, lý do tại sao tôi có cờ đặc trưng là khi tính năng được thiết lập thành true,
món ăn đặc biệt đó sẽ được hiển thị trên HomeComponent.
Bây giờ, làm thế nào để chúng ta chọn những món ăn này?
Vì vậy, chúng ta hãy thêm vào mã cho điều này.
Vì vậy, đối với GetDish,
tôi cần phải trả lại một cái gì đó từ các món ăn hằng số mà tôi đã có ở đó.
Vì vậy, từ các món ăn hằng số,
tôi sẽ sử dụng cách của JavaScript để làm lọc một mảng.
Vì vậy, việc lọc một mảng sẽ giúp tôi chọn
ra chỉ những phần tử từ mảng
phù hợp với một tiêu chí cụ thể sẽ được xác định
bên trong bộ lọc ở đây và sau đó trong số đó tôi sẽ chỉ trả về một trong những đầu tiên.
Bây giờ, nó sẽ xảy ra rằng khi tôi chỉ định một id,
nó sẽ chọn chỉ có một mục nhưng sau đó sẽ trở thành một mảng.
Vì vậy, từ mảng đó, tôi cần phải trích xuất ra rằng một phần tử trong mảng đó.
Vì vậy, đó là lý do tại sao tôi đang sử dụng trong niềng răng zero ở đó.
Vì vậy, điều đó sẽ giúp tôi xác định.
Vì vậy, làm thế nào để lọc các món ăn của tôi?
Vì vậy, đối với mỗi món ăn trong danh sách các món ăn của tôi,
vì vậy đây là nơi tôi sẽ sử dụng
một tính năng khác của typescript gọi là các chức năng mũi tên.
Hàm mũi tên là một cách viết tắt để viết một hàm.
Vì vậy, nếu bạn đang sử dụng để viết các chức năng,
thay vì viết các chức năng công phu nói
chức năng và sau đó trong dấu ngoặc món ăn và như vậy,
tôi chỉ có thể viết nó trong trường hợp chức năng là rất đơn giản,
nó rất dễ dàng để viết này như là một chức năng mũi tên ở đây.
Vì vậy, những
gì tôi chỉ định ở đây là lọc mảng món ăn và trích xuất ra
chỉ những
mục từ mảng mà id món ăn đó.
Vì vậy, mà id món ăn phù hợp với
id đã được cung cấp như là một tham số cho món ăn.
Vì vậy, bằng cách này bạn sẽ trích xuất ra món ăn cụ thể từ
mảng này và sau đó trả lại món ăn đó từ phương pháp GetDish này.
Các chức năng mũi tên đã giúp tôi viết mã một cách đơn giản hơn.
Nếu bạn không thích
các chức năng mũi tên sau đó bạn có thể viết nó theo cách thông thường hơn bằng cách nói,
“món ăn hàm”, và sau đó từ này bạn sẽ trả về dish.id triple bằng id,
vì vậy điều này sẽ trả về một Boolean.
Khi bộ lọc gặp một sự thật bên trong ở đây,
những yếu tố từ các món ăn sẽ được chọn ra vào mảng.
Vì vậy, đây là nơi mà kiến thức JavaScript của bạn có lợi thế của bạn.
Vì vậy, bạn cần phải biết làm thế nào một bộ lọc JavaScript
hoạt động để giúp bạn hiểu làm thế nào điều này được thực hiện.
Được rồi, bây giờ tương tự cho các món ăn đặc trưng,
tôi sẽ sử dụng một phương pháp tương tự để trích xuất từ
mảng món ăn của tôi bằng cách sử dụng một bộ lọc ở đây nhưng bộ lọc mà
tôi sẽ xác định ở đây sẽ là một lần nữa một chức năng mũi tên ở đây.
Bạn sẽ quen với các chức năng mũi tên và sau đó một khi bạn đã quen với chúng,
sau đó bạn sẽ nhận ra cách đơn giản chúng là quá đúng.
Vì vậy, ở đây cách để lựa chọn tôi
là dish.featured tài sản vì dish.feature này đã là một Boolean có.
Vì vậy, điều đó sẽ giúp tôi trả lại món ăn đặc trưng.
Vì vậy, đối với bất cứ món ăn nào,
tính năng món ăn là đúng.
Món ăn đặc biệt đó sẽ được lọc
ra khỏi mảng đĩa và sau đó sẽ chỉ có một ngày.
Dù sao, bạn nên chắc chắn rằng để
bạn sẽ thiết lập tính năng chỉ để true cho một trong những,
và sau đó tôi sử dụng này bởi vì bộ lọc này sẽ trả về một mảng phụ từ mảng món ăn, vì
vậy tôi cần phải chọn ra phần tử đó.
Sẽ có một yếu tố duy nhất ở đó tại chỉ số 0.
Vì vậy, tôi đang sử dụng chỉ số không để chọn phần tử đó và trả lại
rằng từ phương pháp món ăn được đặc trưng ở đây.
Vì vậy, điều đó hoàn thành việc cập nhật cho các dịch vụ món ăn.
Để xây dựng mẫu nhà của chúng
tôi, chúng tôi sẽ giới thiệu trên chế độ xem nhà một món ăn đã chọn,
một chương trình khuyến mãi hiện tại được lựa chọn bởi nhà hàng,
và một nhà lãnh đạo công ty được lựa chọn từ danh sách độc giả.
Người lãnh đạo doanh nghiệp được giới thiệu trên trang đầu
sẽ là một phần trong bài tập của bạn theo sau bài học cụ thể này.
Nhưng chúng tôi sẽ bao gồm bây giờ,
chúng tôi có một món ăn đặc trưng và khuyến mãi đặc trưng trên trang nhất.
Vì vậy, có nghĩa là tôi cần một dịch vụ khuyến mãi mà trả về
tập hợp các chương trình khuyến mãi đang được thực hiện bởi nhà hàng đặc biệt này.
Vì vậy, hãy để tôi thêm vào một dịch vụ khuyến mãi cho ứng dụng của tôi.
Vì vậy, để làm điều đó, trong thư mục được chia sẻ,
tôi sẽ tạo ra một tập tin mới gọi là promotion.ts.
Trong chương trình khuyến mãi, tôi sẽ tạo ra một lớp học,
chương trình khuyến mãi và trả lại chương trình khuyến mãi này ở đây.
Vì vậy, lớp khuyến mãi này chứa những gì?
Nó chứa một tài sản id,
sau đó nó chứa tên cho việc quảng bá của nhà hàng.
Vì vậy, ví dụ, chương trình khuyến mãi có thể giống như buffet cuối tuần.
Hoặc 10% mỗi ngày vào
giờ ăn trưa và những thứ như thế có thể được giới thiệu trên trang chủ nhà hàng của bạn ở đó.
Vì vậy, tên sau đó tôi cũng sẽ bao gồm một hình ảnh,
đó là để được của chuỗi loại URL hình ảnh,
sau đó nhãn đó sẽ là một chuỗi.
Giá cả cũng là một chuỗi.
Bây giờ, lao động ngụ ý,
bạn không thấy tôi sử dụng chúng vào lúc này,
chúng tôi sẽ đưa chúng vào sử dụng trong một trong những bài tập sau này đặc trưng Boolean.
Vì vậy, bạn sẽ thấy cờ nổi bật một lần nữa xuất hiện trong chương trình khuyến mãi cũng,
và sau đó mô tả chuỗi.
Vì vậy, bạn thấy rằng chương trình khuyến mãi có cấu trúc khá
giống với cấu trúc món ăn mà chúng ta đã thấy trước đó.
Vì vậy, đây là lớp khuyến mãi ở đây.
Bây giờ, cùng với lớp khuyến mãi,
tôi cần phải tạo ra một lớp khác
xuất khẩu tập hợp các chương trình khuyến mãi nói liên tục với chương trình khuyến mãi ở đây.
Vì vậy, ở đây, tôi sẽ nhập
các lớp khuyến mãi
từ các tập tin promotion.ts,
và sau đó tôi sẽ xuất một hằng số được gọi là khuyến mãi.
Vì vậy, bạn thấy rằng tôi đang sử dụng một cấu trúc rất giống với các món ăn ở đây.
Vì vậy, bạn bắt đầu thấy rằng,
cấu trúc mà chúng tôi sử dụng trước đó cho
các chương trình khuyến mãi cho các món ăn cũng hữu ích cho việc tuyên bố chương trình khuyến mãi.
Nếu bạn có một cấu trúc khác nhau,
bạn sẽ thấy rằng với các nhà lãnh đạo cấu trúc sẽ có một chút
khác biệt đối với đối tượng JavaScript ở đây. Các chương trình khuyến mãi.
Bây giờ, chi tiết của một chương trình khuyến mãi cụ thể
mà tôi đã đưa ra trong hướng dẫn, vì vậy tôi sẽ đề nghị bạn sao chép và dán nó từ
đó thay vì tôi gõ toàn bộ điều ở đây.
Vì vậy, hãy để tôi đi trước và sao chép và dán
đối tượng JavaScript vào mảng đối tượng JavaScript này ở đây,
vì vậy bạn đi.
Chương trình khuyến mãi chỉ có một đối tượng duy nhất tại thời điểm này.
Trong tương lai, chúng ta có thể thêm nhiều hơn.
Tại thời điểm này, tôi chỉ có một vì vậy tôi chỉ cần thêm nó vào đó,
và tôi sẽ sử dụng nó và đó là chương trình khuyến mãi đặc trưng cho nhà hàng của tôi ở đó.
Đây chỉ là chương trình khuyến mãi,
vì vậy hãy để tôi cập nhật chương trình khuyến mãi,
đó là những gì tôi cần.
Vì vậy, tôi chỉ cần lưu các thay đổi vào tập tin quảng cáo.
Tiếp theo, tôi sẽ tạo ra một dịch vụ khác gọi là dịch vụ khuyến mãi.
Vì vậy, để làm điều đó, chúng ta hãy đi đến dòng lệnh tại dấu nhắc lệnh loại
ng tạo ra khảo sát dịch vụ/khuyến mãi.
Vì vậy, các dịch vụ khuyến mãi được tạo ra ở đó.
Vì vậy, bây giờ PromotionService đã được đưa ra.
Vì vậy, hãy thêm vào các tính năng cho PromotionService.
Vì vậy, đi đến PromotionService,
bạn thấy rằng PromotionService bây giờ được bao gồm trong thư mục dịch vụ của bạn ở đây,
vì vậy chúng tôi cần phải chuẩn bị một PromotionService.
Vì vậy, trong PromotionService,
tôi sẽ nhập khẩu
chương trình khuyến mãi từ chia sẻ/khuyến mãi,
lớp khuyến mãi, và cũng nhập khẩu
chương trình khuyến mãi từ lớp chia sẻ/chương trình khuyến mãi ở đó.
Các chương trình khuyến mãi liên tục từ đó.
Bây giờ, giống như chúng tôi đã có cho dịch vụ món ăn,
chúng tôi cần phải tạo ra ba phương pháp bên trong PromotionsService.
Vì vậy, những gì tôi sẽ làm là để tiết kiệm cho mình
những rắc rối, tôi sẽ đi vào dish.service, và sau đó chỉ cần sao chép ba,
và sau đó dán nó vào dịch vụ quảng cáo của tôi,
sau đó chỉ cần chỉnh sửa mã.
Được rồi, vì vậy từ các dịch vụ
khuyến mãi, tôi cần phải trả lại Get
Promotion và đây là loại khuyến mãi và sau đó điều này sẽ trở lại Khuyến mãi,
và sau đó nhận được thứ hai sẽ được khuyến mãi
mà một lần nữa nhận được id của chương trình khuyến mãi,
vì vậy tôi sẽ trả lại
khuyến mãi. promo.id là id
Sau đó khuyến mãi GetFeatures.
Vì vậy, bạn có thể thấy rằng cấu trúc của
chương trình khuyến mãi là rất giống với chương trình phục vụ món ăn
và điều này sẽ không phải là loại
khuyến mãi, và điều này sẽ trở lại chương trình khuyến mãi.
PromotionService của tôi đã sẵn sàng.
Bây giờ, tôi sẽ đi vào thành phần nhà, và chuẩn bị điều đó,
để trong thành phần nhà của tôi,
tôi sẽ hiển thị một món ăn đặc trưng và một chương trình khuyến mãi đặc trưng.
Các tính năng/món ăn và tính năng/khuyến mãi sẽ được hiển thị trong
thành phần nhà bằng cách sử dụng các thành phần thẻ vật liệu góc cạnh.
Vì vậy, trước tiên chúng ta cần phải có dữ liệu vào thành phần nhà của chúng tôi,
vì vậy đó là những gì chúng ta sẽ làm trong tập tin kịch bản kiểu thành phần nhà ở đó.
Vì vậy, đi đến các thành phần nhà tập tin kịch bản kiểu, thành phần nhà.
Ở đây, tôi cần nhập khẩu các món ăn
từ chia sẻ/món ăn và cũng là món ăn
tương hợp.service từ dịch vụ/dish.service.
Được rồi, bây giờ tôi cũng sẽ làm điều tương tự cho chương trình khuyến mãi,
vì vậy tôi sẽ chỉ sao chép và dán nó vào đây,
và sau đó chỉnh sửa cái này,
vì vậy đây sẽ là chương trình khuyến mãi,
đây sẽ là chương trình khuyến mãi,
và sau đó là chương trình khuyến mãi, và sau đó nó sẽ là chương trình khuyến mãi.
Vì vậy, với điều này, chúng tôi có cả các dịch vụ món ăn và
món ăn và dịch vụ khuyến mãi có sẵn cho chúng tôi,
trong thành phần nhà của chúng tôi.
Đến bây giờ với nhà xây dựng.
Bây giờ hãy tiêm hai dịch vụ ở đây,
và làm cho chúng có sẵn cho các ứng dụng của chúng tôi hoặc dịch vụ món ăn,
và dịch vụ khuyến mãi được tiêm ở đây.
Vì vậy, với điều này, chúng tôi có quyền truy cập vào cả hai dịch vụ.
Vì vậy, bây giờ trong phương pháp NgonInit,
tôi sẽ lấy hai món ăn đặc trưng.
Vì vậy, tôi sẽ nói This.Dishservice.getFeaturedDish
và cũng khuyến mãi,
PromotionService và GetFeaturedPromotion.
Chỉ cần để được hoàn thành,
để tôi khai báo món ăn ở đây là của
loại Dish và khuyến mãi như của loại Khuyến mãi ở đây.
Vì vậy, điều đó nên làm rõ tất cả các giá trị mà chúng tôi đang sử dụng bên trong đây.
Vì vậy, với điều này, chúng tôi hoàn thành cập nhật cho tập tin typescript thành phần nhà của chúng tôi.
Bây giờ chúng ta hãy chuyển sang tập tin mẫu,
và sau đó thêm vào hai thẻ để hiển thị các món ăn đặc trưng và khuyến mãi đặc trưng.
Bây giờ, vì điều này, tôi đã đưa cho bạn mã trong hướng dẫn.
Vì vậy, tôi sẽ chỉ sao chép mã đó và dán nó vào đây.
Bạn đã biết làm thế nào để tạo thẻ,
vì vậy bạn sẽ có thể dễ dàng làm theo mã mà tôi dán ở đây.
Vì vậy, mẫu thành phần nhà cũng được cập nhật,
vì vậy bạn có thể thấy rằng nó có hai thẻ ở đây.
Đối với một, hiển thị các món ăn và một trong những khác hiển thị các chương trình khuyến mãi ở đây,
và kèm theo bên trong một div FXLayout đây.
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó xem nhanh ứng dụng của chúng tôi.
Sau khi tạo dịch vụ khuyến mãi,
chúng tôi cũng cần phải bao gồm dịch vụ khuyến mãi trong AppModule
và làm cho nó có sẵn cho ứng dụng của chúng tôi.
Vì vậy, tôi sẽ đi vào đây,
và sau đó nhập
dịch vụ khuyến mãi ở đây.
Sau đó, tuyên bố các dịch vụ khuyến mãi
là một trong những nhà cung cấp
trong tập tin AppModule.Ts của tôi ở đây.
Vì vậy, trong tập tin AppModule,
tôi yêu cầu cả hai,
và sau đó lưu các thay đổi.
Đi đến trình duyệt,
bây giờ bạn có thể thấy rằng trong trình duyệt,
thành phần nhà bây giờ hiển thị hai thẻ,
một cho món ăn đặc trưng và một cho chương trình khuyến mãi đặc trưng ở đây.
Vì vậy, bạn có thể thấy rằng hai chiếc xe được hiển thị ở đây.
Bây giờ tôi có thể điều hướng đến trang Menu,
và sau đó cũng đến trang Liên hệ.
Trang Giới thiệu vẫn không có ở đó,
bạn sẽ điền vào trang Giới thiệu như là một phần của nhiệm vụ thứ hai của bạn.
Hãy nhìn vào cùng một ứng dụng trên một kích thước màn hình nhỏ hơn,
vì vậy đây là một màn hình iPhone 6 Plus.
Hãy nhìn vào thành phần nhà và màn hình iPhone 6 Plus.
Bạn có thể thấy món ăn đặc trưng và khuyến mãi đặc trưng trên trang chủ đó.
Sau đó, trình đơn mà chúng tôi đã thấy trước đó,
và cũng là trang Liên hệ được hiển thị ở đây.
Vì vậy, bạn có thể thấy rằng bây giờ ứng dụng đơn trang của chúng tôi được cấu hình nhiều hơn.
Ngoại trừ Giới thiệu,
mà chúng tôi sẽ làm trong nhiệm vụ thứ hai.
Một thay đổi nhỏ nữa mà bạn có thể làm trong tập tin HTML thành phần tiêu đề của bạn,
là cùng với các chỉ thị liên kết router,
Angular Route cũng hỗ trợ thêm một chỉ thị được gọi là RouteLinkActive.
Điều này cho phép chúng ta áp dụng một số lớp cho các yếu tố cụ thể ở đây.
Vì vậy, trong trường hợp này,
nếu liên kết này trở nên hoạt động hơn bất cứ điều gì tôi chỉ định ở đây,
sẽ được áp dụng như một lớp cho mục cụ thể này ở đó.
Vì vậy, tôi sẽ chỉ định một lớp được gọi là hoạt động.
Vì vậy, ở đây, tôi chỉ định RouterLinkActive với hoạt động.
Vì vậy, nếu tôi định nghĩa một lớp CSS được gọi là hoạt động,
sau đó lớp sẽ được áp dụng cho liên kết này,
bất cứ khi nào quan điểm cụ thể này đang được hiển thị trên trang ứng dụng ở đây.
Tôi sẽ sao chép cùng một điều và áp dụng nó cho tất cả các nút còn lại,
nơi tôi đã xác định liên kết router.
Vì vậy, tôi sẽ áp dụng lớp RouterLinkActive,
vào Trang chủ, Menu và Liên hệ với chúng tôi.
Bây giờ, điều này cũng có nghĩa là tôi nên xác định một lớp CSS hoạt động.
Vì vậy, để làm điều đó, tôi sẽ đi vào các thành phần tiêu đề tập tin SESS,
và sau đó xác định một lớp hoạt động ở đây,
vì vậy tôi sẽ xác định các lớp hoạt động ngay tại đó.
Để xác định các lớp hoạt động,
tôi sẽ thêm vào một biến màu sắc ở đây gọi là background-moredark.
Sau đó, màu tương ứng là 4527A0,
đây là một phiên bản tối hơn của màu tối nền này, 4527A0.
Sau đó, đối với hoạt động của tôi,
những gì tôi sẽ làm là, từ lớp hoạt động,
tôi sẽ cho phép lớp xác định một
nền, thiết lập nền của
phần tử đó để màu nền hơn.
Vì vậy, khi xem cụ thể đó được chọn và hiển thị trong trang,
sau đó lớp hoạt động này sẽ được áp dụng cho
rằng A tag cụ thể
có bởi chỉ thị hoạt động liên kết router mà chúng tôi đã áp dụng ở đây.
Bây giờ, những gì thay đổi này gây ra trên trang web của chúng tôi.
Bây giờ, đi đến trang web của chúng
tôi, chúng ta sẽ thấy điều này giới thiệu trên trang web của chúng tôi.
Đi đến ứng dụng của chúng tôi,
bây giờ bạn thấy rằng khi chúng tôi đang ở trong
chế độ xem nhà trong thành phần nhà được hiển thị ở đây, chế độ xem tương ứng của nó.
Sau đó, nút Home ở đây có một màu nền khác nhau được
áp dụng bởi vì các lớp hoạt động đã được thêm vào bởi vì chúng tôi
xác định RouterLinkActive để hoạt động ở đây.
Vì vậy, lớp đó được áp dụng.
Tương tự như vậy, khi bạn chọn menu,
sau đó bạn thấy rằng menu được đánh dấu trong tiêu đề,
và chế độ xem menu được hiển thị ở đây,
và tương tự cho nội dung.
Bây giờ, điều này cho phép chúng ta nhìn thấy trong nháy mắt mà trả tiền xem VR đặc biệt,
trong ứng dụng đơn trang của chúng tôi.
Vì vậy, đây là một chút bổ sung cung cấp tăng cường cho giao diện người dùng,
cho phép chúng ta nhìn thấy một số tính năng thú vị.
Mặc dù, nó không thêm nhiều vào các chức năng của ứng dụng,
nhưng chỉ cần thêm một số tính năng nhỏ sẽ là một bổ sung hữu ích cho ứng dụng của bạn.
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 đã làm việc để tích hợp
các thành phần liên lạc vào ứng dụng đơn trang của chúng tôi.
Chúng tôi cũng thiết kế một vài thẻ mà chúng tôi đưa vào thành phần nhà,
và thêm vào một vài tính năng mới cho ứng dụng của chúng tôi.
Đây là thời điểm tốt để bạn lưu các thay đổi vào kho lưu trữ Git của bạn với thông điệp,
Đơn Trang Ứng dụng Phần 1.