9

私は現在、AngularJS を使用する単純なソファアプリを作成しており、TypeScript を使用することにしました。

AngularJS angular-phonecat チュートリアルに基づいています。ほとんどのアプリケーションを慣用的な TypeScript に変換しました。これは pwalat / Piotr.Productlist ビット1に基づいていますが、それらはコントローラーとモデルのみをカバーしています。

angularルーターに相当する正しいTypeScriptを作成する方法を理解するのに苦労しています$routeProvider

    //app/js/app.js[2]

    angular.module('phonecat', []).
      config(['$routeProvider', function($routeProvider) {
      $routeProvider.
          when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
          when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
          otherwise({redirectTo: '/phones'});
    }]);

私はそれがmodule {}ある種のものである必要があることを知っていますか？

4

4 に答える 4

4

angular-vs チームには、一見の価値のあるものがいくつかあります。

https://github.com/kriasoft/angular-vs/blob/master/App/Scr​​ipts/App.ts

...この場合、config に渡された any 配列の最初の文字列に対して一種のキャストを行い、Typescript がどのバージョンの config を使用するかを判断しているように見える問題を回避します ( .config(<any>' $routeProvider'... )。

例：

angular
.module('phonecat', [])
.config([
    <any>'$routeProvider', 
    ($routeProvider: angular.RouteProvider) {
        $routeProvider
            .when('/phones', { templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl })
            .when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl })
            .otherwise({ redirectTo: '/phones' });
    }
]);

...ここから AngularJS TypeScript 宣言ソースをインストールしたことを言及する必要があります。

http://nuget.org/packages/Schmulik.AngularTS

..そして、ルーティング ファイルの先頭でそれらを参照します。

/// <reference path="../AngularTS/angular.d.ts" />
/// <reference path="../AngularTS/ng/route.d.ts" />
于 2012-12-18T19:42:20.093 に答える
0

すべての詳細を調べるために AngularJS を調べたわけではありませんが、AngularJS の定義を提供するだけでなく、既存のライブラリを宣言するプロセスに役立つことを願っています。

私はあなたの使用法に基づいてこれらの定義を作成しました。重要なビットは...

  1. Angular の定義では、Angular クラスのインスタンスで呼び出すことが期待できる関数について説明しています。

  2. RouteProvider 定義は、RouteProvider クラスのインスタンスで呼び出すことが期待できる関数を記述します

  3. 次に、前の手順で定義したクラスのインスタンスであることを宣言angularし$routeProvider、コンパイラに伝えます。

免責事項：例の引数が何を表しているのかわからないため、次のような名前を使用param1しましたが、実際に期待されるもの、または実際に何であれ、これらを反映するように更新する必要がfilePath: stringあります。

次に例を示します。

// I don't know what the param names should be, so they
// need to be changed to sensible names
declare class Angular {
    module (param1: string, param2: any[]) : Angular;
    config(param1: any[]) : Angular;
}

declare class RouteProvider {
    when(param1: string, param2: any) : RouteProvider;
    otherwise(param1: any) : RouteProvider;
}

declare var angular: Angular;
declare var $routeProvider: RouteProvider;

// These are just because I don't know where you define them...
declare var PhoneDetailCtrl: any;
declare var PhoneListCtrl: any;

function myFunction ($routeProvider: RouteProvider) {
    $routeProvider.
    when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
    when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
    otherwise({redirectTo: '/phones' });
}

angular
    .module('phonecat', [])
    .config(['$routeProvider', myFunction]);
于 2012-11-15T14:27:44.870 に答える