Статьи

Создание приложения поиска библиотеки в Angular: библиотечный сервис и маршрутизация

Январь 3, 2019

В одном из моих предыдущих учебных пособий по Angular я рассмотрел основы Angular, начиная с установки CLI, а затем обсуждая, как создавать базовые компоненты и реализовывать маршрутизацию. Прочтите мою статью « Создание вашего первого приложения для Angular: основы» , чтобы узнать, как установить Angular CLI и другие рекомендуемые инструменты для простого создания приложения Angular.

  • угловатый
    Создание вашего первого углового приложения: основы

Приложение для информации о стране, которое мы создали в этой серии, было хорошим для начала работы с Angular, но в нем отсутствовали некоторые функции. Например, мы сохранили информацию, которую мы хотели показать нашим пользователям в массиве. Однако в этом руководстве мы выйдем за пределы небольшого набора данных и позволим пользователям выполнять поиск в базе данных библиотеки, доступной в CDNJS.

Вот приложение, которое мы будем создавать:

Приложение Library Finder в Angular

Во вводном руководстве этой серии я упоминал, что мы будем получать все данные нашей библиотеки с помощью API CDNJS. Я также упомянул, что два компонента в нашем приложении будут использовать данные из возвращенного ответа, чтобы показать пользователю полезную информацию.

  • угловатый
    Создание приложения поиска библиотеки в Angular: Введение

В этом посте мы напишем весь код, необходимый для доступа к информации о различных библиотеках, в одном файле с именем library.service.ts .

Мы создали аналогичный файл в другом учебном пособии под названием « Создайте ваше первое приложение на Angular»: хранение и доступ к данным . В этом случае мы сохранили данные локально внутри массива, а затем написали несколько методов внутри класса обслуживания для доступа к информации из центрального расположения. В этот раз мы будем делать нечто подобное.

Создание класса LibraryService

Все будет немного иначе, чем в прошлый раз, когда мы определили класс обслуживания. В то время данные хранились локально, поэтому мы могли получить к ним мгновенный доступ. На этот раз мы будем получать данные с сервера, поэтому нам нужно импортировать другой набор зависимостей.

Нам также придется изменить методы, которые мы используем для доступа к нашим данным, потому что на этот раз информация не будет доступна сразу. Помня об этом, давайте начнем писать код для LibraryService .

Мы импортируем две зависимости для нашего класса LibraryService . Зависимость Injectable доступная внутри @angular/core , позволит нам внедрить наш класс LibraryService в другие компоненты, которые в этом нуждаются.

Мы также импортируем HttpClient из @angular/component/http . Этот инъекционный класс дает нам доступ к различным методам, которые можно использовать для выполнения HTTP-запросов. Мы будем использовать метод get() из этого класса для извлечения всех данных нашей библиотеки.

Мы определим два метода внутри нашего класса LibraryService которые будут либо получать данные о конкретной библиотеке, либо получать список из нескольких библиотек. Вот полный код:

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()
export class LibraryService {
 
    constructor(private http: HttpClient) {
    }
 
    showLibrary(libraryName) {
        const url = ‘https://api.cdnjs.com/libraries/’ + encodeURI(libraryName);
        return this.http.get(url).toPromise();
    }
 
    searchLibraries(searchTerm) {
        const url = ‘https://api.cdnjs.com/libraries?search=’ + encodeURI(searchTerm) + ‘&fields=version,description’;
        return this.http.get(url).toPromise();
    }
}

Внутри showLibrary() и searchLibraries() мы используем тот же формат для создания нашего URL, который мы обсуждали в предыдущем уроке. Для searchLibraries() мы получаем только версию и описание каждой библиотеки. Для showLibrary() мы не указываем какое-либо конкретное поле, поэтому получаем все, включая ссылку на домашнюю страницу, репозиторий и т. Д.

После этого мы используем метод toPromise() для преобразования Observable возвращаемого методом get() в Promise . Обещания облегчают нам написание асинхронного кода. Как только Обещание выполнено или отклонено, оно даст вам возвращаемое значение, которое можно использовать соответствующим образом. Мы можем использовать метод then() в Promise, чтобы добавить обработчики выполнения и отклонения к нашему обещанию. Это будет рассмотрено в следующем уроке, где мы научимся манипулировать возвращенными данными и покажем их нашим пользователям.

Реализация маршрутизации для нашего приложения

Мы не создали никаких компонентов из нашего приложения поиска библиотеки, но мы все еще знаем, какой компонент должен быть показан когда.

Чтобы написать наш код маршрутизации, мы создадим файл с именем app-routing.module.ts и добавим в него следующий код:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
 
import { HomeComponent } from ‘./home/home.component’;
import { LibraryDetailsComponent } from ‘./library-details/library-details.component’;
import { LibraryListComponent } from ‘./library-list/library-list.component’;
 
const routes: Routes = [
    { path: », redirectTo: ‘/home’, pathMatch: ‘full’ },
    { path: ‘home’, component: HomeComponent },
    { path: ‘detail/:library’, component: LibraryDetailsComponent },
    { path: ‘list/:search’, component: LibraryListComponent }
];
 
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
 
export class AppRoutingModule { }

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

Двоеточие (:), присутствующее в третьем и четвертом путях, используется для обозначения того, что и library и search являются заполнителями для более конкретных имен библиотек и условий поиска. Таким образом, мы можем избежать определения новых путей для каждой библиотеки и просто использовать общий путь, из которого мы можем легко извлечь имя библиотеки или условия поиска.

Обновление файла app.module.ts

После создания нашего класса LibraryService и реализации логики маршрутизации все, что нам нужно сделать, это обновить файл app.module.ts . Этот файл используется Angular для создания и загрузки нашего приложения. Если вы откроете этот файл, вы заметите, что он не пустой. Angular уже импортировал некоторые зависимости, которые нам нужны для создания нашего приложения. Angular также обновит это приложение позже, когда мы создадим наши собственные компоненты с помощью Angular CLI. Пока поместите следующий код в файл app.module.ts .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { BrowserModule } from ‘@angular/platform-browser’;
import { HttpClientModule } from ‘@angular/common/http’;
import { NgModule } from ‘@angular/core’;
 
 
import { AppComponent } from ‘./app.component’;
 
import { LibraryService } from ‘./library.service’;
import { AppRoutingModule } from ‘./app-routing.module’;
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [LibraryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Вам необходимо импортировать BrowserModule для каждого приложения Angular, которое будет работать в браузере. Импорт HttpClientModule дает нам доступ к HttpClient и другим связанным службам, которые мы использовали в нашем классе LibraryService для получения информации о различных библиотеках. Angular уже импортировал для нас класс AppComponent . Теперь нам просто нужно импортировать наш класс LibraryService и AppRoutingModule которые мы определили в предыдущем разделе.

После импорта необходимых зависимостей мы используем декоратор @NgModule который принимает объект метаданных, чтобы сообщить Angular, как скомпилировать и запустить наше приложение.

Массив declarations используется для указания всех классов компонентов, которые понадобятся нашему приложению. Попытка использовать компонент без предварительного перечисления здесь приведет к ошибке. Прямо сейчас, массив declarations содержит только один класс. Как только мы создадим больше компонентов, используя Angular CLI, они будут автоматически добавлены в этот список.

Массив import используется для указания всех модулей, которые нужны нашему приложению. Вы должны только добавить классы NgModule внутри массива NgModule . В нашем случае это классы BrowserModule , HttpClientModule и AppRoutingModule .

Вы используете массив providers чтобы сообщить инжектору зависимостей о различных сервисах, которые понадобятся нашему приложению. В этом случае мы только добавляем класс LibraryService в массив наших providers .

Последние мысли

В этом уроке мы создали три разных файла. Library.service.ts используется для определения класса LibraryService с различными методами для получения данных о различных библиотеках. Файл app-routing.module.ts используется для хранения логики маршрутизации нашего приложения. Мы храним информацию о различных путях и соответствующих компонентах, которые необходимо загрузить для каждого пути в массиве routes . Наконец, мы обновили файл app.module.ts, включив в него класс LibraryService и AppRoutingModule доступные для всего приложения.

В следующем уроке вы создадите HomeComponent для нашего приложения Angular, чтобы пользователи могли указать поисковый запрос или имя библиотеки. Если есть что-то, что вы хотели бы, чтобы я разъяснил в этом уроке, дайте мне знать в комментариях.

36
Share: