Angular1.5でComponent Routerを使ってみた

はじめに

Angular2.0を見据えて1.5から追加された、Component Routerを使ってみます。
2.0と結構違うようなので、1.5で書くことはもうあまり無いかもしれませんが、自分の為に残しておこうと思います。

インストール

bowerを使用すると、これしか見当たりませんでした。。。他にもあるのかもしれません。

https://libraries.io/bower/angular-component-router

bower install angular-component-router --save

モジュールを定義

ngComponentRouterをmoduleに追加。

  var app = angular.module('app', [
    'ngComponentRouter'
  ]);

使い方

トップレベルのコンポーネントを指定する

ルーティングの一番親になるコンポーネントを定義します。
特にない場合は定義不要かもしれません。

app.value('$routerRootComponent', 'rootComponent');

ルーティングを設定

app.component('rootComponent', {
  template: '<ng-outlet></ng-outlet>',
  $routeConfig: [{
    path: '/home',
    name: 'Home',
    component: 'home',
    useAsDefault:true
  },{
  	path: '/other',
    name: 'Other',
    component: 'other',
    $canActivate:function(){return true;}
  }]
});

ng-outlet

ルーティングで設定したコンポーネントは、<ng-outlet>に反映される。
ui-routerでいう<ui-view>のようなものだとおもう。

$routeConfig

path

URLに反映されるpathの名前

component

指定したRouteに対応するComponent

name

リンク先で指定する値。先頭の文字は大文字にするのがルール。
<a ng-link="['Home']">のように使用する

useAsDefault

useAsDefault:trueを設定した場合、
http://fugaguga/にアクセスした場合に、http://fugaguga//home移動するようになる。

component routerを入れ子にする

app.component('parent', {
  template: '<ng-outlet></ng-outlet>',
  $routeConfig: [{
    path: '/...',
    component: 'children'}
  }]
});

app.component('children', {
  template: '<ng-outlet></ng-outlet>',
  $routeConfig: [{
    path: '/child1',
    name:'Child1',
    component: 'child1'}
  },{
    path: '/child2/:id',
    name:'Child2',
    component: 'child2'}
  }]
});

親側のcomponentのpathを/...に設定する。
ページが存在しない場合は、nameは設定しない。

ページを切り替える

view側から切り替える

<a ng-link="['Detail']">詳細ページ</a>

controller側から切り替える

ポイントは、$routerをbindすることです。
bindingsに$routerを設定しないと、$routerがundefinedになってしまいます。

app.component('myComp', {
  template: '<div>controllerからページを切り替える</div>',
  controller:function(){
  	
  	var self = this;
  	
  	self.changePage = function(){
  		//ページを切り替え
  		self.$router.navigate(['Hogehoge']);
  	}
  },
  bindings: {
     $router: '<'
   }
});

パラメーターを渡す

パラメータを連携する場合は、$routeConfigで指定するpathをpath/:param/:param2のようにする必要があります。

app.component('children', {
  template: '<ng-outlet></ng-outlet>',
  $routeConfig: [{
    path: '/child1',
    name:'Child1',
    component: 'child1'}
  },{
    path: '/child2/:id',
    name:'Child2',
    component: 'child2'}
  }]
});

ng-linkの設定も下記のように[name,{paramKey:paramValue}]のようにする必要があります。

<a ng-link="['Detail',{id:100}]">id:100をわたす</a>

パラメーターを受け取る

ページを切り替えた際に連携されたパラメータは$routerOnActivateで取得することができました。

app.component('child1',{
	controller:function(){
		this.$routerOnActivate = function(next,prev){
			//next ・・・ページ遷移して表示したページ
			//prev ・・・ページ遷移元のページ
			
			//child2/:idで、ng-link="['Home',{id:10}]"の場合
      		console.log(next.params.id);//10     		
    	};
	}
});

$routerOnActivate　・・・　遷移で入ってきた場合に発火
$routerOnDeactivate　・・・　遷移で出いった場合に発火

終わり

ui routerのほうが使い慣れているので、あまりComponent Routerの良さがわかりませんが、
2.0への練習と思いがんばって覚えたいと思います。
でも2.0とも書き方が少し違うみたいです。。。