Как создать приложение новостей с помощью Ionic 4 & Angular

Получение новостей

Давайте теперь посмотрим, как вы можете получать данные новостей из стороннего API новостей, доступного на NewsAPI.org/ , который предлагает бесплатный план для проектов с открытым исходным кодом и проектов разработки.

Сначала вам нужно пройти сюда, чтобы зарегистрироваться для получения ключа API:

Заполните форму и отправьте ее. Вы должны быть перенаправлены на страницу, где вы можете скопировать свой ключ API:

Добавление сервиса

Далее, давайте создадим сервис, который позаботится о получении данных из API новостей. В вашем терминале выполните следующую команду:

 $ ionic generate service api 

Затем откройте файл src/app/app.module.ts затем импортируйте HttpClientModule и добавьте его в массив imports :

 // [...] import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ // [...] HttpClientModule, ], // [...] }) export class AppModule {} 

Затем откройте файл src/app/api.service.ts и введите HttpClient через конструктор службы:

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ApiService { constructor(private httpClient: HttpClient) { } } 

Затем определите переменную API_KEY которая будет содержать ваш ключ API от News API:

 export class ApiService { API_KEY = 'YOUR_API_KEY'; 

Наконец, добавьте метод, который отправляет запрос GET конечной точке для новостей TechCrunch:

  getNews(){ return this.httpClient.get(`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`); } 

Это все, что нам нужно добавить для сервиса.

Откройте файл src/app/home/home.page.ts и импортируйте, затем ApiService через конструктор компонента:

 import { Component } from '@angular/core'; import { ApiService } from '../api.service'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(private apiService: ApiService){} } 

Затем добавьте переменную статей, которая будет содержать полученные новости:

 export class HomePage { articles; 

Добавьте метод ionViewDidEnter() , где вы вызываете метод getNews() ApiService для получения новостей:

  ionViewDidEnter(){ this.apiService.getNews().subscribe((data)=>{ console.log(data); this.articles = data['articles']; }); } 

Наконец, давайте пройдемся по переменной article и отобразим новости на нашей домашней странице.

Снова откройте файл src/app/home/home.page.html и добавьте следующий код:

  <ion-card *ngFor="let article of articles"> <ion-img src="{{article.urlToImage}}"></ion-img> <ion-card-header> <ion-card-subtitle>{{article.title}}</ion-card-subtitle> </ion-card-header> <ion-card-content> <p> {{article.description}} </p> <ion-button ion-button fill="outline" href="{{article.url}}" large>Read full article</ion-button> </ion-card-content> </ion-card> 

Мы просто используем директиву ngFor для циклического ngFor переменных ngFor и отображения изображения, заголовка, описания и URL каждой статьи внутри карточного компонента.

Это скриншот результата:

Вы можете разместить это приложение в Интернете (как PWA) или создать его и опубликовать в магазинах приложений . Вы можете найти живую версию по этой ссылке и исходный код в этом репозитории GitHub .

Вывод

Мы создали новостное приложение с нуля с Ionic 4 и Angular. Приложение по-прежнему имеет много возможностей для улучшения, так что не стесняйтесь играть с ним и расширять его самостоятельно. Например, вы можете добавить источники, отличные от TechCrunch, и позволить пользователю выбрать источник новостей.