かずきのBlog@hatena

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

ルート定義のresolve

ルート定義のwhenメソッドの第二引数のresolveでは、コントローラに注入したいデータを取得する処理を定義することが出来ます。

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

module TypeScriptAngularJSApp2 {
    angular.module("MyApp", ["ngRoute"])
        // コントローラの定義。value1とvalue2をresolveから注入してもらう
        // 今回はコントローラの定義は手抜き。
        .controller("Page1Ctrl", ($scope, value1, value2) => {
            $scope.value = value1 + value2;
        })
        .config(($routeProvider: ng.route.IRouteProvider) => {
            $routeProvider
                .when("/", {
                    // Page1Ctrlにresolveでvalue1とvalue2をresolveで取得してインジェクションする

                    // 見た目はviews/page1.html
                    templateUrl: "views/page1.html",
                    // コントローラはPage1Ctrol
                    controller: "Page1Ctrl",
                    // コントローラに設定する値を決める処理を書く
                    resolve: {
                        value1: () => "Hello",
                        value2: () => "World"
                    }
                });
        });
}

この例だとresolveに指定しているvalue1とvalue2の関数の結果がコントローラのvalue1とvalue2にわたってきます。コントローラ内では、単純に足してるだけなので、最終的な結果はHelloWorldという文字列になるという寸法です。

views/page1.htmlに{{value}}と書いておけば表示されますが、ここでは結果とHTMLは省略します。