[МУЗЫКА]
Позвольте мне теперь дать вам краткий обзор Angular и
его отношения с реактивной программой,
как Angular использовать реактивное программирование.
В частности, библиотека RxJS и как она используется
Angular для обеспечения реактивного способа написания угловых приложений.
Теперь, что мы представляем в этой лекции очень быстрый обзор
общей концепции реактивного программирования, наблюдаемые,
наблюдаемый шаблон и как он применяется в Angular.
Реактивное программирование само по себе является очень обширной темой
, которая не может быть рассмотрена за десять минут.
Реактивное программирование,
, если нужно осветить его в полной мере, станет целым курсом самостоятельно.
И, к сожалению,
у нас нет времени, чтобы встроить весь курс в этот конкретный курс.
Таким образом, учитывая тот факт, что мы заинтересованы в основном в том, как Angular использует
реактивное программирование, чтобы позволить нам удвоить угловые приложения,
, поэтому мы сосредоточимся на этом аспекте.
Но по пути
я дам вам краткое введение в различные концепции в этой общей области.
Если вы заинтересованы в реактивном программировании,
я настоятельно советую вам продолжить некоторые ссылки, которые я предоставил и
дополнительные ресурсы для этого конкретного урока.
У вас есть доступ к большому количеству материалов, но
мы дадим вам сильное обоснование в реактивном программировании.
Но в этом курсе, начиная с этого момента,
мы рассмотрим, как Angular использует реактивную парадигму программирования для
проектирования угловых приложений.
Мы не просто ограничимся только этим уроком, но
все последующие уроки также увидят Используется наблюдаемого и
шаблон наблюдения и как мы пишем реактивные приложения в угловом.
Вся дискуссия о реактивном программировании вращается вокруг
этого конкретного шаблона разработки программного обеспечения, называемого наблюдаемым шаблоном.
Вы помните банду из четырех, о которой я упоминал вам в одном из предыдущих
лекций, где мы обсуждали структуру контроллера модели и
модель представления модели.
Та же банда из четырех книг содержит часть паттерна, который
был довольно успешно использован в реактивном шаблоне программирования.
Шаблон наблюдателя вращается вокруг наблюдаемых.
Таким образом, у вас есть наблюдаемые, чье поведение можно наблюдать наблюдателями.
Так вот почему это называется шаблон наблюдателя.
Вы объявляете определенные объекты наблюдаемыми или объектами и
эти наблюдаемые будут наблюдаться наблюдателями.
Теперь наблюдатели сами зарегистрируются, чтобы
наблюдать за изменениями в наблюдаемом и
наблюдаемый будет уведомлять наблюдателей всякий раз, когда происходят изменения.
Таким образом, в этом шаблоне наблюдателя, как эти наблюдатели будут подписываться
на наблюдаемый или регистрироваться с наблюдаемым.
Итак, вот как наблюдаемый знает, какие наблюдатели интересуются
любыми изменениями в его состоянии.
Таким образом, всякий раз, когда наблюдаемые говорят,
изменение в своем состоянии, он немедленно уведомит всех наблюдателей
об изменении состояния, и наблюдатели впоследствии могут предпринять
действия на основании этого уведомления об изменении наблюдаемого.
Шаблон наблюдателя был очень эффективно использован во многих различных обстоятельствах
.
И действительно, парадигма реактивного программирования основана на ней.
Итак, вопрос, который приходит вам на ум, -
, почему мы говорим о наблюдаемых?
Что такое особый интерес к наблюдаемым?
Observer шаблон является одним из способов написания программных приложений.
Итак, это основано на потоках.
Итак, у вас есть данные, которые обрабатывают ваше приложение.
Эти данные можно рассматривать как поток значений, который проходит через приложение
.
Итак, поток является основным каналом, вокруг которого проектируется наблюдаемый и
наблюдаемый паттерн.
Итак, какие потоки вы можете подписаться на эти потоки.
И всякий раз, когда значение появляется в потоке, вы выбираете это значение и
, тогда вы можете реагировать на это значение.
Поэтому, чтобы иметь возможность реагировать на это значение, вам нужно подписаться на этот поток или
вам нужно подписаться на наблюдаемый.
Наблюдаемый часто будет продолжать излучать значения.
И когда вы видите эти значения, наблюдатель может реагировать на них.
Теперь это также означает, что когда вы больше не заинтересованы,
вы можете отказаться от наблюдаемого.
Можете сказать, мне больше не интересно смотреть на тебя, а потом исчезать.
Таким образом наблюдаемая закономерность позволяет периодически наблюдать изменения,
, если вы хотите, а затем прекратите наблюдать, когда вы больше не заинтересованы.
Таким образом, такая парадигма позволяет создавать приложения
очень интересным способом, интуитивно понятным способом.
Но чтобы иметь возможность использовать этот подход,
вам нужно обойти этот подход.
Так же, как мы видели с шаблоном обратного вызова или мы видели с использованием обещаний.
Observables - это еще один способ разработки приложений.
Итак, наблюдаемый сам по себе будет очень ленивым и он будет просто висеть там.
Итак, вы можете создать наблюдаемый, а затем просто оставить его там.
Наблюдаемый становится активным или
становится горячим, когда кто-то начинает подписываться на наблюдателя.
Таким образом, в этот момент наблюдатель начинает действовать и начинает редактировать значения.
Таким образом, если хотя бы один наблюдатель доверен в наблюдаемом,
, то наблюдаемый начнет излучать значения.
Если никому не доверено, наблюдаемый вернется в свою оболочку и останется там.
Итак, вы можете думать об этом так.
Так что если эта ментальная картина поможет вам понять
, как работает патент наблюдателя, то так и быть.
Таким образом, это поможет вам взглянуть на то, как мы разрабатываем наши приложения
в следующих упражнениях, а затем последующих уроках
, где мы более подробно рассмотрим HTTP-поддерживаемый Angular.
Еще одним аспектом наблюдаемых является тот факт, что отмена предыдущего запроса и
затем повторная попытка очень проста с наблюдаемыми.
Обещание, которое вы видели ранее, как только вы начинаете ждать обещания,
вы не можете отменить, вы ждете.
Обещание в конечном итоге решит или провалится, и
тогда вы должны реагировать независимо от того, что, даже если вы больше не заинтересованы.
Но с наблюдаемым, если вы можете продать свою подписку,
то, что происходит с наблюдаемым не беспокоит вас вообще.
И поэтому вам не нужно ничего делать, если вы отмените подписку.
Таким образом, отмена и повторная попытка в случае, если предыдущее судебное разбирательство не увенчается успехом
, очень просто с наблюдаемыми.
Мы увидим некоторые из этих моделей поведения более подробно в следующих упражнениях.
Это подводит нас к концепции реактивного программирования.
Реактивное программирование основано на шаблоне наблюдателя и
также итерированном шаблоне.
Но в любом случае,
шаблон наблюдателя является доминирующей особенностью реактивного программирования.
Поэтому в реактивном программировании мы заинтересованы в потоках данных.
Как данные передаются через ваше приложение.
Любой поток данных может рассматриваться как поток.
Таким образом, этот поток данных может распространять изменения по всему приложению.
И пока изменения распространяются через приложение,
на промежуточных этапах вы даже можете взять один конкретный поток,
изменить его и создать другой поток, идущий оттуда.
Так вот, что наблюдаемая картина позволяет нам нарисовать.
Таким образом, вся парадигма программирования построена вокруг потоков или потоков данных.
Так что это еще один способ взглянуть на решение вашей проблемы.
И именно поэтому я подчеркиваю тот факт, что вам нужно обойти голову, чтобы
понять, как реактивный шаблон или как реактивное программирование выполняется на практике.
Теперь вы часто слышите, как люди говорят о чем-то называемом функциональном
реактивном программировании.
Если вы знакомы с парадигмой функционального программирования.
Но плюс реактивное программирование
- это то, что люди часто называют функциональным реактивным программированием.
Таким образом, взаимный брак этих двух подходов.
Теперь вы увидите использование некоторых из них с Angular
, как вы проходите через этот конкретный курс.
Наконец, что насчет RxJS?
Какую роль он играет во всей этой экосистеме?
RxJS - это реализация JavaScript наблюдаемого шаблона и
также поддержка реактивного программирования.
Поэтому, если вы должны были выполнять реактивное программирование в JavaScript,
, тогда вы используете библиотеку RxJS для этого.
RxJS только одна такая реализация.
Есть несколько других, но причина, по которой мы заинтересованы в RxJS в частности
в этом курсе, потому что Angular использует RxJS для
свою поддержку реактивного программирования.
Таким образом, RxJS - это библиотека.
Это отдельная библиотека, которая есть там.
Вы можете использовать RxJS для других целей, не обязательно связанных с Angular.
Были приложения, которые были разработаны с использованием RxJS per se
, не связанных с Angular.
Но в этом курсе мы заинтересованы в том, как RxJS объединяются с
Angular для поддержки реактивного программирования в Angular.
Таким образом, RxJS - это библиотека, которая позволяет вам выполнять асинхронное программирование.
Мы говорили об асинхронном программировании, которое обещает ранее.
Мы увидим асинхронное программирование с обратными вызовами в курсе узлов.
И наблюдаемые - это еще один способ взглянуть на асинхронное программирование
вместе с программистом, управляемым событиями.
Поэтому, если вы знакомы с парадигмой программирования, управляемой событиями,
RxJS хорошо вписывается в эту среду.
Все это построено вокруг наблюдаемых последовательностей.
И библиотека RxJS предоставляет вам один тип ядра, называемый Observable.
И вокруг этого типа ядра, у вас есть некоторые типы спутников
, которые построены как наблюдатели, планировщики и субъекты.
Все это позволяет вам выполнять реактивное программирование.
Кроме того, RxJS также поддерживает целую кучу операторов.
Поддержка операторов, разделителей, извините.
Это был [смех] мой язык.
RxJS поддерживает операторы,
операторы, вдохновленные операторами массива JavaScript.
Если вы знакомы с операторами массива JavaScript, такими как map, тогда
операторы RxJS будут выглядеть очень знакомыми для вас.
Вы можете обрабатывать наблюдаемые и
значения, которые наблюдаемое изображение так же, как массив, поэтому многие операторы массива находят свой путь в RxJS и реактивное программирование также.
Таким образом, пользователи карты, фильтруют, уменьшают и
другие операторы массива также найдут место в RxJS и реактивном программировании.
И это то, что позволяет обрабатывать асинхронные события как коллекции.
Итак, когда вы хотите ждать
асинхронного события, это будет похоже на подписку на наблюдаемое.
Поэтому, когда это наблюдаемое излучает значение, вы готовы поймать значение и
затем действовать соответствующим образом.
Вы знаете, когда будет происходить выброс.
Так что это асинхронная часть, вступающая в игру с использованием RxJS.
И как я уже упоминал, причина, по которой мы заинтересованы в RxJS, заключается в том, что
Angular использует библиотеку RxJS для
, поддерживая реактивное программирование.
Угловой сам имеет ряд встроенных наблюдаемых,
, как мы увидим в короткое время.
Когда вы попадаете в мир реактивного программирования, вы часто услышите людей, говорящих
о наблюдаемых, тогда вы услышите людей, говорящих об операторах, а затем вы также услышите людей, говорящих о мраморных диаграммах.
Теперь, мраморные диаграммы являются способом представления
реактивного программирования с использованием наблюдаемых.
Так что если у вас есть наблюдаемый,
то, если вы рассматриваете это наблюдаемое как функцию времени,
так что если эта ось представляет собой функцию времени, наблюдаемый
будет периодически излучать такие значения, один за другим.
Поэтому, если вы организуете эти значения вдоль последовательности,
как функция времени, так что вы увидите значения, испускаемые таким образом.
Существует также возможность того, что вы можете столкнуться с ошибкой.
В этом случае вам нужно обработать ошибку соответствующим образом.
Если вы обработаете ошибку соответствующим образом,
вы можете продолжить или вы можете остановиться в этом месте.
Аналогично, когда наблюдаемый завершает все свои итерации,
, то он будет помечен как завершение наблюдаемого.
Таким образом, вам нужно иметь возможность даже обрабатывать событие завершения в наблюдаемом.
Учитывая это время аннотированное поведение наблюдаемого, вы можете затем взять
значения, что наблюдаемое изображение и применить операторы к этим наблюдаемым.
Теперь эти значения можно рассматривать как массив.
Если это поможет вам лучше понять, вы можете рассматривать его как массив значений.
Теперь эти значения могут управляться с помощью различных операторов.
Так вот где ваша карта, ваш фильтр, сокращение и несколько операторов, которые
поддерживает любые типичные реактивные программные библиотеки, такие как RxJS.
Включите преобразование
одного набора значений, которые вы получаете из наблюдаемого в другой набор значений.
Таким образом, вы в конечном итоге создаете новый наблюдаемый.
И этот новый наблюдаемый будет состоять из
преобразованных значений из исходного наблюдаемого.
Так вот почему я показываю эти преобразованные значения как прямоугольники здесь.
Просто чтобы дать вам визуальное представление о том, что мы пытаемся сделать с
оператором.
Таким образом, вы берете значение, а затем превращаете его в другое значение.
И эта последовательность тех различных значений, которые
Вы получаете путем преобразования значений, излучаемых наблюдаемым.
Сам станет еще одной строкой значений, и, следовательно,
станет еще одной наблюдаемой.
Таким образом, вы можете получить один наблюдаемый из другого наблюдаемого.
Но этот второй наблюдаемый зависит от первого, так что это зависит.
Его поведение типизировано, первое через использование этого оператора.
Мы увидим примеры этих упражнений
в этом уроке и последующих уроках.
Как насчет Angular и RxJS, как они объединяются?
Угловой, как мы уже упоминали ранее, поддерживает ряд наблюдаемых сам по себе.
И эта поддержка наблюдаемых в Angular позволяет вам выполнять некоторые
реактивное программирование в вашем угловом приложении.
Так, например, формы в Angular,
мы видели реактивные формы уже в одном из предыдущих уроков.
В тот момент я никогда не упоминал слово, наблюдаемое там явно.
Но теперь, когда мы знаем, что можно наблюдать, мы вернемся к реактивной форме, и
затем сделаем некоторое преобразование в реактивную форму.
Формы сами становятся заметными в Angular.
И любые изменения в значениях любого из элементов формы,
можно вывести, и наблюдать, подписавшись на
наблюдаемый, что Угловая структура обеспечивает для нас.
Аналогично, HTTP, с которым мы столкнемся в следующем модуле этого курса,
также будет основываться на наблюдаемых.
Поэтому, когда ваш сервис идет и извлекает данные с сервера, библиотека HTTP,
или модуль HTTP в Angular, поддерживает наблюдаемые.
Таким образом, всякий раз, когда вы выполняете любой из методов, получаете, положите, публикуете или
delete, используя HTTP, они будут давать вам наблюдаемый
, который вы затем можете подписаться в своем сервисе.
А затем преобразовывать его, а затем отдавать его своим компонентам, а
компоненты могут подписаться на наблюдаемые.
Услуга предоставляется путем преобразования потоков HTTP.
И вот где реактивное программирование и
поток данных через ваше угловое приложение становится очень простым.
Аналогично, есть AsyncPipe, с которым вы столкнетесь позже в этом курсе.
А также обнаружение изменений, построенное вокруг наблюдаемых в Angular.
Вы увидите несколько примеров этого в остальной части этого курса.
Теперь возвращаемся к вопросу, который мы видели в предыдущем слайде.
Как вы принимаете наблюдаемый и превращаете его в другой наблюдаемый?
Вот пример, с которым вы столкнетесь в упражнении, которое следует за этой лекцией.
Итак, здесь у нас есть параметр маршрута
в нашем компоненте меню, который использует параметр маршрута для
поставить значение выбранного блюда компоненту детали блюда.
Таким образом, параметр маршрута становится наблюдаемым.
Модуль маршрутизатора Angular имеет активность ActivatedRoute службы, которая
поддерживает кучу наблюдаемых и один из них является наблюдаемыми параметрами.
Наблюдаемые параметры привязаны к параметрам маршрута.
И поэтому любые изменения параметров
в URL-адресе, с которым вы сталкиваетесь, будут испускаться как наблюдаемый.
Теперь, поэтому, когда вы получаете наблюдаемый, так как вы можете видеть,
вы можете получить доступ к этому наблюдаемым, сказав эти параметры маршрута в вашем коде.
Таким образом, параметры сами по себе наблюдаемы здесь.
Теперь, к этим наблюдаемым парам,
вы можете применить оператор, как оператор здесь называется switchmap.
Мы увидим использование этого в выдержке.
Оператор switchmap принимает наблюдаемые параметры.
А затем преобразует параметры наблюдаемые в другой наблюдаемый, который является блюдо.
Он принимает значение params, а затем извлекает значение ID из параметров,
, который дает вам доступ к параметру маршрута, id или
параметр, который вы указали, а затем использует его, чтобы пойти и получить блюдо.
Поэтому каждый раз, когда параметр изменяется, это приведет к получению нового блюда.
И поэтому каждый раз, когда параметр изменяется,
, что эквивалентно испусканию нового значения по их параметрам наблюдаемым.
Это превращается в выборку нового блюда для
, который является соответствующим идентификатором.
Таким образом, блюдо станет еще одним наблюдаемым.
Теперь, когда это блюдо наблюдаемое становится доступным, вы можете подписаться на это блюдо
, наблюдаемое здесь, и получить значение блюда.
И когда вы получаете значение блюда, то вы можете взять значение блюда, а затем
создать переменную блюда в вашем компоненте детали блюда к этому значению блюда.
Таким образом, любое изменение параметра маршрута распространяется через этот
оператор switchmap в наблюдаемый,
, который при наблюдении через подписанный,
позволит вам преобразовать это и назначить это другому блюду.
И когда это произойдет, ваш взгляд может обновиться с
новое блюдо, которое было получено от сервиса.
Итак, теперь вы видите, как данные проходят через параметр маршрута,
через оператор switchmap, и
в результате изменения вида компонента детали вашего блюда.
Вот почему наблюдаемое программирование на основе или
реактивное программирование в Angular становится очень полезным для
реализации определенных функций в вашем угловом приложении.
Это один из таких примеров.
Мы увидим использование этого конкретного примера в
упражнении, которое следует за этой лекцией.
Я думал, что облегчу
вам запомнить все это, просто поя эту Оду Observables.
[МУЗЫКА]
Вы должны спеть это под мелодию,
Вы можете назвать меня Аль Пол Саймон из славы Саймона и Гарфанкеля.
Если вы разворачиваетесь и говорите, кто такой Пол Саймон?
Извините, другое поколение.
[МУЗЫКА]