Что можно достать из 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

Switching from WebStrom to VS Code

vscode_webstorm_logo

So what should you do not to lose all the features in Visual Studio Code that you already got used to in WebStorm?

Did I miss something?

UPD:

Something Extra:

Angular + ES6 Promise

It would be really nice if we could use native ECMAScript 2015 Promises with Angular instead of $q service that is provided from box to be close to pure JavaScript:

//somewhere inside component controller
let promise = new Promise((resolve) => setTimeout(() => resolve('resolved'), 2000));
promise.then(x => this.x = x);

But in this case we will have to run digest manually for each resolve(to synchronise view and model):

let promise = new Promise((resolve) => setTimeout(() => resolve('resolved'), 2000));
promise.then(x => {
  $scope.apply();
  this.x = x;
});

But what if we hack the Promise and intercept our digest call there:

Continue reading

ui-router: Deprecated events and hooks

If you are using latest version of ui-router (now it’s 1.0.0-alpha) you probably already noticed that there are no events that we all got used to: $stateChangeCancel,  $stateChangeError, $stateChangeStart$stateChangeSuccess$stateNotFound. All of them are deprecated in 1.0.0-alpha.3 and you can not use them anymore in 1.0.0-alpha.5.

If you want to move to new version of ui-router you should make such changes:

Continue reading