以下の内容はhttps://blog.okazuki.jp/entry/2014/06/01/211849より取得しました。


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

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




以上の内容はhttps://blog.okazuki.jp/entry/2014/06/01/211849より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14