AngularJS $ routeProvider模块的TypeScript示例

Question

我目前正在编写一个使用AngularJS的简单couchapp,并决定使用TypeScript

我基于AngularJS angular-phonecat教程.我将大部分应用程序转换为惯用的TypeScript.我的基础是pwalat/Piotr.Productlist第1位,但它们仅涵盖控制器和模型.

我正在努力弄清楚如何为角度路由器创建正确的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 {}某种形式？

Answer 1

我还没有查找 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]);