かずきのBlog@hatena

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

ルート定義の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は省略します。