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

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

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

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

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

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

Continue reading

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

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

Continue reading

Angular2: Opaque токены и мультипровайдеры

При определении провайдеров рано или поздно у всех у нас возникает вопрос “А что если будет 2 провайдера с одним и тем же именем?” – Ну тут все довольно просто: последний определенный перезатрет все определенные до него.

Но что если вы подключаете сторонний модуль, а в нем уже определен провайдер с таким же именем? Очевидно, что вы его перезатрете своим. Как избежать этого?

Continue reading

Angular2: Синхронная асинхронность MockBackend

Решил сделать заметку по не очевидному моменту юнит-тестирования Angular2, а именно: когда вы мокаете Http сервис, заменяя XHRBackend на MockBackend:

[javascript]
TestBed.configureTestingModule({
imports: [HttpModule],
providers: [{provide: XHRBackend, useClass: MockBackend}]
});
[/javascript]

а потом с помощью mockBackend подменяете ответ от сервера:

[javascript]
mockBackend.connections.subscribe((connection: MockConnection) => {
connection.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(mockUser)})));
})
[/javascript]

subscribe на http Observable становится внезапно синхронным:

[javascript]
console.log(1);
this._http.get(‘/’).subscribe((data) => {
console.log(2);
});
console.log(3);
[/javascript]

соотвественно выведет: 1 2 3.

Подробно вопрсос освещен на стеке.

 

Angular2: Что такое AoT?

Что это такое?

AOT или Ahead-of-Time – вариант компиляции приложения(альтернатива JIT или Just-in-time), которая выполняется один раз при сборке приложения. JIT выполняется каждый раз при запуске приложения в браузере.

Continue reading

Angular2: Possible parameters for @HostBinding and @HostListener decorators

@HostBinding(?)

  • propertyName: references a property of the host with the propertyName name.
  • attr.attributeName: references an attribute of the host with the attributeName name. The initial value is set to the associated directive property. Setting a value in the property updates the attribute on the corresponding HTML element. Using the null value at this level removes the attribute on the HTML element.
  • style.styleName: links a directive property to a style of the HTML element.
  • class.className: links a directive property to a class name of the HTML element. If the value is true, the class is added otherwise removed.

@HostListener(?)

  • eventName: the name of the event to register a method callback on.

Continue reading

Шпаргалка по синтаксису шаблонов Angular2

взято с официальной документации, переведено/переработано.

<input [value]=”firstName”> задание свойства value
<div [attr.role]=”myAriaRole”> задание атрибута role.
<div [class.extra-sparkle]=”isDelightful”> Выставляет класс extra-sparkle по условию isDelightful
<div [style.width.px]=”mySize”> задает значение width в пикселях.
<button (click)=”readRainbow($event)”> Привязывает обраобтчик клика readRainbow
<p>Hello {{ponyName}}</p>
<div title=”Hello {{ponyName}}“>
Подставляет значение выражения
<my-cmp [(title)]=”name”> Двойное связывание, альтернатива: <my-cmp [title]=”name” (titleChange)=”name=$event”>
<video #movieplayer …>
<button (click)=”movieplayer.play()”>
</video>
Создает локальную переменную movieplayer, которая является ссылкой на элемент video
<p *myUnless=”myExpression”>…</p> Символ * превращает текущий элмент во втроенный шаблон: :<template [myUnless]=”myExpression”><p>…</p></template>
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> Применение myCardNumberFormatter пайпа.
<p>Employer: {{employer?.companyName}}</p> Указание не обязательного поля с помощью оператора “?

Как запустить Angular2 ChangeDetection вручную

Небольшая заметка по мотивам ответа на stackoverflow.

Внедрив следующие сервисы в компонент

ApplicationRefNgZoneChangeDetectorRef,

мы можем добиться следующего:

  • ApplicationRef.tick() – то есть запуск changeDetection на корневом элементе, то есть соотвественно запуск на всех элементах дерева(аналог  $rootScope.$digest() )
  • NgZone.run(callback) – тоже самое что и предыдущий вариант, только с выполнением колбэка (аналог $rootScope.$apply(callback) )
  • ChangeDetectorRef.detectChanges() – запуск механизма обнаружения изменений только на текущем элементе ( аналог $scope.$digest() )

Continue reading