AngularJSとTypeScript「サービスを共有してページ間のデータ共有」

サービスのインスタンスは1つ。ということは、同じサービスをページ間で共有すればデータを渡すことが出来るということです。ということでやってみました。

/// <reference path="scripts/typings/angularjs/angular.d.ts" />
/// <reference path="scripts/typings/angularjs/angular-route.d.ts" />

module TypeScriptAngularJSApp2 {
    // データ共有用のサービス
    class SampleService {
        key: string;
    }

    // Page1用のスコープ
    interface Page1Scope extends ng.IScope {
        title: string;
        navigate(): void;
    }

    // Page1用のコントローラ
    class Page1Ctrl {
        constructor($scope: Page1Scope, $location: ng.ILocationService, sampleService: SampleService) {
            // タイトルと画面遷移を行う処理を定義する
            $scope.title = "Page1";
            $scope.navigate = () => {
                sampleService.key = Date();
                $location.path("/Page2");
            };
        }
    }

    // Page1と基本同じなのでコメントは省略
    interface Page2Scope extends ng.IScope {
        title: string;
        navigate(): void;
    }

    class Page2Ctrl {
        constructor($scope: Page2Scope, $location: ng.ILocationService, sampleService: SampleService) {
            $scope.title = "Page2 - " + sampleService.key;
            $scope.navigate = () => {
                $location.path("/Page1");
            }
        }
    }

    // モジュールを定義。ルート定義をするのでngRouteを忘れずに
    angular.module("MyApp", ["ngRoute"])
        // サービスの登録
        .factory("sampleService", () => new SampleService())
        // 上で作ったコントローラの登録
        // $locationで画面遷移を行うILocationServiceをインジェクションする
        .controller("Page1Ctrl", Page1Ctrl)
        .controller("Page2Ctrl", Page2Ctrl)
        // ルートの定義
        .config(($routeProvider: ng.route.IRouteProvider) => {
            $routeProvider
                .when("/Page1", {
                    controller: "Page1Ctrl",
                    templateUrl: "views/page1.html"
                })
                .when("/Page2", {
                    controller: "Page2Ctrl",
                    templateUrl: "views/page2.html"
                })
                .when("/", {
                    controller: "Page1Ctrl",
                    templateUrl: "views/page1.html"
                });
        });
}

ソースコードをminifyして、パラメータ名が変わらなかったら、パラメータ名で勝手にDIしてくれるみたいなので、今回はそれを使ってコントローラにスコープやらなんやらをインジェクションしてもらうようにしています。