myメモ。（動作確認無）
AngularJSというフレームワークは、SPA（シングルページアプリケーション）という仕組みらしい。
これは何かというと、これまではページごとにhtmlファイルがあったのだが、１つのhtmlファイルで全部書いてしまうというもの。ページ遷移は擬似的なもので、実際はhtmlは１個だけ。
これまでのマルチページ？な感覚で作ってみると色々落とし穴があった。
特に困ったのが初期化処理。
ページをロードした時点で初期化して欲しいのだが、AngularJSはページを表示すると、関連するコントローラを１回だけ初期化して２回目移行は初期化処理をしてくれないようだ。
例えばページAとページBがあったとして、
ページAからページBへ遷移すると、ページBのコントローラが表示されたタイミングで１回だけ読み込まれる。
ページ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が初期化されない
感覚的に、昔ながらの記述法が頭に残ってるのです。遷移すれば初期化してくれると勘違いしてた。
コントローラは１回しか読み込んでくれない。繰り返し行う処理は関数にしてイベントとかで呼びださなきゃダメみたい。
とりあえずの解決策として、以下のとおりになりました
.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の日本語説明してくれてます。ありがたい。
