AngularJS$routeProvider模块的TypeScript示例

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

我基于AngularJS AngularPhoneCAT教程。我已将大部分应用程序转换为惯用的TypeScript。我是基于pwalat/Piotr.Productlist位的，但是它们只涉及控制器和模型

我正在努力找出如何为angular router

$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'});
    }]);

---

我知道它需要是某种类型的

模块{}

？

我还没有查找AngularJS以了解所有细节，但希望这将有助于您声明现有库的过程，这比仅给出AngularJS定义更有用

我根据您的使用情况创建了这些定义。重要的是

角度定义描述了可以在角度类的实例上调用的函数

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]);

---

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

…在本例中，它们对传递给config的any数组中的初始字符串执行某种类型的强制转换，以避免Typescript在确定要使用哪个版本的config（.config）时遇到的麻烦(

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

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

//
/// 

您也可以使用ng.route.IRouteProvide

我在这里找到了答案：

---

}

Hi Steve，我正在寻找一种更为类型化的脚本方法，类似于

module phonecat{export class RouteProvider{}}

您可能还想看看Visual Studio的AngularJS初学者工具包项目：这不应该是类型化脚本形式吗？比如module{}等等？这正是我的工作原理。在我的打字中根本找不到angular.RouteProvider命名空间

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

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