Question

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

我基于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

angular-vs团队有一些非常值得关注的东西：

https://github.com/kriasoft/angular-vs/blob/master/App/Scripts/App.ts

...在这种情况下，它们会对传递给config的任何数组中的初始字符串进行一种强制转换，以避免Typescript似乎弄清楚要使用哪个版本的配置（。 config（＆lt; any＆gt;'$ 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 declations源：

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

..然后在路由文件的顶部引用它们：

/// <reference path="../AngularTS/angular.d.ts" />
/// <reference path="../AngularTS/ng/route.d.ts" />

Answer 2

您也可以使用ng.route.IRouteProvide

Answer 3

我在这里找到了答案：http://morrisdev.com/2016/01/angular-controllers-with-typescript/

-dontobfuscate

}

Answer 4

我没有查找AngularJS以查找所有细节，但希望这将有助于您声明现有库的过程，这比仅仅为您提供AngularJS定义更有用。

我已根据您的用法创建了这些定义。重要的是......

Angular定义描述了您可以期望在Angular类的实例上调用的函数。
RouteProvider定义描述了您可以在RouteProvider类的实例上调用的函数
然后我声明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]);

AngularJS $ routeProvider模块的TypeScript示例

4 个答案: