В этом упражнении мы будем использовать Угловой HTTP-клиент для
общаться с сервером JSON, который мы уже установили в предыдущем упражнении.
Теперь мы сможем скачать данные с сервера в наше угловое приложение с помощью
клиента HTTP, а затем использовать данные для того, чтобы
построить различные представления в наших компонентах.
В этом упражнении мы собираемся перенастроить службу блюд, чтобы иметь возможность
идти и получать данные о блюдах с сервера JSON.
В рамках вашего задания
вы завершите оставшиеся два,
сервис лидера и сервис продвижения.
Мы посмотрим, как мы можем использовать HTTP-клиент, который вернет наблюдаемый нам.
Мы уже перенастроили наше приложение,
особенно сервис, чтобы иметь возможность доставлять наблюдаемые к нашим компонентам.
В рамках наших компонентов мы подписываемся на эти наблюдаемые.
Итак, основная часть настройки
для получения данных от сервиса к компоненту уже есть.
Мы немного улучшим его, чтобы справиться с ошибками в следующем упражнении.
Наш первый шаг в подготовке углового приложения для использования
клиента HTTP для доступа к серверу является
настроить наше приложение с HTTPClientModule.
Итак, чтобы сделать это, откройте app.module.ts.
Тогда, здесь, давайте импортировать
HTTPClientModule из угловой/общего/HTTP.
После того, как мы импортируем это,
, то мы будем идти вперед и настроить декоратор NgModule
в импорте с HTTPClientModule.
Теперь наше приложение готово использовать HTTPClientModule для доступа к серверу.
Теперь убедитесь, что сервер JSON работает и
обслуживает данные, чтобы наше приложение могло
взаимодействовать с серверным приложением JSON.
Теперь, когда мы получаем доступ к данным со стороны сервера,
это хорошая практика, чтобы создать специальное значение, которое указывает на
baseURL вашего сервера, так что
, что он может быть настроен в вашем угловом приложении по мере необходимости.
Итак, перейдя в общую папку,
я собираюсь создать здесь новый файл с именем baseurl.ts.
Затем, в этом файле,
я буду включать константу и экспортировать ее и константу с именем baseURL,
, который я установлю в HTTP: //localhost:3000.
Итак, как вы помните, это baseURL, на котором доступен мой сервер JSON.
Итак, локальный: 3000/, там.
Итак, с этим
позвольте мне сохранить изменения в baseURL.
Теперь угловой предоставляет способ предоставления значений, таких как
, для остальной части вашего приложения, настраивая поставщика в вашем модуле приложения.
Итак, перейдя к модулю приложения
, чтобы позволить нам предоставить этот конкретный baseURL,
мы собираемся сначала импортировать значение baseURL в наше угловое приложение.
Итак, я бы сказал, что импортируйте baseURL из shared/baseurl.
Это значение теперь может быть доступно
остальной части моего приложения, перейдя к поставщикам.
Затем, в дополнение к LeaderService,
, если я настрою такое значение,
я бы сказал предоставить
, а затем baseURL, useValue.
Таким образом, я буду предоставлять это значение baseURL как
поставщика значений из модуля приложения в остальную часть моего углового приложения.
На следующем шаге
мы собираемся настроить наш DishService, чтобы позволить ему получить доступ на стороне сервера,
, а затем получить данные со стороны сервера,
, а затем сделать данные доступными для наших компонентов.
Теперь мы пойдем в DishService.
Тогда, в DishService,
эти блюда больше не нужны из локального файла там.
Я собираюсь загрузить эти данные со стороны сервера.
Итак, я собираюсь удалить это, а затем добавить в импорт
HTTPClient из углового,
каждый общий HTTP,
импортировать baseURL из,
вспомнить, что это в shared/baseurl.
Теперь, в рамках моего DishService,
я собираюсь пойти и получить данные со стороны сервера.
Итак, в конструкторе
я собираюсь обновить конструктор путем
, введя HTTPClient в мой конструктор здесь.
Итак, теперь мой DishService должен быть настроен на
получить данные со стороны сервера и вернуть данные в мое приложение.
Теперь вы заметите, что
метод getDishes уже настроен для возврата наблюдаемого компоненту.
Итак, эта часть уже настроена.
Теперь, что это собирается вернуть, это то, что он получает от
метод HTTP get
, который мы будем называть стороне сервера.
Итак, для того, чтобы вызвать серверную сторону,
мне придется поставлять,
в рамках метода get,
baseURL, который у меня есть
уже получены, а затем блюда.
Итак, таким образом, метод HTTP get будет получать данные от localhost: 3000/dists.
Итак, это URL-адрес на стороне сервера от
, который вы можете получить данные о блюдах здесь. Вот оно.
Мой сервер будет предоставлять данные в виде
наблюдаемого для этой службы при вызове метода HTTP get,
и который будет возвращен компоненту через метод getDishes.
Вот об этом. Теперь моя служба настроена на то, чтобы пойти и
извлекать данные со стороны сервера, а затем возвращать данные моему компоненту.
Я собираюсь обновить оставшиеся методы также аналогичным образом.
Итак, что я сделаю для следующего метода для метода getDish,
Я собираюсь скопировать
эту часть, а затем просто вставить ее на место здесь,
, а затем мы отредактируем это.
Теперь, когда вам нужно получить за конкретное блюдо,
у вас есть ID блюда, которое вам доступно.
Итак, мы скажем, getDish ID доступен в качестве параметра.
Итак, к посуде
я собираюсь добавить ID в качестве другого параметра здесь.
Теперь, когда я получаю ответ, а затем возвращаю
его компоненту через вызов метода getDish.
Аналогично, для избранного блюда
это будет немного интересный способ его настройки.
Теперь, для избранного блюда,
, когда вам нужно получить доступ к данным со стороны сервера,
то, что я собираюсь сделать, это, теперь,
, когда я спрашиваю о блюде, теперь,
способ настройки моей серверной стороны заключается в том, что я могу отправить
параметр запроса в моем URL, чтобы я мог сказать блюда?
, а затем сказать, что признакам равным true.
Таким образом, мой сервер вернет
только те объекты, для которых флаг выставлен в значение true,
или finatures-свойство установлено в true на стороне сервера.
Теперь, вот как настроена серверная сторона.
Теперь, снова, как только вы получите данные,
, то вы просто сопоставите значение, а затем возвращаете это как
наблюдаемый к моему компоненту через метод get featuring блюдо.
Когда я запрашиваю серверную сторону, используя параметр запроса,
он собирается вернуть массив объектов, которые соответствуют.
В этом случае так получилось, что массив будет содержать ровно один элемент.
Но когда я возвращаю значение после получения результата,
мне нужно также включить нуль там, потому что это массив,
, поэтому мне нужно вернуть первый элемент из массива.
Прежде чем я забуду, позвольте мне импортировать
оператор карты из операторов rxjs.
Теперь, для последнего, getDishIds,
то, что я собираюсь сделать, это использовать тот факт, что у меня уже
есть метод getDishIds, доступный мне.
Итак, когда метод getDishes возвращается,
я собираюсь сопоставить это с оператором карты
как dishes.map, dish.dish id.
Таким образом, я возвращаю только значение, которое мне нужно,
просто идентификаторы блюда через этот метод здесь.
Вот об этом.
Теперь моя служба блюдо полностью обновлена, чтобы пойти и получить данные с сайта
сервера, а затем предоставить данные моим компонентам в моем.
Угловое применение здесь.
На следующем шаге
я собираюсь перейти в компонент меню.
Затем в компоненте меню
я собираюсь использовать интерфейс ввода, который доступен через
угловое ядро, чтобы ввести этот BaseURL, который я получил там.
Итак, как нам это использовать?
В конструкторе моего компонента
я зайду и скажу:
"@Inject" Итак, помните, что мы создали
этот BaseURL в качестве поставщика для этого значения в модуле приложения ранее.
Итак, что BaseURL теперь может быть введен в компонент, как это здесь.
Теперь, когда у вас есть услуга,
вы вводите такие услуги здесь,
, но когда у вас есть значение,
, то вы вводите значение с помощью декоратора "@Inject".
Здесь мы указываем значение поставщика, которое мы указали там.
Мы сказали, предоставить:BaseURL там,
так что это значение, которое мы предоставляем здесь.
Затем я объявляю это как частный BaseURL.
Итак, теперь, в моем коде здесь,
этот BaseURL доступен для настройки того, что мне нужно в моем приложении здесь.
Пока я все еще здесь,
я собираюсь удалить это выбранное блюдо, которое также не используется в моем приложении.
Тогда этот метод также я не использую с моим приложением,
, поэтому позвольте мне немного очистить, пока я все еще здесь.
То, как мы обрабатываем данные, которые мы получили
от сервиса, останется точно таким же.
Поскольку моя служба все еще возвращается и наблюдается,
, и я подписываюсь на наблюдаемый внутри этого компонента.
Итак, эта часть вообще не меняется.
Теперь причина, по которой я впрыскиваю BaseURL в свой компонент, заключается в том, что
в моем шаблоне здесь,
я получаю изображение блюда здесь.
Теперь, но это изображение блюда нужно получить с моего сервера там,
с сервера JSON там.
Итак, мне нужно войти, а затем обновить этот источник, чтобы сказать
BaseURL плюс изображение блюда.
Итак, мне нужно предоставить полный URL-адрес для этого изображения.
Итак, это должно быть, httlp://локальный: 3000/images/, что угодно.
Итак, вот почему мне нужно указать
значение BaseURL в дополнение к изображению блюда здесь.
Итак, это я собираюсь заключить в кавычки,
, так что выражение, подобное этому внутри интерполяции, будет работать правильно.
Итак, заключите это в кавычки, а затем укажите, что в качестве исходного значения
, а затем здесь вы видите, что вы используете BaseURL плюс изображение блюда,
dish.image, свойство изображения содержит только частичный URL-адрес.
Таким образом, он содержит изображения косой черты и имя файла image.png.
Итак, вот почему мне нужно добавить http://localhost:3000/,
к этому свойству изображения блюда, чтобы я построил общий URL-адрес для моего изображения.
Таким образом, с этим мой компонент меню теперь полностью настроен
для получения всех данных со стороны сервера.
Теперь, аналогичным образом, я бы предложил вам обновить
компонент детали блюда, а также домашний компонент.
Перейдя к компоненту детали блюда,
использовать инъекцию там,
, а затем перейти к конструктору,
в конструкторе, теперь мне нужно использовать
инъект BaseURL и BaseURL там,
и так, мой компонент детализации блюда теперь настроен для получения данных из сервисного блюда.
Таким образом, эта часть больше не изменится,
она остается точно такой же, потому что моя блюдо просто
возвращает наблюдаемый, и я подписываюсь на это наблюдаемое здесь.
Мне также нужно обновить файл шаблона компонентов блюдо,
так же, идя к источнику изображения здесь,
Я бы добавил BaseURL плюс изображение блюда, а затем поместил это в цитаты там.
Точно так же, идя на домашний компонент, то же самое.
Я собираюсь сделать инъекцию,
и в конструкторе
Я делаю инъекцию BaseURL,
и перехожу в файл шаблона домашних компонентов,
аналогично, где я использую изображение блюда здесь,
, поэтому я собираюсь сказать, BaseURL плюс изображение блюда,
, а затем заключать его в кавычки здесь,
и сохраните изменения.
Так вот и все. Мое приложение теперь обновлено, чтобы использовать
сервер для получения данных для посуды.
Итак, пойдем и посмотрим приложение в браузере.
Перейдя в браузер,
теперь вы можете видеть, что в моем браузере,
мое блюдо визуализируется точно так же, как и раньше,
а затем переходить к компоненту меню,
вы видите, что меню отображается точно так же, как и раньше, и деталь блюда компонента,
также детали блюда отображаются точно так же, как и раньше.
Таким образом, с изменением, которое мы внесли путем доступа к данным со стороны сервера,
мы можем получить данные со стороны сервера, а затем
рендеринг данных в нашем угловом приложении.
Чтобы убедить вас в том, что данные на самом деле получены с моего сервера JSON,
пойдем к терминалу, а затем увидим журнал в окне терминала.
Переходя к терминалу, где работает мой сервер JSON,
вы можете видеть, что я фактически выполнил кучу запросов Git
с моего сайта сервера, чтобы получить все данные, которые мне нужны в моем приложении.
Итак, действительно мое приложение Angular теперь извлекает все данные из
сайта сервера для всех блюд в моем угловом приложении.
Теперь вы можете использовать тот же подход, чтобы также обновить
последнюю услугу, а также службу продвижения,
, но мы отложим это до окончательного задания в этом курсе,
, но это может завершить это упражнение.
В этом упражнении мы узнали, как сделать
использовать HTTP-клиент для получения данных от
сайта сервера, а затем использовать данные при построении
представлений в рамках компонентов нашего углового приложения.
Это хорошее время для вас, чтобы сделать фиксацию Git с сообщением HTTP часть первая.