Статьи

Пример клиентского модуля Angular Http

Октябрь 20, 2018

Приветствую читателей, в этом руководстве мы узнаем о клиентском модуле Http для взаимодействия с остальными конечными точками

1. Введение

В 2K17 платформа Angular 6 представила клиентский модуль Http для извлечения данных из остальных конечных точек. Этот модуль,

  • Позволяет разработчикам отправлять HTTP-запросы или выполнять вызовы API на внешние серверы
  • Заменяет старый Http-клиент и доступен в пакете @angular/common/http
  • Аннотация к интерфейсу XMLHttpRequest и предоставляет новые функции, такие как — перехватчики запросов и ответов, Observables, улучшенная поддержка тестирования, обработка ошибок и т. Д.

Теперь откройте код Visual Studio и давайте посмотрим, как реализовать этот учебник в угловых 6 фреймворках.

2. Пример клиентского модуля Angular Http

Вот систематическое руководство для реализации этого учебника.

2.1 Используемые инструменты

Мы используем код Visual Studio и Node Terminal для компиляции и выполнения углового кода в браузере.

2.2 Структура проекта

Если вы не знаете, где создавать соответствующие файлы или папки, давайте рассмотрим структуру проекта углового приложения.

Клиентский модуль Angular Http - Структура приложения
Рис. 1: Структура приложения

3. Создание приложения Angular

Запустите команду ng new angular-httpclient-tutorial в консоли npm, чтобы создать новый угловой проект. После создания нового проекта выполните следующие шаги.

3.1 Импорт модуля Http Client

Для начала работы нам нужно импортировать модуль src/app/app.module.ts файл src/app/app.module.ts .

app.module.ts

1
2
3
4
5
6
7
// Injecting http client module in the angular application.
import { HttpClientModule } from '@angular/common/http';
 
// Declaring the http client module in the imports section of NgModule decorator.
imports: [
    BrowserModule, HttpClientModule
  ],

3.2 Создание сервиса

Чтобы начать использовать клиентский модуль Http в нашем приложении, нам нужно создать сервис. Запустите команду ng gs service/newsservice в консоли npm, чтобы создать службу новостей. Этот сервис,

  • Будет использовать HttpClient для отправки HTTP-запросов
  • Будет введен в наше приложение для выполнения операций HTTP

Обратите внимание, пользователям необходимо сгенерировать новый токен для обслуживания запросов от newsapi.org!

newsservice.service.ts

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
 
export class NewsserviceService {
 
  constructor(private _http: HttpClient) { }
 
  // Service method to fetch the top news headlines.
  getHeadlines() {
    console.log('Fetching top headlines from the server.');
     
    let apitoken = "72eb33ec969544a0af14de32981747cc";
    return this._http.get("https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=" + apitoken);
  }
}

3.3 Создание модели

Чтобы начать использовать Http-клиент, мы добавим сервис новостей в нашу компонентную модель.

app.component.ts

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Component } from '@angular/core';
import { NewsserviceService } from './service/newsservice.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
   
  title = 'Angular HttpClient Tutorial';
 
  // Variable to store the response for the news headline.
  news: any;
 
  constructor(private _serv: NewsserviceService) {}
 
  // Angular method to fetch the news headlines.
  getNews() {
    this._serv.getHeadlines().subscribe(res => {
      this.news = res;
    });
  }
}

3.4 Создание компонента

Чтобы просмотреть данные, извлеченные из сервиса, нам нужно обновить представление HTML, где мы будем отображать массив новостей.

app.component.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
 
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
 
<body>
  <!--The content below is only a placeholder and can be replaced.-->
  <div class="container">
    <h2 class="text-info text-center">{{ title }}!</h2>
    <hr />
 
    <div id="submit_btn">
      <button type="button" class="btn btn-outline-primary" (click)="getNews();">Get News</button>
    </div>
    <div> </div>
 
    <div *ngIf="news">
      <table id="table" class="table table-bordered">
        <thead>
          <th>#</th>
          <th>Source</th>
          <th>Title</th>
          <th>Description</th>
          <th>Author</th>
          <th>Time</th>
        </thead>
        <tbody>
          <tr *ngFor="let a of news.articles; let i=index">
            <td>{{i+1}}</td>
            <td>{{a.source.name}}</td>
            <td>{{a.title}}</td>
            <td>{{a.description}}</td>
            <td>{{a.author | titlecase}}</td>
            <td>{{a.publishedAt | date:'medium'}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
 
</html>

4. Запустите приложение

Поскольку мы готовы со всеми изменениями, давайте скомпилируем и запустим угловое приложение с помощью команды ng serve . После успешной компиляции и развертывания проектов откройте браузер, чтобы протестировать его.

5. Демонстрация проекта

Откройте ваш любимый браузер и нажмите угловой URL-адрес приложения ( http://localhost:4200/ ), чтобы отобразить страницу индекса приложения.

Клиентский модуль Angular Http - страница приветствия
Рис. 2: Страница приветствия

Пользователи могут нажать кнопку, чтобы получить заголовки главных новостей, как показано на рис. 3.

Клиентский модуль Angular Http - Заголовки новостей
Рис. 3: Заголовки новостей

Это все для этого урока, и я надеюсь, что статья послужила вам тем, на что вы рассчитывали. Удачного обучения и не забудьте поделиться!

6. Заключение

В этом разделе мы узнали, как создать простое приложение Http Client Module. Разработчики могут загрузить образец приложения в виде проекта Eclipse в разделе « Загрузки ».

7. Скачать проект Eclipse

Это было учебное пособие по Http Client Module в угловой структуре.

Скачать
Вы можете скачать полный исходный код этого примера здесь: Пример клиентского модуля Angular Http
37
Share: