Component Routerのactivateとかdeactivateとかどこいっちゃった？

Component Routerを実装してみて「はて？Componentのライフサイクルはどうなってるんだろ？」というところに興味津々だったのでガンバってコードを読んでみた。５割くらい分かったつもり。

いまのところテンプレ的なComponentのコード

(function () {
  angular
    .module('Sample.components.about', [])
    .component('aboutController', {
      controller: AboutController,
      templateUrl: 'components/about/about.html',
      $canActivate: canActivate
    });
  
  AboutController.$inject = [];

  var ctrl;

  function AboutController() {
    console.log('AboutController Constructor');
    ctrl= this;
  }

  function canActivate() {
    console.log('AboutController $canActivate');
    return true;
  }

  AboutController.prototype.$onInit = function() {
    console.log('AboutController $onInit');
    ctrl.name = 'About';
  };
})();

探したけど、activateとかdeactivate、canDeactivateは見つからなかった。outletコンポーネントのそれはあったので書き方変えたら見つかるかも。Angular GuideのComponentには面白そうなサンプルもある。

https://docs.angularjs.org/guide/component

Lifecycle

canActivateだが$canActivateというキーワードで提供されている。これは

• true: Routingを進め画面遷移させる
• false: Routingを中止し遷移させない

次にActivateに当たる部分ですが、$onInitがそれに当たるようです。deactivateとcanDeactivateの部分は見つからなかった。

という形でLifecycleとしては

$canActivate -> Constructor -> $onInit

の順番で実行されます。

このサンプルコードはこちら

https://github.com/albatrosary/ComponentRouter4Angular1/tree/step2