これまでのWeb開発技術では、ページ遷移時に遷移先ページヘデータを渡すには、GETやPOSTを使ってました。
PHPと相性がよくて、 $_POST とか $_GETで取得できたので、便利でした。
しかしAngular JSはSPA（シングル・ページ・アプリケーション）です。
いちいちページのデータをサーバに取りに行くのではなく、最初に全部のページデータをロードしてしまうので、考え方が今までとは異なります。
SPAのページ遷移は疑似的な遷移であり、切り替わったように見えるだけです。AngularJSではページ遷移という表現が適切ではないのかもしれませんが、あえてページ遷移と呼称します。
ページ遷移とUI-router
例えば、ng-repeatでデータを列挙し、その中の１つをタップすると、タップしたデータの詳細説明ページへ遷移したいとき。
以下のように書くことで実現できます
<!-- 前略 ここはページAです -->
<script id="pageA.html" type="text/ng-template">
<div ng-controller="pageACtrl">
<div class="list">
<a ng-repeat="i in Data" class="item" ui-sref="pageB({msg:i.msg})">
<!--データの項目名を書く -->
{{i.title}}
</a>
</div>
</script>
<!-- 中略 ここからはページBです -->
<script id="pageB.html" type="text/ng-template">
<div ng-controller="pageBCtrl">
<p>{{info}}</p>
</div>
</script>
angular JS
//前略
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('pageA', {
url: "/",
templateUrl: "pageA.html",
})
.state('pageB', {
url: "/pageB/{msg}", //ここで、{msg}に、htmlのリンク設定した{msg:i.msg}が格納される
templateUrl: "pageB.html",
})
})
//中略
.controller('pageACtrl', function($scope) {
$scope.Data = [
{"title":"商品A" , "msg":"これは耐熱性のある商品"},
{"title":"商品B" , "msg":"廉価版です"},
{"title":"商品C" , "msg":"人気NO１"}
];
})
.controller('pageBCtrl', function($scope , $stateParams) {
$scope.info = $stateParams.msg; //これでURLにセットされた値(msg)が取得できる
console.log($scope.info);
})
UI Routerはパラメータがいっぱいあってちょっととっつきにくいですね。
通常のGETなら、URLのおしりに?をつけるだけで簡単だったのですが、色々回りくどくて大変です。
でもng-repeatと組み合わせると便利ですね。
ui-routerのおまけ
URLパラメータを２つ以上送る場合は、次のようになります
HTML
<a ng-repeat="i in Data" class="item" ui-sref="show({id:i.id,msg:i.msg})">
<!-- カンマで区切って列挙していく -->
Angular JS
.state('pageB',{
url:'/pageB/{id}/{msg}',
templateUrl:"show.html"
})
//中略
.controller('pageBCtrl', function($scope , $stateParams) {
$scope.id = $stateParams.id;
$scope.msg = $stateParams.msg;
})
