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

ui-router: Default child for abstract state

In version 1.0.0alpha0 they finally make it possible! Child for abstract states? No! But now at least it’s possible to create own fix for it due to new $transitionsProvider, in which you could define onBefore hook. You can change the behaviour depends on state options. Let’s use “abstract” property that is boolean and extend it: to make it possible to add child state here:

        to: state => !!state.abstract
      }, ($transition$, $state) => {
        if (angular.isString($transition.to().abstract)) {
          return $state.target($transition.to().abstract);

basically if abstract param is a string we set it like a target. Example of use:

          name: 'abstract2',
          url: '/abstract2',
          abstract: 'abstract2.foo', // redirect to 'abstract2.foo'
          template: 'abstract2'

Continue reading

How to catch Angular ui-router resolve errors

It’s more than annoying to have just a blank page and no errors in console when your issue is inside ui-router resolve. Finally I found a pretty nice solution, don’t know why it’s not provided “from the box”. In case of error ui-router sends specific event $stateChangeError that we could listen for:

$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){

and now wow! we have an exact error in console and no need to guess what’s wrong with your code anymore.

ui-router debug snippet

found nice code snippet that could help you to debug ui-router issues by loggin router events in console:

// Credits: Adam`s answer in http://stackoverflow.com/a/20786262/69362
var $rootScope = angular.element(document.querySelectorAll('[ui-view]')[0]).injector().get('$rootScope');

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeStart to '+toState.to+'- fired when the transition begins. toState,toParams : \n',toState, toParams);

$rootScope.$on('$stateChangeError',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeError - fired when an error occurs during transition.');

$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeSuccess to '+toState.name+'- fired once the state transition is complete.');

  console.log('$viewContentLoaded - fired after dom rendered',event);

$rootScope.$on('$stateNotFound',function(event, unfoundState, fromState, fromParams){
  console.log('$stateNotFound '+unfoundState.to+'  - fired when a state cannot be found by its name.');
  console.log(unfoundState, fromState, fromParams);

if you have you Angular app root on html element you can simply use:

var $rootScope = angular.element(document).scope();

code is placed here.

Авторизация AngularJS. Right way.

Изучив кучу инструкций по сборке различных моделей велосипедов я таки собрал свой. Будет хорошо, если пост поможет сэкономить кому-то время на конструирование.

UPD: Статья обновлена и дополнена 2017-02-21

Continue reading