9

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

我基于 AngularJS angular-phonecat 教程。我已将大部分应用程序转换为惯用的 TypeScript。我的基础是 pwalat / Piotr.Productlist bits 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 {}某种形式？

4

4 回答 4

4

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

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

...在这种情况下，他们对传递给 config 的 any 数组中的初始字符串进行了某种强制转换，以避免 Typescript 似乎在确定要使用哪个版本的配置时遇到的麻烦（.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 回答
1

你也可以使用 ng.route.IRouteProvide

于 2015-07-08T14:56:03.907 回答
1

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

interface IRouteParams extends ng.route.IRouteParamsService {
userId: number;

}

于 2018-10-11T18:33:55.290 回答
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 回答