Angular & Rxjs: Отписываться или не отписываться?

Как вы наверное уже знаете при подписке на обозреваемую последовательность либо просто событие в Javascript вы обычно должны в определенный момент отписываться, чтобы освободить память. Иначе это приведет к утечке памяти.

Мы рассмотрим основные случаи, когда вы должны отписываться в ngOnDestroy хуке компонента, а также случаи, когда можно не отписываться.

Continue reading

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

angular-cli + `ng eject` => webpack welcome back

Наконец-то(начиная с 1.0.0-beta.32) разработчики angular-cli дали доступ к более тонким настройкам webpack и теперь не нужно выбирать между двумя инструментами. Выполнив команду:

ng eject

у вас появится файл вебпак конфига в корне проекта, и теперь вместо команды ng вы запускаете старую добрую npm:

ng serve -> npm start
ng build -> npm run build
...

 

P.S.: Уже наткнулся на проблему с поломанной подстановкой environment файла (issue).

Все что вы должны знать о Angular 1.6

Обязательное использование $onInit в компонентах

Хук $onInit, который появился в 1.5, теперь обязательно использовать, если вы хотите учитывать входящие параметры(bindings) при инициализации компонента. В конструкторе компонента эти параметры будут не определены(undefined) начиная с версии 1.6.

Есть костыль, который можно использовать на переходное время:

.config(function($compileProvider) {
  $compileProvider.preAssignBindingsEnabled(true);
});

Наследование ngModelOptions

В случае, когда у вас в форме несколько полей использующих одинаковые настройки модели (ngModelOptions), теперь можно задать все опции в одном месте – form элементе. А так же переопределить какие-то из них на конкретном поле.

Нет success() и error() методов в $http

Приближаясь к родным JS промисам, решили выпилить из $http сервиса старые методы sucess и error.

 

Рекомендации по миграции тут.