Все что вы должны знать о 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.

 

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

Что нового в webpack2

  • понимание ES6 модулей из коробки (без конвертации в CommonJS)
  • поддержка Tree Shaking
  • конфиг теперь может быть функцией с параметрами и возвращать промис
  • uglifyjs плагин не включает автоматом минификацию других плагинов
  • опциии для лодеров задаются непосредственно в конфигурации лодера, для поддержки старых плагинов добавили LoaderOptionsPlugin, который задает опции в контекте всего вебпака
  • Promise полифил теперь не включен в сборку по умолчанию
  • большая часть плагинов теперь принимает параметром объект опций, вместо набора параметров
  • добавлен алиас webpackfile.js
  • флаг “-p” устанавливает NODE_ENV = “production
  • debug теперь включается для каждого лодера отдельно (нет глобальной опции)
  • имена свойств конфига: вместо module.loaders теперь пишем module.rules, более чистая нотация с перечислением лодеров в объекте свойства use

Инструкции по миграции.

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 через console.log

Мы уже все привыкли к angular.element API предоставляемое AngularJs, благодаря чему мы можем выбрать элемент и дальше исследовать его свойства в консоли обращаясь как :


> angular.element($0)

angular-element

Более подробно тут.

Но что же может нам дать Angular2?

Continue reading

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

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

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

ApplicationRefNgZoneChangeDetectorRef,

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

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

Continue reading

Жизненный цикл Angular2 компонента

hooks-in-sequence

Angular полностью управляет процессами происходящими в компоненте и над ним: создание, рендеринг, связывание данных и удаление. Мы в свою очередь можем вклиниться в процесс с помощью хуков/триггеров (lifecycle hooks) для каждого из событий.

Какие существуют хуки?

  • ngOnChanges – при изменении входных значений
  • ngOnInit – при инициализации компонента (один раз)
  • ngDoCheck – при вызове механизма обнаружения изменения (change detection)
  • ngAfterContentInit – после вставки компонента в страницу (один раз)
  • ngAfterContentChecked – один раз при инициализациии контента и каждый раз при изменении входящих параметров
  • ngAfterViewInit – аналогичен ngAfterContentInit, только для представления
  • ngAfterViewChecked – аналогичен ngAfterContentChecked, только для представления
  • ngOnDestroy – перед тем, как Angular удалит компонент со страницы

Continue reading