Как вы наверное уже знаете при подписке на обозреваемую последовательность либо просто событие в Javascript вы обычно должны в определенный момент отписываться, чтобы освободить память. Иначе это приведет к утечке памяти.
Мы рассмотрим основные случаи, когда вы должны отписываться в ngOnDestroy хуке компонента, а также случаи, когда можно не отписываться.
Структурные директивы – директивы изменяющие DOM. Синтаксис начинается со специального символа – * . Мы уже знаем что в Angular существуют такие структурные директивы как *ngIf и *ngFor.
Самый лучший на мой взгляд пример структурной директивы на данный момент предоставлен командой rangle.io: директива, которая задает задержку перед выводом компонента, то есть, например:
[javascript]
<card *appDelay="5000"></card>
[/javascript]
– элемент card будет выведен(добавлен в DOM) через 5 секунд.
Итак, если резюмировать, что появилось в Angular версии 4:
Для того чтобы сделать динамический 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]
Тут вроде как все понятно, но что, если мы захотим динамически менять тайтл в зависимости от стейта/странички на которой находимся?
Не успели все познакомиться с понятием OpaqueToken, как оно уже становиться deprecated. Теперь нужно использовать вместо него InjectionToken.
Давайте попробуем разобраться почему.
UPD: Статься обновлена 2017-04-24
Статья написана на основе перевода/переработки Server Side Rendering With Angular 4.
Что нам дает серверный рендеринг?
С первых же дней Angular2 Angular включал поддержку этой опции в виде отдельного проекта Angular Universal. Так как серверный пререндеринг одна из ключевых киллер-фич, то начиная с Angular 4 было принято решение включить доработанную версию непосредственно во фремворк.
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:
Наконец-то(начиная с 1.0.0-beta.32) разработчики angular-cli дали доступ к более тонким настройкам webpack и теперь не нужно выбирать между двумя инструментами. Выполнив команду:
[shell]
ng eject
[/shell]
у вас появится файл вебпак конфига в корне проекта, и теперь вместо команды ng вы запускаете старую добрую npm:
[shell]
ng serve -> npm start
ng build -> npm run build
…
[/shell]
P.S.: Уже наткнулся на проблему с поломанной подстановкой environment файла (issue).
Хук $onInit, который появился в 1.5, теперь обязательно использовать, если вы хотите учитывать входящие параметры(bindings) при инициализации компонента. В конструкторе компонента эти параметры будут не определены(undefined) начиная с версии 1.6.
Есть костыль, который можно использовать на переходное время:
[javascript]
.config(function($compileProvider) {
$compileProvider.preAssignBindingsEnabled(true);
});
[/javascript]
В случае, когда у вас в форме несколько полей использующих одинаковые настройки модели (ngModelOptions), теперь можно задать все опции в одном месте – form элементе. А так же переопределить какие-то из них на конкретном поле.
Приближаясь к родным JS промисам, решили выпилить из $http сервиса старые методы sucess и error.
Рекомендации по миграции тут.
great organisation, great speakers, great conference, unfortunately I don’t have time for detailed overview and provide you only with brief-brief notes.