[MUSIC]
Bây giờ chúng tôi đã có một giới thiệu nhanh chóng về các
khung MVM và MVVM, các dịch vụ góc, và cũng tiêm phụ thuộc,
bây giờ chúng ta hãy 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
dịch vụ góc đầu tiên của chúng tôi và sau đó tiêm nó vào thành phần
của chúng tôi và sử dụng nó trong thành phần.
Để bắt đầu, hãy truy cập ứng dụng của bạn
trong bảng chỉnh sửa trong thư mục Ứng dụng,
tạo một thư mục con mới và đặt tên nó là Dịch vụ.
Bây giờ chúng ta sẽ sử dụng Angular CLI để thêm một dịch vụ mới vào ứng dụng Angular của chúng tôi.
Để làm điều đó, tại loại nhắc ng
tạo ra dịch vụ, và dịch vụ/món ăn.
Vì vậy, điều này sẽ tạo ra một dịch vụ mới trong thư mục Dịch vụ có tên là dịch vụ món ăn.
Vì vậy, một khi điều này được tạo ra, bạn thấy rằng hai tập tin được tạo
ra bởi CLI góc gọi là DishService.Ts và dish.service.specter.t.
Điều này được sử dụng để kiểm tra dịch vụ Angular của chúng tôi trong khi chúng tôi sẽ nói về sau.
Thứ hai là nơi chúng tôi sẽ tạo ra dịch vụ món ăn của chúng tôi và
sau đó tiêm nó vào mô-đun ứng dụng của chúng tôi và sử dụng nó trong thành phần menu của chúng tôi.
Đi đến trình soạn thảo, chúng ta hãy mở tập tin dish.service.ets.
Bây giờ, khi bạn mở tập tin này, bạn ngay lập tức nhận thấy ở đây
tuyên bố đầu tiên có nói, import {Injectable} từ '@angular /core'.
Vì vậy, tiêm này cho phép chúng tôi định nghĩa
trang trí tiêm này cho bất kỳ lớp mà chúng tôi định nghĩa ở đây.
Vì vậy, bạn có thể thấy rằng chúng tôi đang xác định một lớp ở đây được gọi là một DishService.
Bằng cách sử dụng trang trí tiêm này cho dịch vụ món ăn này,
chúng tôi đang làm cho đối tượng này bây giờ tiêm trong ứng dụng của chúng tôi.
Vì vậy, đây là những gì cho phép tiêm phụ thuộc được sử dụng trong
ứng dụng của chúng tôi.
Vì vậy, một khi bạn khai báo các lớp như tiêm,
bây giờ chúng ta hãy cấu hình DishService của chúng tôi để cung cấp một số thông tin cho chúng tôi.
Vì vậy, trong đây, tôi sẽ nhập khẩu,
The Dish class từ thư mục chia sẻ,
và cũng có thể nhập khẩu,
Các DESS hằng số từ,
Chia sẻ thư mục ở đây.
Vì vậy, một khi tôi đã nhập khẩu hai này,
bây giờ dịch vụ của tôi có thể được cấu hình để cung cấp giá trị cho chúng tôi.
Vì vậy, bên trong dịch vụ, tôi sẽ
thêm vào một phương pháp mới gọi getDishes, và
phương pháp này sẽ trở lại trong mảng các món ăn ở đây.
Và, vì vậy phương pháp này sẽ trả về hằng số DESS
mà chúng tôi đã nhập khẩu vào DishService của chúng tôi.
Với điều này, DishService của chúng tôi bây giờ được cấu hình để
cung cấp mảng đối tượng DESS JavaScript cho bất kỳ
phần nào khác của ứng dụng của chúng tôi mà yêu cầu nó.
Bây giờ trước khi điều đó xảy ra, chúng ta cần phải có dịch vụ này và
sau đó tiêm vào ứng dụng của chúng tôi.
Để làm điều đó, chúng tôi sẽ mở tập tin .t mô-đun ứng dụng.
Vì vậy, bên trong các ứng dụng module file .t, ngay sau khi nhập khẩu
các thành phần ngay tại đó, Tôi sẽ nhập khẩu, D
ishService ngay tại đó.
Và điều này được nhập khẩu từ,
Dịch vụ DishService ở đây.
Vì vậy, một khi chúng tôi nhập khẩu mà, sau đó chúng tôi sẽ tuyên bố DishService này như một nhà cung cấp.
Vì vậy, nếu bạn đi vào trang trí mô-đun ng, vì vậy
bạn thấy tài sản thứ ba này ở đây được gọi là nhà cung cấp.
Vì vậy, chúng tôi có tờ khai, nhập khẩu, và các nhà cung cấp.
Vì vậy, bất cứ khi nào bạn có một dịch vụ mà bạn muốn làm cho có sẵn cho
tất cả các thành phần từ một phần của mô-đun này.
Sau đó, bạn sẽ chỉ định rằng như là một nhà cung cấp trong mô-đun ở đây.
Vì vậy, ngay đây, tôi sẽ nói, DishService, đây.
Vì vậy, với điều này, DishService của tôi bây giờ trở nên có sẵn cho phần còn lại của ứng dụng.
Bây giờ, làm thế nào điều này xảy ra?
Các Angular phụ thuộc tiêm nhìn vào thông tin này mà chúng tôi
đã tuyên bố ở đây và sau đó quyết định rằng nó cần phải tạo ra một DishService và
tiêm nó bất cứ nơi nào nó được yêu cầu.
Bây giờ, làm thế nào để chúng ta sử dụng dịch vụ đó?
Chúng tôi thấy rằng trong thành phần menu, chúng tôi đã sớm nhận được
các DESS liên tục trực tiếp bằng cách nhập từ tập tin các món ăn được chia sẻ ở đây.
Bây giờ đây không phải là cách lý tưởng để thu thập thông tin,
thay vì buộc thông tin trực tiếp vào thành phần của
bạn, bạn nên cho một dịch vụ lấy thông tin đó cho bạn.
Sau đó, chúng tôi có thể thiết kế lại dịch vụ của mình để có thể đi và
lấy cùng một thông tin từ một máy chủ back-end nếu bạn yêu cầu.
Thật vậy, đó là những gì chúng tôi sẽ làm trong một số bài tập sau này.
Vì vậy, bạn sẽ ủy thác trách nhiệm của việc lấy thông tin đến dịch vụ
và sau đó bạn sẽ chỉ sử dụng dịch vụ trong thành phần menu này.
Vì vậy, chúng tôi sẽ xóa thành phần món ăn này từ đó và
thay vào đó chúng tôi sẽ nhập khẩu DishService ở đây.
Và DishService này được nhập khẩu từ,
services/dish.service tập tin ở đây.
Vì vậy, sau khi thêm điều này bây giờ chúng tôi đã thực hiện một phần của công việc.
Bây giờ chúng ta cần phải làm cho dịch vụ này có sẵn cho các thành phần của chúng tôi để sử dụng.
Vì vậy, đó là nơi chúng tôi sẽ đi xuống để xây dựng này ở đây.
Trong constructor này, vì vậy
bây giờ bạn thấy việc sử dụng các constructor trong lớp của chúng tôi ở đây.
Vì vậy, trong nhà xây dựng này chúng ta sẽ thấy
riêng DishService và DishService ở đây.
Vì vậy, đây là loại DishService, vì vậy
khi bạn tuyên bố này trong constructor, khi thành phần này được tạo ra,
sau đó DishService này mà bạn đã tiêm vào mô-đun ứng dụng.
Khi bạn tiêm vào mô-đun ứng dụng,
nó sẽ tạo ra một đối tượng DishService duy nhất.
Và đối tượng DishService đó sẽ được cung cấp cho bạn trong
thành phần menu của bạn ở đây.
Vì vậy, bây giờ bạn có thể sau đó kêu gọi các phương pháp mà DishService này cung cấp cho
bạn để thực hiện công việc thay mặt cho bạn.
Vì vậy, một khi bạn đặt nó trong đó,
bây giờ chúng tôi nhận ra rằng chúng tôi không còn có DESS liên tục ở đây.
Vì vậy, tôi cần bằng cách nào đó lấy thông tin này.
Bây giờ đây là nơi tôi sẽ tận dụng dịch vụ mà tôi có sẵn để
lấy thông tin cho chúng tôi.
Chúng ta lấy thông tin này ở đâu?
Vì vậy, đây là nơi chúng ta sẽ có sự giúp đỡ của phương pháp vòng đời này được gọi là
ngonInit.
Vì vậy, khi bạn khai báo phương pháp vòng đời này được gọi là ngonInit trong
ứng dụng của bạn, vì vậy bạn thấy rằng trong lớp học, bạn nói thực hiện onInit.
Vì vậy, việc thực hiện onInit này đòi hỏi bạn phải
thực hiện phương pháp này ngonInit như là một phần của lớp học của bạn ở đây.
Vì vậy, bên trong phương pháp này NgonInit,
bây giờ bạn có thể yêu cầu dịch vụ để lấy thông tin này.
Sao lại thế?
Phương pháp vòng đời này sẽ được thực thi
bởi khung Angular bất cứ khi nào thành phần này được instantiated.
Vì vậy, bất cứ khi nào thành phần này được tạo ra, phương pháp này sẽ được thực hiện.
Vì vậy, khi phương pháp đó được thực hiện, sau đó tại thời điểm đó tôi có thể đi và
lấy các món ăn từ DishService.
Vì vậy, tôi có thể nói DishService, và
sau đó bạn sẽ biết rằng bạn có phương pháp getDishService bên trong DishService.
Bạn có thể gọi phương pháp để lấy các món ăn cho bạn.
Bây giờ khi chúng tôi làm điều này, sau đó các món ăn đối tượng sẽ được cung cấp bởi
các dịch vụ cho chúng tôi thông qua phương pháp GetDishes này.
Và đó có thể được đưa vào các món ăn của chúng tôi biến địa phương mà chúng tôi đã định nghĩa ở đây.
Vì vậy, với điều này, chúng tôi hoàn thành cập nhật
cho tất cả các tệp ứng dụng của chúng tôi.
Chúng ta hãy đi và xem nhanh ứng dụng Angular kết quả.
Chuyển sang trình duyệt, bây giờ bạn có thể thấy rằng trong trình duyệt
ứng dụng Angular hiển thị giống như trước đây.
Trong phiên bản này như bạn đã thấy, thông tin về các món ăn
sẽ được lấy vào thành phần của bạn bằng cách sử dụng dịch vụ.
Dịch vụ lần lượt sẽ lấy thông tin này cho bạn.
Bây giờ tại thời điểm này chúng tôi đang giữ cho dịch vụ rất cơ bản.
Dịch vụ chỉ đơn giản trả về giá trị hằng số này mà chúng ta đã định nghĩa ở đây.
Sau đó, bạn có thể tưởng tượng rằng bạn sẽ mở rộng dịch vụ để đi và
lấy thông tin này từ máy chủ back-end.
Khi điều đó xảy
ra, việc lấy thông tin sẽ không được ngay lập tức nữa.
Đó là nơi chúng tôi sẽ cần sự trợ giúp của lời hứa và
cũng là cách tiếp cận JavaScript phản ứng để hỗ trợ sự chậm trễ này và
đối phó với sự chậm trễ trong việc lấy thông tin trong ứng dụng của chúng tôi.
Chúng ta sẽ nói về điều đó một cách chi tiết hơn trong mô-đun tiếp theo.
Bây giờ, ứng dụng của chúng tôi sẽ chạy tốt, vì vậy bạn có thể chọn bất kỳ một trong
những món ăn đó và thông tin sẽ được hiển thị giống như trước đây.
Với điều này, chúng tôi cạnh tranh bài tập này, nơi chúng tôi tìm hiểu những điều cơ bản về các dịch vụ Angular.
Và chúng tôi cũng đã thấy cách chúng tôi có thể sử dụng dịch vụ Angular,
trong thành phần ứng dụng 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 các dịch vụ cơ bản thông điệp.
[ MUSIC].