Angular JS

SPAにおける盲点 AngularJS ページ遷移

  • このエントリーをはてなブックマークに追加
  • LINEで送る
AngularJSでWebシステム開発

myメモ。(動作確認無)
AngularJSというフレームワークは、SPA(シングルページアプリケーション)という仕組みらしい。

これは何かというと、これまではページごとにhtmlファイルがあったのだが、1つのhtmlファイルで全部書いてしまうというもの。ページ遷移は擬似的なもので、実際はhtmlは1個だけ。

これまでのマルチページ?な感覚で作ってみると色々落とし穴があった。
特に困ったのが初期化処理。
ページをロードした時点で初期化して欲しいのだが、AngularJSはページを表示すると、関連するコントローラを1回だけ初期化して2回目移行は初期化処理をしてくれないようだ。

例えばページAとページBがあったとして、
ページAからページBへ遷移すると、ページBのコントローラが表示されたタイミングで1回だけ読み込まれる。
ページBからページAへ戻り、またページBへ遷移すると、コントローラは何もしてくれないようだ。
HTMLの方

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
    <!-- Aページ -->
    <script id="pageA.html" type="text/ng-template">
    <div ng-controller="pageACtrl">
      <ion-content>
         <!--ここにページAの中身を書きます -->
      </ion-content>
    </div>
    </script>
    <!-- Bページ -->
    <script id="pageB.html" type="text/ng-template">
    <div ng-controller="pageBCtrl">
      <ion-content>
         <!--ここにページBの中身を書きます -->
      </ion-content>
    </div>
    </script>

JavaScriptの方

//前略〜
.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state('pageA', {
      url: "/",
      templateUrl: "pageA.html",
    })
    .state('pageB', {
      url: "/pageB",
      templateUrl: "pageB.html",
    })
//中略〜

.controller('pageACtrl', function($scope) {

})

.controller('pageBCtrl', function($scope) {
  $scope.hoge = 100;
  //$scope.hogeを足したり引いたり何かする
})

ページを表示する度に初期化処理をしたかったので、結構困った。
AからBへ遷移
BからAへ遷移
そしてAからBへ遷移 ←ここで$scope.hogeが初期化されない

感覚的に、昔ながらの記述法が頭に残ってるのです。遷移すれば初期化してくれると勘違いしてた。
コントローラは1回しか読み込んでくれない。繰り返し行う処理は関数にしてイベントとかで呼びださなきゃダメみたい。

とりあえずの解決策として、以下のとおりになりました


.controller('pageBCtrl' , function($scope ,$rootScope ) {

  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    if(toState.templateUrl == "pageB.html"){
      $scope.reStart();
    }
  })


  $scope.reStart = function(){
    console.log("ページが読まれたよ");
    //ここで初期化処理をすると、ページがロードされる度に実行される。
    //例えば $scope.hoge = 100とか
  }
//後略〜

ページBが読み込まれる度に、$scope.reStartが実行されるようになった。ここに初期化処理を記述すれば、これまでのように、ページがロードされる度に、初期化処理がされます。

$stateChangeStartは、多分ui-routerで、ページ遷移のイベントを検知してくれるんだと思う。

正直AngularJSのページ遷移はわかりにくい。
標準搭載されているページ遷移はできることが少ないので、ui-routerを使いましょう と、色々なサイトや書籍でみかけるけど、ui-routerがわかりにくい。最近ようやく少しずつ少しずつ理解できてきた気がします。

ui-routerの日本語説明してくれてます。ありがたい。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

AngularJS+BootStrapでサロンカルテを作りました

【作品例 サロンカルテ】
サロンカルテはAngular JSとBootStrap3を使って開発されたWebクラウドシステムの1つです。
強力なデータバインド機能のおかげで、お客様のカルテデータをサーバから取得、ng-repeatを使うだけで簡単に画面へ出力できたり、BootStrapで手軽におしゃれな画面が実装できます

サロンカルテのホームページ