Использование RequireJS с TypeScript и AngularJS

Ответ 1

Я смог использовать эти 3 технологии вместе. Я добавил angular.d.ts и другие файлы из DefinitelyTyped в мой проект Visual Studio, но мне также нужно было добавить объявления модулей с помощью операторов declare module. Это потому, что определения angular из DefinitelyTyped написаны для использования без AMD/requirejs. Возможно, лучше использовать jquery и angular без AMD (загрузите его с помощью тега <script>) и используйте AMD только для модулей приложений, но в любом случае вот пример, извлеченный из моего проекта:

index.html

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

requireMain.ts

Основной файл для requirejs. Это файл TypeScript, но не использует синтаксис import и скорее использует обычный синтаксис requirejs. Он также объявляет модули angular.

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

Ответ 2

В этом сценарии, который я знаю, нет пробников, мы используем его в большом приложении. Публично у меня есть этот небольшой образец: https://github.com/basarat/TypeScriptDeepDive, который использует все три.

Чтобы помочь вам отладить, я уверен, что есть некоторая проблема с не TS, с которой вы сталкиваетесь с RequireJS + Angular. Самый простой способ сузить его - определить следующие переменные:

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

Это позволит вам использовать прямо вверх TypeScript, как если бы это был javascript, по крайней мере для requirejs/angularjs.

Затем вы можете разобраться в своих проблемах и найти определения типов для angular/requirejs.