Question

在使用RequireJS时，我正试图在TypeScript中定义一个Angular模块。一直在寻找一个解决方案，同时花费数天时间试图弄清楚这一切无济于事。请帮忙，我很困惑！

我不使用Visual Studio，而是使用WebStorm。但这并不重要。我使用的是TS 9.1，AngularJS 1.0.7，RequireJS 2.1.8。我也尝试过使用DefinitelyTyped的angular.d.td，但它并没有帮助。

有没有人有一个简单的app角度应用程序模块的例子用于app init，另一个TS角度模块有一个控制器，加载RequireJS，引用“DefinitelyTyped / angularjs / angular.d.ts”，并调用' angular.module'定义自己，然后在网页中引用控制器？

请帮助....我正在使用TypeScript，RequireJS，AngularJS模块地狱。

Answer 1

我能够将这3种技术结合使用。我将来自DefinitelyTyped的angular.d.ts和其他文件添加到我的Visual Studio项目中，但我还需要使用declare module语句添加模块声明。这是因为DefinitelyTyped的角度定义是为没有AMD / requirejs而使用而编写的。也许最好在没有AMD的情况下使用jquery和angular（使用<script>标签加载它）并且仅将AMD用于应用程序模块，但无论如何这里是从我的项目中提取的示例：

的index.html

<script src="webjars/requirejs/2.1.11/require.js" data-main="js/requireMain"></script>

requireMain.ts

requirejs的主文件。它是TypeScript文件，但不使用import语法，而是使用通常的requirejs语法。它还声明了角度模块。

require.config({
    baseUrl: '../js',
    paths: {
        'jquery': '../webjars/jquery/1.11.0/jquery',
        'angular': '../webjars/angularjs/1.2.16/angular',
        'angular-route': '../webjars/angularjs/1.2.16/angular-route',
        'angular-resource': '../webjars/angularjs/1.2.16/angular-resource',
        'angular-ui-bootstrap': '../webjars/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls',
    },
    shim: {
        'jquery': { exports: 'jquery' },
        'angular': { exports: 'angular', dep: ['jquery'] },
        'angular-route': { exports: 'angular-route', deps: ['angular'] },
        'angular-resource': { exports: 'angular-resource', deps: ['angular'] },
        'angular-ui-bootstrap': { exports: 'angular-ui-bootstrap', deps: ['angular'] },
    },
});

// TypeScript declarations useful for importing angular modules
declare module 'angular' {
    var angular: ng.IAngularStatic;
    export = angular;
}
declare module 'angular-route' {
}
declare module 'angular-resource' {
}
declare module 'angular-ui-bootstrap' {
}

require(['jquery', 'angular', 'angular-route', 'angular-resource', 'angular-ui-bootstrap', 'bootstrap', 
    'application', 'routes'],
    function ($: JQueryStatic, angular: ng.IAngularStatic, angularRoute, angularResource, angularUiBootstrap,
        application, routes) {
        $(function () {
            angular.bootstrap(document, ['application']);
        });
    });

application.ts

import angular = require('angular');
import angularRoute = require('angular-route');
import angularResource = require('angular-resource');
import angularUiBootstrap = require('angular-ui-bootstrap');

var application = angular.module('application', ['ngRoute', 'ngResource', 'ui.bootstrap']);
export = application

routes.ts

import application = require('application');
import myModule = require('myModule');

application.config(function ($routeProvider) {
    $routeProvider.
        when('/myPage', { controller: myModule.MyPageCtrl, templateUrl: 'partials/myPage.html' }).
        otherwise({ redirectTo: '/myPage' });
});

myModule.ts

import application = require('application');
import angularUiBootstrap = require('angular-ui-bootstrap');
import myService = require('myService');

export interface MyPageCtrlScope {
    someData: string;
    someAction: () => void;
}

export class MyPageCtrl {

    constructor(public $scope: MyPageCtrlScope, private PersonService: myService.PersonResourceClass, private $modal: ng.ui.bootstrap.IModalService) {

        PersonService.additionalAction({}).$promise.then(
            (person) => {
                this.$scope.someData = person.email;
            });

        $scope.someAction = this.someAction.bind(this);
    }

    someAction() {
        this.$modal.open({
            templateUrl: 'dialog.html'
        }).result.then(
            () => {
                this.$scope.someData = 'something else';
            });
    }

}

myService.ts

import application = require('application');
import angularResource = require('angular-resource');

export interface Person {
    id?: number;
    email?: string;
}

export interface PersonResource extends Person, ng.resource.IResource<PersonResource> {
}

export interface PersonResourceClass extends ng.resource.IResourceClass<PersonResource> {
    additionalAction(person: Person): PersonResource;
}

application.factory('PersonService', function ($resource: ng.resource.IResourceService, apiUrl: string): PersonResourceClass {
    return <PersonResourceClass> $resource(apiUrl + '/person/:id', { id: "@id" }, {
        'additionalAction': { method: 'POST', url: apiUrl + '/person/:id/additionalAction' },
    });
});

Answer 2

我知道这个场景中没有停止，我们在内部使用大型应用程序。公开地我有这个小样本：https://github.com/basarat/TypeScriptDeepDive使用全部三个。

为了帮助您调试，我确信您在使用RequireJS + Angular时遇到了一些非TS问题。缩小范围的最简单方法是定义以下变量：

declare var angular:any;
declare var define:any; 
declare var require:any;

这将允许您直接使用TypeScript，就像它是javascript一样，至少对于requirejs / angularjs。

然后，您可以解决您的问题并提取angular / requirejs的类型定义。

将RequireJS与TypeScript和AngularJS一起使用

2 个答案: