Добавление функции поиска в веб-приложение является распространенным требованием, а InstantSearch от Algolia — мощный инструмент, упрощающий этот процесс. В этой статье мы рассмотрим различные способы установки InstantSearch Algolia в существующий проект Angular. Мы предоставим пошаговые инструкции вместе с примерами кода, которые помогут вам легко интегрировать InstantSearch Algolia в ваше приложение Angular.

Метод 1: установка InstantSearch Algolia через npm

1. Откройте терминал и перейдите в корневой каталог проекта Angular.
2. Выполните следующую команду, чтобы установить пакет Algolia InstantSearch:

npm install algoliasearch angular-instantsearch

3. После завершения установки импортируйте необходимые модули в файл модуля Angular (например, app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { InstantSearchModule } from 'angular-instantsearch';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, InstantSearchModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Теперь вы можете использовать компоненты InstantSearch Algolia в своем приложении Angular. Например, в файл app.comComponent.html вы можете добавить следующий код:

<ais-instantsearch>
  <ais-search-box></ais-search-box>
  <ais-hits></ais-hits>
</ais-instantsearch>

5. Запустите приложение Angular, и вы увидите окно поиска и результаты поиска, полученные с помощью InstantSearch от Algolia.

Метод 2: использование тегов скрипта

1. Откройте проект Angular и перейдите к файлу index.html, расположенному в каталоге src.
2. Добавьте следующие теги скрипта внутри тега head:

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>

3. В файл компонента Angular (например, app.comComponent.ts) импортируйте необходимые модули:

import { Component, OnInit } from '@angular/core';
declare const instantsearch: any;

4. В методе ngOnInit вашего компонента инициализируйте InstantSearch Algolia:

ngOnInit() {
  const search = instantsearch({
    indexName: 'your_index_name',
    searchClient: algoliasearch('your_app_id', 'your_api_key')
  });
  search.addWidget(
    instantsearch.widgets.searchBox({
      container: '#search-box',
      placeholder: 'Search...'
    })
  );
  search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits',
      templates: {
        item: '<div>{{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}</div>'
      }
    })
  );
  search.start();
}

5. В файле app.comComponent.html добавьте следующие элементы HTML:

<div id="search-box"></div>
<div id="hits"></div>

6. Запустите приложение Angular, и вы увидите окно поиска и результаты поиска, полученные с помощью InstantSearch от Algolia.