albatrosary's blog

Azure と Angular と Wercker CI とか

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

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

いまのところテンプレ的な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がそれに当たるようです。deactivatecanDeactivateの部分は見つからなかった。

という形でLifecycleとしては

$canActivate -> Constructor -> $onInit

の順番で実行されます。

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

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