Краткое руководство по началу работы — легко
Предпосылки
- Нодейс: https://nodejs.org/en/
- Угловой интерфейс командной строки: https://angular.io/cli
1. Создайте новый проект Angular
Давайте создадим новое приложение Angular с помощью команды ng new:
ng new angular-graphql-app
2. Установите библиотеку apollo-angular с помощью Angular Schematics.
После создания приложения мы установим библиотеку под названием Apollo Angular. Это отличный клиент GraphQL для создания компонентов пользовательского интерфейса, которые извлекают данные с помощью GraphQL.
Библиотека поддерживает команду ng add. Просто запустите следующую команду, чтобы установить его:
ng add apollo-angular
Вам будет предложено указать URL-адрес вашего сервера Graphql. В этом примере мы будем использовать API стран, замечательную общедоступную конечную точку для получения информации о странах, континентах и языках.
Проверьте это здесь: https://countries.trevorblades.com.
Как вы можете видеть на изображении выше, команда создаст новый модуль с именем graphql.module.ts и автоматически обновит все остальные файлы с необходимой конфигурацией и импортом для вас.
Файл graphql.module.ts будет выглядеть примерно так:
3. Создайте модели
Теперь мы создадим две простые модели, одну для Country и одну для Continent. Эти два объекта будут хранить наши данные из API позже.
4. Создайте сервис новых стран
После создания наших моделей следующим шагом будет создание CountriesService, которое все классы приложений смогут использовать для получения стран. Мы будем использовать внедрение зависимостей, которое поддерживает Angular, чтобы внедрить его в конструктор CountriesComponent позже.
Вы можете создать новую службу Angular с помощью CLI, используя следующую команду:
ng g service countries
Теперь откройте сгенерированный файл countries.service.ts и вставьте следующий код:
Фактический запрос graphql находится в константе страны, которую мы объявили в начале класса. мы получим имя, столицу, валюту, смайлики, телефон и название континента. Затем мы передаем его параметру queryметода watchQuery.
Метод watchQuery возвращает объект QueryRef, который имеет свойство valueChanges, равное Observable. Этот наблюдаемый объект содержит фактический результат в поле data.
5. Создайте компонент «Новые страны»
Теперь давайте создадим новый компонент, используя следующую команду:
ng g c countries
Не забудьте добавить селектор в файл app.component.html.
Откройте файл countries.component.ts и вставьте следующий код:
displayedColumns: имя столбца, которое будет отображаться в таблице данных.dataSource$: наблюдаемая содержит страны, которые мы получили с сервера ранее. Мы вызываемgetCountries()изcountriesService, который вводится в конструктор компонента.
6. Добавляем угловой материал
Эта часть не является обязательной. не стесняйтесь использовать любую библиотеку пользовательского интерфейса, которую вы хотите. Мы будем использовать компонент данных Angular material для отображения данных в этом примере.
Введите следующую команду, чтобы добавить библиотеку в свой проект:
ng add @angular/materialЧтобы это работало, нам нужно импортировать MatTableModule, MatPaginatorModule и MatSortModule в app.module.ts следующим образом:
7. Отображение стран в таблице данных
Последним шагом является отображение названия столбцов и извлеченных данных из стран, наблюдаемых в таблице данных.
Откройте файл countries.component.ts и вставьте следующий код:
Результат
Подведение итогов
Это простое руководство научило нас, как быстро настроить graphql в приложении Angular. Схемы Angular упрощают установку и настройку зависимостей и экономят время по сравнению с выполнением всего самостоятельно.
С библиотекой apollo-angular можно исследовать гораздо больше, поэтому не стесняйтесь проверять документы здесь: https://apollo-angular.com/
Спасибо за прочтение и увидимся в следующем😉.
