UI Routerで遷移先ページにデータを渡す簡単な方法

これまでのWeb開発技術では、ページ遷移時に遷移先ページヘデータを渡すには、GETやPOSTを使ってました。
PHPと相性がよくて、 $_POST とか $_GETで取得できたので、便利でした。
しかしAngular JSはSPA(シングル・ページ・アプリケーション)です。
いちいちページのデータをサーバに取りに行くのではなく、最初に全部のページデータをロードしてしまうので、考え方が今までとは異なります。
SPAのページ遷移は疑似的な遷移であり、切り替わったように見えるだけです。AngularJSではページ遷移という表現が適切ではないのかもしれませんが、あえてページ遷移と呼称します。

ページ遷移とUI-router

例えば、ng-repeatでデータを列挙し、その中の1つをタップすると、タップしたデータの詳細説明ページへ遷移したいとき。
以下のように書くことで実現できます

<!-- 前略 ここはページ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":"人気NO1"}
  ];
})

.controller('pageBCtrl', function($scope , $stateParams) {
  $scope.info = $stateParams.msg;  //これでURLにセットされた値(msg)が取得できる
  console.log($scope.info);
})

UI Routerはパラメータがいっぱいあってちょっととっつきにくいですね。
通常のGETなら、URLのおしりに?をつけるだけで簡単だったのですが、色々回りくどくて大変です。
でもng-repeatと組み合わせると便利ですね。

ui-routerのおまけ

URLパラメータを2つ以上送る場合は、次のようになります
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;
})