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

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

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

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

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

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

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

Continue reading

Angular: Lazy Loading and Preloading strategy

Almost all of you know that it’s possible in Angular to load modules asynchronously by using Lazy Loading Router feature, you just need to specify special parameter for the state – loadChildren:

{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' }

and setup child module with RouterModule.forChild method:

const routes: Routes = [
  { path: '', component: AdminComponent }
];
 
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [AdminComponent]
})
export class LazyModule { }

In most cases you are doing so not to load all the modules at once make “first screen” appearing quicker. But it’s not all folks, you also could preload all your lazy modules when your application base is loaded so: you are showing first screen fast and after load other modules in background to show them immediately when it’s needed. And it’s really usy to setup: for you main RouterModule you add the property preloadingStrategy:

Continue reading

New github acid colors … and return back to normal colors

Do you see the same what I see right now? I don’t know why but github team decided to change link color and folder color to ugly acid blue.

Hardly got used to it and decided to create userscript to return the normal color. You are welcome to contribute.

To install userscript you can use Tampermonkey google extension.

Концептуальный разбор маршрутизатора Angular2 с примерами

  • подключение и базовая настройка
    • use hash
  • стейты (states)
  • специальные директивы роутера
  • параметры стейта
  • параметры запроса(query params)
  • статические параметры стейта
  • перенаправление на другой стейт
  • события (events)
  • хуки (guards)
  • резолв асинхронных данных
  • вложенные стейты (nested states)
  • множественные вью (multiple views)
  • ленивая загрузка (lazy loading)

Continue reading