RxJS и Angular: зачем и как использовать

Реактивные расширения для JavaScript или RxJS — это библиотека JavaScript, которая использует наблюдаемые объекты для реактивного программирования. Его можно использовать с другими библиотеками и фреймворками JavaScript, и он хорошо интегрируется в Angular. Сегодня мы обсудим RxJS и Angular, преимущества использования RxJS в Angular и способы их совместного использования.

Содержание

Что такое RxJS?
Плюсы и минусы RxJS
Что такое Angular?
RxJS в Angular
1. Создайте новый проект.
2. Стиль с помощью CSS
3. Импортируйте реактивные формы
4. Создайте новый компонент
5. Создайте телефонный ввод
6. Создайте FormControl
7. Подтвердите формы
8. Отображение сообщений об ошибках
Подведение итогов и следующие шаги

Что такое RxJS?

Реактивная парадигма может использоваться во многих разных языках за счет использования реактивных библиотек. Эти библиотеки представляют собой загружаемые API-интерфейсы, которые предоставляют функциональные возможности для реактивных инструментов, таких как наблюдатели и операторы. Реактивные расширения для JavaScript или RxJS — это реактивная библиотека, используемая для реализации реактивного программирования для работы с асинхронной реализацией, обратными вызовами и программами на основе событий. Его можно использовать в вашем браузере или с Node.js.

RxJS имеет несколько основных функций, которые помогают обрабатывать асинхронную реализацию:

Наблюдаемый

Наблюдаемые RxJS позволяют публиковать события. У Observables есть два метода: подписаться и отказаться от подписки. Вы выполняете наблюдаемый объект, подписавшись на него. Наблюдаемые моделируют поток событий.

Наблюдатель

Наблюдатель является объектом с next(), error()и complete()методами, которые называют, когда есть взаимодействие с наблюдаемым. Это объекты, которые подписываются на наблюдаемые.

Подписка

Подписка на наблюдаемое вызовет выполнение наблюдаемого.

Оператор

Оператор — это функция, которая позволяет нам выполнять определенные действия с событиями, выполняемыми наблюдаемыми объектами.

Предмет

Тема такая же, как EventEmitter. Это наблюдаемое, которое многоадресно передает информацию наблюдателям.

Планировщик

Планировщик обрабатывает выполнение подписок.

Библиотека RxJS отлично подходит для обработки асинхронных задач. В нем есть большой набор операторов для фильтрации, обработки ошибок, условных операций, создания, многоадресной рассылки и т. Д. Он поддерживается JavaScript и TypeScript и хорошо работает с Angular.

Плюсы и минусы RxJS

Плюсы

RxJS — мощный и популярный инструмент, который продолжает расти. У него более 2 миллионов зависимых репозиториев на GitHub и более 22 миллионов еженедельных загрузок из NPM. Давайте рассмотрим некоторые из причин, по которым он так популярен:

Гибкость: его можно использовать с другими библиотеками и фреймворками JavaScript.
Отличный API: с помощью RxJS вы можете упростить рабочий процесс с помощью асинхронных потоков данных и сэкономить время.
Оптимизировано: многие разработчики протестировали и улучшили его.
Расширяемость: он предназначен для добавления новых функций.
Самодостаточный: RxJS не имеет сторонних зависимостей.
Полезное сообщество: члены сообщества RxJS помогают друг другу решать проблемы и отвечать на вопросы.

Минусы

Как и у любого другого инструмента, у RxJS есть несколько недостатков. Давайте посмотрим на них:

Отладка: отладить код с помощью наблюдаемых не всегда просто.
Неизменяемость данных: реактивное программирование лучше всего работает в сочетании с функциональным программированием.
Зависимость tslib: единственная зависимость, которую имеет RxJS, — это tslib. Детали внутренней реализации не всегда ограничены, что означает, что вы можете увидеть некорректное использование модификаторов доступа.

Что такое Angular?

Angular — это фреймворк веб-приложений, построенный на TypeScript. Он используется многими разработчиками внешнего интерфейса для создания одностраничных клиентских приложений с использованием TypeScript и HTML. Есть много приложений Angular. Некоторые популярные приложения Angular включают Gmail, Xbox, Upwork и PayPal.

Фреймворк Angular состоит из нескольких основных компонентов. Давайте посмотрим на них:

Составные части

Компоненты Angular — это основные строительные блоки пользовательского интерфейса приложения Angular. Каждый компонент имеет:

шаблон HTML, объявляющий, что отображается на странице
класс TypeScript, определяющий его поведение
селектор CSS, определяющий, как использовать компонент в шаблоне

Шаблоны

Шаблоны используются компонентами. Они объявляют, как компоненты отображаются на странице. Директивы позволяют добавлять в шаблоны дополнительные функции. Директивы могут делать многое, например, позволять изменять структуру DOM. Самые популярные из них — ngforи ngif.

Внедрение зависимости

Внедрение зависимостей не является необходимостью при работе с Angular, но считается лучшей практикой. Это позволяет вам объявлять зависимости ваших классов, позволяя Angular позаботиться о создании экземпляра.

Библиотеки

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

Угловой маршрутизатор
Угловой HttpClient
Угловые формы
Угловой PWA
И т.п.

RxJS в Angular

Давайте посмотрим, как RxJS может работать в Angular. Мы собираемся создать поле ввода номера телефона.

Давайте начнем!

1. Создайте новый проект.

Прежде чем мы начнем, давайте установим Angular CLI, используя npm install -g @angular/cli. По завершении мы можем приступить к работе над нашим приложением.

Запустите ng new rx-phone —routingв каталоге, в котором вы хотите создать приложение.

Вы также запустите ng serveв корне своего проекта, чтобы запустить сервер для поля ввода номера телефона.

Примечание. newКоманда создает новое приложение Angular. —routingПараметр указывает ngдобавить в наблюдаемом питанием маршрутизации для приложения.

2. Стиль с помощью CSS

Приложение, которое мы хотим создать, использует CSS Bootsrap для визуальной привлекательности. Начнем с открытия index.html. Затем давайте внесем CSS и добавимв файл следующий тег :

<!— Bootstrap (loaded from local server) —>

<link rel=»stylesheet» href=»http://localhost:3000/assets/bootstrap.min.css»>

Вы увидите HTML-заполнитель в формате app.component.html. Удалите его и добавьте на его место:

<div class=»container»>

<router-outlet></router-outlet>

</div>

3. Импортируйте реактивные формы

Поскольку реактивные формы не включены в Angular, нам нужно импортировать их на уровне приложения.

Вот как должен выглядеть наш код:

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { AppRoutingModule } from ‘./app-routing.module’;

import { AppComponent } from ‘./app.component’;

import { ReactiveFormsModule } from ‘@angular/forms’; // <callout id=»co.ng2reactiveforms.module1″/>

/* … snip … */

@NgModule({

  imports: [

    BrowserModule,

    AppRoutingModule,

    ReactiveFormsModule // <callout id=»co.ng2reactiveforms.module2″/>

  ],

  declarations: [

    AppComponent

  ],

  bootstrap: [ AppComponent ]

})

export class AppModule { }

4. Создайте новый компонент

Запускаем ng generate component phone-numи добавляем объявление в модуль маршрутизации.
Запустите сервер Angular с помощью ng serve.
Добавьте маршрут к app-routing.module.tsновому компоненту.

{

path: ‘phone’,

component: PhoneNumComponent

},

5. Создайте телефонный ввод

Откройте phone-num.component.tsи импортируйте FormControlи AbstractControl:

import { FormControl, AbstractControl } from ‘@angular/forms’;

6. Создайте FormControl

Добавьте следующую строку в качестве объявления к PhoneNumComponentклассу:

import { FormControl, AbstractControl } from ‘@angular/forms’;

export class PhoneNumComponent implements OnInit {

phoneNumber = new FormControl();

7. Подтвердите формы

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

export class PhoneNumComponent implements OnInit {

  phoneNumber = new FormControl(», [

    (control: AbstractControl) => {

      // remove any input that isn’t a digit

      const numDigits = control.value.replace(/[^\d]+/g, »).length;

      // only working with US numbers for now, don’t need a country code

      if (numDigits === 10) { return null; }

      if (numDigits > 10) {

        return {

          tooLong: { numDigits }

        };

      } else {

        return {

          tooShort: { numDigits }

        };

      }

    }

  ]);

8. Отображение сообщений об ошибках

Когда введенный номер телефона действителен, функция валидатора возвращается, nullчтобы показать, что ошибки нет.

Когда это ошибка, функция валидатор возвращает объект. Теперь, когда мы проверяем номер телефона, давайте обновим представление, чтобы отобразить новую информацию.

<input [formControl]=»phoneNumber» />

    <!— (1) —>

    <div *ngIf=»phoneNumber.invalid»>

      <!— (2) —>

      <div *ngIf=»(phoneNumber.dirty || phoneNumber.touched)»>

        <!— (3) —>

        <div *ngIf=»phoneNumber.errors.tooLong»>

         Your phone number has too many digits!

          You entered {{ phoneNumber.errors.tooLong.numDigits }}

              digits (required: 10)

        </div>

        <div *ngIf=»phoneNumber.errors.tooShort»>

          Your phone number is too short!

          You entered {{ phoneNumber.errors.tooShort.numDigits }}

              digits (required: 10)

        </div>

      </div>

    </div>

Следующее, что мы можем сделать, это добавить детали стиля в классы CSS, чтобы добавить визуальные подсказки пользователю. На этом мы закончим учебник.

Подведение итогов и следующие шаги

Поздравляем, вы сделали первые шаги с RxJS в Angular! Библиотека RxJS может помочь вам гибко и эффективно обрабатывать асинхронную реализацию. Еще многое предстоит узнать о реактивном программировании и RxJS, например:

Наблюдаемые потоки
BehaviorSubject
Асинхронная труба
И больше