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

Posted on by
Reply

Перевод поста 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: Пример структурной директивы

Posted on by
1

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

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

[javascript]
<card *appDelay="5000"></card>
[/javascript]

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

Continue reading →

Новое в Angular4

Posted on by
Reply

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

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

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

Posted on by
1

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

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

[javascript]
export class AppComponent implements OnInit {
constructor(private titleService: Title) {}
ngOnInit() {
this.titleService.setTitle(‘My Page Title’);
}
}
[/javascript]

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

[javascript]
import { Title } from ‘@angular/platform-browser’;
[/javascript]

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

Continue reading →

Angular: OpaqueToken или InjectionToken

Posted on by
3

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

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

Continue reading →

ng-nl 2017. brief review

Posted on by
1

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

Posted on by
25

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

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

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

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

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

Continue reading →

git-clean: Remove all local branches

Posted on by
2

Made a note about it 4 years ago, but it looks like the note is still pretty usefull. So one more time for en readers.

To remove all merged branches(except current -v ‘*’):

git branch --merged | grep -v '*' | xargs git branch -D

also I made such command for repo complete clean up:

alias git-clean="git branch  | grep -v '*' | grep -v 'master' | xargs git branch -D  && git reset --hard && git clean -d -x -f"

Angular: Lazy Loading and Preloading strategy

Posted on by
3

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:

[javascript]
{ path: ‘lazy’, loadChildren: ‘./lazy/lazy.module#LazyModule’ }
[/javascript]

and setup child module with RouterModule.forChild method:

[javascript]
const routes: Routes = [
{ path: ”, component: AdminComponent }
];

@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [AdminComponent]
})
export class LazyModule { }
[/javascript]

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 →