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"
                });
        }]);
}

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

• TypeScriptとAngularJS「ページ切り替え」 - かずきのBlog@hatena