Trong bài tập này, chúng tôi sẽ làm cho việc sử dụng các máy khách HTTP góc để
giao tiếp với máy chủ JSON mà chúng tôi đã thiết lập trong bài tập trước đó.
Bây giờ chúng tôi sẽ có thể tải dữ liệu từ máy chủ đến ứng dụng góc cạnh của chúng tôi bằng cách sử dụng
HTTP client và sau đó sử dụng dữ liệu để
xây dựng các quan điểm khác nhau trong các thành phần của chúng tôi.
Trong bài tập này, chúng ta sẽ cấu hình lại dịch vụ món ăn để có thể
đi và lấy dữ liệu về các món ăn từ máy chủ JSON.
Là một phần trong nhiệm vụ của bạn,
bạn sẽ hoàn thành hai phần còn lại,
dịch vụ lãnh đạo và dịch vụ khuyến mãi.
Chúng ta sẽ thấy làm thế nào chúng ta có thể tận dụng các khách hàng HTTP mà sẽ trả lại một quan sát được cho chúng tôi.
Chúng tôi đã cấu hình lại ứng dụng của chúng tôi,
đặc biệt là dịch vụ để có thể cung cấp khả năng quan sát đến các thành phần của chúng tôi.
Trong các thành phần của chúng tôi, chúng tôi đang đăng ký những điều quan sát này.
Vì vậy, phần chính của thiết lập
để lấy dữ liệu từ dịch vụ đến thành phần đã có.
Chúng tôi sẽ tăng cường nó một chút để đối phó với các lỗi trong bài tập tiếp theo.
Bước đầu tiên của chúng tôi trong việc chuẩn bị ứng dụng Angular để sử dụng
HTTP client để truy cập vào máy chủ là
cấu hình ứng dụng của chúng tôi với HttpClientModule.
Vì vậy, để làm điều đó, hãy mở app.module.t.
Sau đó, trong đây, chúng ta hãy nhập
HttpClientModule từ Angular/Common/HTTP.
Một khi chúng tôi nhập khẩu
đó, sau đó chúng tôi sẽ đi trước và cấu hình trình trang trí NGModule
trong nhập khẩu với HttpClientModule.
Bây giờ, ứng dụng của chúng tôi đã sẵn sàng để sử dụng HttpClientModule để truy cập vào máy chủ.
Bây giờ, hãy chắc chắn rằng máy chủ JSON đang hoạt động và
phục vụ dữ liệu để ứng dụng của chúng tôi có thể
giao tiếp với các ứng dụng máy chủ JSON.
Bây giờ chúng tôi đang truy cập dữ liệu từ phía máy chủ,
nó là một thực hành tốt để tạo ra một giá trị đặc biệt mà trỏ đến
baseURL của máy chủ của bạn để
nó có thể được cấu hình trong ứng dụng góc cạnh của bạn như và khi cần thiết.
Vì vậy, đi đến thư mục được chia sẻ,
tôi sẽ tạo một tệp mới ở đây có tên là baseurl.t.
Sau đó, trong tập tin này,
tôi sẽ bao gồm một hằng số và xuất nó và hằng số có tên BaseURL,
mà tôi sẽ thiết lập để HTTP: //localhost:3000.
Vì vậy, như bạn nhớ lại, đây là BaseURL mà máy chủ JSON của tôi có thể truy cập.
Vì vậy, localhost:3000/, có.
Vì vậy, với điều này,
hãy để tôi lưu các thay đổi cho BaseURL.
Bây giờ, góc cung cấp một cách cung cấp các giá trị như thế
này cho phần còn lại của ứng dụng của bạn bằng cách cấu hình một nhà cung cấp trong mô-đun ứng dụng của bạn.
Vì vậy, đi đến các mô-đun ứng dụng,
để cho phép chúng tôi cung cấp rằng baseURL cụ thể,
chúng tôi sẽ đầu tiên nhập giá trị BaseURL vào ứng dụng góc của chúng tôi.
Vì vậy, tôi sẽ nói nhập BaseURL từ shared/baseurl.
Giá trị này bây giờ có thể được cung cấp cho
phần còn lại của ứng dụng của tôi bằng cách đi đến các nhà cung cấp.
Sau đó, ngoài LeaderService,
nếu tôi cấu hình một giá trị như thế này,
tôi sẽ nói cung cấp
và sau đó BaseURL, UseValue.
Vì vậy, bằng cách này, tôi sẽ cung cấp giá trị BaseURL này như
là một nhà cung cấp giá trị từ trong mô-đun ứng dụng để phần còn lại của ứng dụng góc cạnh của tôi.
Trong bước tiếp theo,
chúng tôi sẽ cấu hình DishService của chúng tôi để cho phép nó truy cập vào phía máy chủ,
và sau đó lấy dữ liệu từ phía máy chủ,
và sau đó làm cho dữ liệu có sẵn cho các thành phần của chúng tôi.
Bây giờ, chúng ta sẽ đi đến DishService.
Sau đó, trong DishService,
các món ăn này không còn cần thiết từ tập tin địa phương ở đó.
Tôi sẽ tải dữ liệu đó từ phía máy chủ.
Vì vậy, tôi sẽ loại bỏ điều đó và sau đó thêm vào một nhập khẩu
của HttpClient từ góc cạnh,
mỗi HTTP phổ biến,
nhập khẩu BaseURL từ,
nhớ lại rằng đây là trong shared/baseurl.
Bây giờ, trong DishService của
tôi, tôi sẽ đi và lấy dữ liệu từ phía máy chủ.
Vì vậy, trong constructor,
tôi sẽ cập nhật các constructor bằng cách
tiêm HttpClient vào constructor của tôi ở đây.
Vì vậy, bây giờ, DishService của tôi nên được thiết lập để
có được dữ liệu từ phía máy chủ và trả lại dữ liệu cho ứng dụng của tôi.
Bây giờ, bạn nhận thấy rằng
phương pháp GetDishes đã được thiết lập để trở về quan sát được thành phần.
Vì vậy, phần đó đã được thiết lập.
Bây giờ, những gì điều này sẽ trở lại là những gì nó có được từ
phương pháp HTTP get
mà chúng tôi sẽ gọi phía máy chủ.
Vì vậy, để gọi phía máy chủ,
tôi sẽ phải cung cấp,
trong phương pháp get,
baseURL mà tôi
đã thu được, và sau đó là các món ăn.
Vì vậy, theo cách này, phương pháp HTTP get sẽ nhận được dữ liệu từ localhost:3000/món ăn.
Vì vậy, đó là URL phía máy chủ
mà từ đó bạn có thể lấy dữ liệu món ăn ở đây. Đó là nó.
Máy chủ của tôi sẽ cung cấp dữ liệu trong các hình thức của một
quan sát đến dịch vụ này khi phương pháp HTTP get được gọi,
và đó sẽ được trả lại cho các thành phần thông qua các phương pháp GetDishes.
Đó là về nó. Bây giờ, dịch vụ của tôi được thiết lập để đi và
lấy dữ liệu từ phía máy chủ và sau đó trả lại dữ liệu cho thành phần của tôi.
Tôi sẽ cập nhật các phương pháp còn lại cũng theo cách tương tự.
Vì vậy, những gì tôi sẽ làm cho phương pháp tiếp theo cho phương pháp GetDish là,
tôi sẽ sao chép
phần này và sau đó chỉ cần dán nó vào vị trí ở đây,
và sau đó chúng tôi sẽ chỉnh sửa điều đó.
Bây giờ, khi bạn cần phải có được cho một món ăn cụ thể,
bạn có ID của món ăn có sẵn cho bạn.
Vì vậy, chúng tôi sẽ nói ID GetDish có sẵn dưới dạng tham số.
Vì vậy, để các món ăn,
tôi sẽ thêm ID làm tham số khác ở đây.
Bây giờ, khi tôi nhận được phản ứng và sau
đó trả lại cho các thành phần thông qua các cuộc gọi phương pháp GetDish.
Tương tự như vậy, đối với món ăn đặc trưng,
nó sẽ là một cách hơi thú vị để cấu hình nó.
Bây giờ, đối với món ăn đặc trưng,
khi bạn cần truy cập dữ liệu từ phía máy chủ,
những gì tôi sẽ làm là, bây giờ,
khi tôi yêu cầu một món ăn đặc trưng, bây giờ,
cách phía máy chủ của tôi được thiết lập là tôi có thể gửi
một tham số truy vấn trong URL của tôi để tôi có thể nói món ăn?
và sau đó nói nổi bật bằng đúng.
Vì vậy, bằng cách này, máy chủ của tôi sẽ
chỉ trả về những đối tượng mà cờ nổi bật được đặt thành true,
hoặc thuộc tính nổi bật được đặt thành true ở phía máy chủ.
Bây giờ, đây là cách phía máy chủ được thiết lập.
Bây giờ, một lần nữa, một khi bạn có được dữ liệu,
sau đó bạn chỉ cần ánh xạ giá trị và sau đó trả lại rằng như là
một quan sát được thành phần của tôi thông qua phương pháp món ăn được đặc trưng.
Khi tôi truy vấn phía máy chủ bằng cách sử dụng tham số truy vấn,
nó sẽ trả về một mảng các đối tượng phù hợp.
Trong trường hợp này, nó xảy ra rằng mảng sẽ chứa chính xác một mục ở đó.
Nhưng khi tôi trả về giá trị sau khi có được kết quả,
tôi cũng cần phải bao gồm một số không có vì đây là một mảng, vì
vậy tôi cần phải trả về phần tử đầu tiên từ mảng.
Trước khi tôi quên, hãy để tôi nhập
toán tử bản đồ từ các toán tử rxjs.
Bây giờ, đối với người cuối cùng, GetDishids,
những gì tôi sẽ làm là tận dụng thực tế là tôi đã
có phương pháp GetDishes sẵn có cho tôi.
Vì vậy, khi phương thức getDishes trở về,
tôi sẽ ánh xạ với các nhà điều hành bản đồ
như dishes.map, dish.dish id
Vì vậy, bằng cách này, tôi chỉ trả về giá trị mà tôi cần,
chỉ là các món ăn ids thông qua phương pháp này ở đây.
Đó là về nó.
Bây giờ, dịch vụ món ăn của tôi được cập nhật hoàn toàn để đi và lấy dữ liệu từ
trang web máy chủ và sau đó cung cấp dữ liệu cho các thành phần của tôi trong tôi.
Ứng dụng góc ở đây.
Trong bước tiếp theo,
tôi sẽ đi vào thành phần menu.
Sau đó, trong thành phần menu,
tôi sẽ sử dụng giao diện tiêm có sẵn thông qua
lõi góc để tiêm BaseURL này mà tôi đã thu được ở đó.
Vậy, làm thế nào để chúng ta sử dụng nó?
Trong trình xây dựng của thành phần của tôi,
tôi sẽ đi vào và nói,
"@Inject" Vì vậy, nhớ lại rằng chúng tôi đã thiết lập
BaseURL này như một nhà cung cấp cho giá trị này trong mô-đun ứng dụng trước đó.
Vì vậy, BaseURL đó bây giờ có thể được tiêm vào các thành phần như thế này ở đây.
Bây giờ, khi bạn có một dịch vụ,
bạn đang tiêm các dịch vụ như thế này ở đây,
nhưng khi bạn có một giá trị,
sau đó bạn tiêm giá trị bằng cách sử dụng bộ trang trí "@Inject".
Ở đây, chúng tôi đang chỉ định giá trị nhà cung cấp mà chúng tôi đã chỉ định ở đó.
Chúng tôi đã nói, cung cấp:BaseURL có,
vì vậy đó là giá trị mà chúng tôi đang cung cấp ở đây.
Sau đó, tôi tuyên bố điều này là riêng BaseURL.
Vì vậy, bây giờ, trong mã của tôi ở đây,
BaseURL này có sẵn để cấu hình bất cứ điều gì tôi cần trong ứng dụng của tôi ở đây.
Trong khi tôi vẫn còn ở đây,
tôi sẽ loại bỏ món ăn được lựa chọn này cũng không được sử dụng trong ứng dụng của tôi.
Sau đó, phương pháp này cũng tôi không sử dụng với ứng dụng
của tôi, vì vậy hãy để tôi làm một chút dọn dẹp trong khi tôi vẫn còn ở đây.
Cách chúng tôi xử lý dữ liệu mà chúng tôi thu được
từ dịch vụ sẽ vẫn giữ nguyên.
Bởi vì dịch vụ của tôi vẫn còn trở lại và quan sát được,
và tôi đang đăng ký để quan sát được trong thành phần này.
Vì vậy, phần đó không thay đổi chút nào.
Bây giờ, lý do tại sao tôi tiêm baseURL trong thành phần của tôi là,
trong mẫu của tôi ở đây,
tôi đang có được hình ảnh món ăn ở đây.
Bây giờ, nhưng hình ảnh món ăn này cần phải được lấy từ máy chủ của tôi ở đó,
từ máy chủ JSON ở đó.
Vì vậy, tôi cần phải đi vào và sau đó cập nhật nguồn này để nói,
BaseURL cộng với hình ảnh món ăn.
Vì vậy, tôi cần phải cung cấp URL hoàn chỉnh cho hình ảnh đó ở đó.
Vì vậy, đó nên là, httlp://localhost:3000/images/, bất cứ điều gì.
Vì vậy, đó là lý do tại sao tôi cần phải cung cấp
giá trị BaseURL ngoài hình ảnh món ăn ở đây.
Vì vậy, điều này tôi sẽ kèm theo trong dấu ngoặc kép,
vì vậy đó là cách một biểu thức như thế này bên trong nội suy sẽ làm việc một cách chính xác.
Vì vậy, kèm theo điều này trong dấu ngoặc kép và sau đó cung cấp rằng như là giá trị nguồn,
và sau đó ở đây bạn thấy rằng bạn đang sử dụng BaseURL cộng với hình ảnh món ăn,
dish.image, thuộc tính hình ảnh chỉ chứa URL một phần.
Vì vậy, nó chứa hình ảnh gạch chéo và tên tập tin image.png.
Vì vậy, đó là lý do tại sao tôi cần phải gắn thêm http://localhost:3000/,
vào tài sản hình ảnh món ăn để tôi xây dựng tổng URL cho hình ảnh của tôi.
Vì vậy, với điều này, thành phần menu của tôi bây giờ được thiết lập hoàn toàn
để có được tất cả các dữ liệu từ phía máy chủ.
Bây giờ, tương tự, tôi sẽ đề nghị bạn cập nhật
thành phần chi tiết món ăn và cũng là thành phần nhà.
Đi đến thành phần chi tiết món ăn,
sử dụng tiêm ở đó,
và sau đó đi đến nhà xây dựng,
trong nhà xây dựng, bây giờ tôi cần phải sử dụng
tiêm baseUrl và baseUrl ở đó,
và như vậy, thành phần chi tiết món ăn của tôi bây giờ được thiết lập để có được dữ liệu từ dịch vụ món ăn.
Vì vậy, phần này sẽ không còn thay đổi,
nó vẫn chính xác như nhau bởi vì dịch vụ món ăn của tôi chỉ đơn giản là
trả lại một quan sát được và tôi đang đăng ký để quan sát được ở đây.
Tôi cũng cần phải cập nhật các thành phần món ăn chi tiết tập tin mẫu,
vì vậy tương tự như đi đến nguồn hình ảnh ở đây,
tôi sẽ thêm baseURL cộng với hình ảnh món ăn và sau đó đặt đó trong trích dẫn đó.
Tương tự như vậy, đi đến thành phần nhà, cùng một điều.
Tôi sẽ làm một tiêm,
và trong constructor
tôi làm một tiêm baseUrl,
và đi đến các thành phần nhà tập tin mẫu,
tương tự như nơi tôi sử dụng hình ảnh món ăn ở đây,
vì vậy tôi sẽ nói, BaseURL cộng với hình ảnh món ăn,
và sau đó kèm theo nó trong dấu ngoặc kép ở đây,
và sau đó lưu các thay đổi.
Vậy, đúng vậy. Ứng dụng của tôi bây giờ được cập nhật để sử dụng
máy chủ để có được dữ liệu cho các món ăn.
Vì vậy, chúng ta hãy đi và xem ứng dụng trong trình duyệt.
Đi đến trình duyệt,
bây giờ bạn có thể thấy rằng trong trình duyệt của
tôi, món ăn của tôi đang được hiển thị chính xác như trước,
và sau đó đi đến thành phần menu,
bạn thấy rằng menu hiển thị chính xác như trước và thành phần chi tiết món ăn,
cũng là các chi tiết món ăn được hiển thị chính xác như trước.
Vì vậy, với sự thay đổi mà chúng tôi đã giới thiệu bằng cách truy cập dữ liệu từ phía máy chủ,
chúng tôi có thể lấy dữ liệu từ phía máy chủ và sau đó
hiển thị dữ liệu trong ứng dụng Angular của chúng tôi.
Để thuyết phục bạn rằng dữ liệu thực sự được lấy từ máy chủ JSON của tôi,
chúng ta hãy đi đến thiết bị đầu cuối và sau đó xem nhật ký trên cửa sổ thiết bị đầu cuối ở đó.
Đi đến thiết bị đầu cuối nơi máy chủ JSON của tôi đang chạy,
bạn có thể thấy rằng tôi đã thực sự thực hiện một loạt các yêu cầu Git
từ trang web máy chủ của tôi để có được tất cả các dữ liệu mà tôi cần trong ứng dụng của tôi.
Vì vậy, thực sự ứng dụng Angular của tôi bây giờ là lấy tất cả các dữ liệu từ
trang web máy chủ cho tất cả các món ăn trong ứng dụng Angular của tôi.
Bây giờ, bạn có thể sử dụng cách tiếp cận tương tự để cập nhật
dịch vụ mới nhất và dịch vụ khuyến mãi,
nhưng chúng tôi sẽ trì hoãn điều đó cho đến khi bài tập cuối cùng trong khóa học này,
nhưng điều này có thể hoàn thành bài tập này.
Trong bài tập này, chúng tôi đã học được cách
sử dụng HTTP client để có được dữ liệu từ
trang web máy chủ và sau đó sử dụng dữ liệu trong việc xây dựng các
quan điểm trong các thành phần của ứng dụng Angular của chúng tôi.
Đâ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 HTTP phần một.