かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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

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