かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

TypeScriptとAngularJS「コントローラ起点の画面遷移」

ng.ILocationServiceを使います。

ルートの定義

$locationでng.ILocationServiceをコントローラにインジェクションできるので、そいつのpathメソッドにURLを指定することで画面遷移が出来ます。

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

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

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

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

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

    // モジュールを定義。ルート定義をするのでngRouteを忘れずに
    angular.module("MyApp", ["ngRoute"])
        // 上で作ったコントローラの登録
        // $locationで画面遷移を行うILocationServiceをインジェクションする
        .controller("Page1Ctrl", ["$scope", "$location", Page1Ctrl])
        .controller("Page2Ctrl", ["$scope", "$location", Page2Ctrl])
        // ルートの定義
        .config(["$routeProvider", ($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"
                });
        }]);
}

ルート定義については、前に書いたのでそちらを見てください。