Q:

How can I detect the component change when using Angular component router?

Right now I'm using ui-router to handle the authorization:
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {}

But how can I use ngComponentRouter to make this work since Angular1.5?

A:

In the new router you have Component Lifecycle Hooks:
angular.module('app', [])
  .controller('MyController', ['user', '$http', MyController]);

function MyController(user, $http) {
  this.user = user;
  this.$http = $http;
}

// Before switching to a new component, this hook runs for 
// each active component in the app. If any of them 
// return false, a rejected promise, or a promise that resolves to false,
// the navigation is cancelled.

MyController.prototype.canActivate = function() {
  return this.user.isAdmin;
};

//This hook fires just before the nagivation finishes.

MyController.prototype.activate = function() {
  return this.bigFiles = this.$http.downloadBigFiles();
};

