Rxjs: 6 операторов, которые вы должны знать

Перевод поста RxJS — Six Operators That you Must Know.

1. Concat

удобно, когда важен порядок вывода последовательностей.

2. forkJoin

– аналог Promise.all()

3. mergeMap

– применяется, когда у вас есть Observable, элементы последовательности которого тоже Observable, а вам хочется объединить все в один поток (чтобы все элементы внутренние Observable порождали событие основного). Не путать со switchMap!

 

4. pairwise

– возвращает не только текущее значение, но в месте с ним и предыдущее значение последовательности

5. switchMap

switchMap делает complete для предыдущего Observable, то есть в данном случае у нас всегда будет только один активный Observable для интервала:

а вот mergeMap нам бы на каждый клик порождал новую interval последовательность.

6. combineLatest

– в получить последнии значения из каждой последовательности при эммите одно из них:

Angular: Пример структурной директивы

Структурные директивы – директивы изменяющие DOM. Синтаксис начинается со специального символа – * . Мы уже знаем что в Angular существуют такие структурные директивы как *ngIf и *ngFor.

Самый лучший на мой взгляд пример структурной директивы на данный момент предоставлен командой rangle.io: директива, которая задает задержку перед выводом компонента, то есть, например:

<card *appDelay="5000"></card>

– элемент card будет выведен(добавлен в DOM) через 5 секунд.

Continue reading

Новое в Angular4

Итак, если резюмировать, что появилось в Angular версии 4:

  • расширенный синтаксис ngIf – появляется else
  • возможность сохранять значение полученное из async pipe
  • новая директива NgComponentOutlet
  • анимация переходит в отдельный пакет (@angular/platform-browser/animations)
  • серверный рендеринг переходит в основной репозиторий ( пакет @angular/platform-server)
  • переход на Typescript 2.2
  • deprecated: template и OpaqueToken

Angular: Меняем title в зависимости от стейта

Для того чтобы сделать динамический title в Angular (2+) нам не нужно придумывать свои велосипеды как это было в AngularJs. Достаточно просто использовать сервис Title, у которого есть методы getTitle и setTitle.

То есть если вы просто хотите задать тайтл достаточно сделать:

export class AppComponent implements OnInit {
  constructor(private titleService: Title) {}
  ngOnInit() {
    this.titleService.setTitle('My Page Title');
  }
}

При этом Title подключается из модуля @angular/platform-browser:

import { Title } from '@angular/platform-browser';

Тут вроде как все понятно, но что, если мы захотим динамически менять тайтл в зависимости от стейта/странички на которой находимся?

Continue reading

Angular: OpaqueToken или InjectionToken

Не успели все познакомиться с понятием OpaqueToken, как оно уже становиться deprecated. Теперь нужно использовать вместо него InjectionToken.

Давайте попробуем разобраться почему.

Continue reading

ng-nl 2017. brief review (keep updating…)

Already like a good tradition I visited ng-nl conference (ng-nl 2015, ng-nl 2016).

Same as previous year it was great place and awesome people around.

But this time they really messed up with the schedule. I expected to have order of the topics that is provided on official web site, but appeared that it’s not actual and I had to follow the app one, basically the only place. And the app was lagging :(

Strange that this year I did not see anybody from the core Angular team. Also no old good Pascal Precht and Tero Parviainen in the list. At least we had good presentation by Todd Motto about Reactive Forms and really inspiring GraphQL talk by Uri Goldshtein.

Continue reading

Серверный рендеринг с Angular4

UPD: Статься обновлена 2017-04-24

Статья написана на основе перевода/переработки Server Side Rendering With Angular 4.

Что нам дает серверный рендеринг?

  • более быструю загрузку “первого экрана”
  • поисковая оптимизация (предоставление статики для поисковых ботов)
  • социальные превью для страничек

С первых же дней Angular2 Angular включал поддержку этой опции в виде отдельного проекта Angular Universal. Так как серверный пререндеринг одна из ключевых киллер-фич, то начиная с Angular 4 было принято решение включить доработанную версию непосредственно во фремворк.

Continue reading