使用带有打字稿和AngularJS RequireJS [英] Using RequireJS with TypeScript and AngularJS

问题描述

我要撕碎了我的脑袋想同时使用RequireJS在打字稿，以确定一个角模块。到处都找过了解决方案，同时花费几天试图找出这一切都无济于事。请帮帮忙，我很困惑！

I'm about to rip my brains out trying to define an Angular module in TypeScript while using RequireJS. Have looked all over for a solution while spending days trying to figure it all out to no avail. Please help, I'm so confused!

我不使用Visual Studio，而是WebStorm。这应该不是真的不过没关系。
我使用TS 9.1，AngularJS 1.0.7，2.1.8 RequireJS。
我已经使用DefinitelyTyped的angular.d.td也尝试过，但它没有帮助。

I'm not using Visual Studio, but rather WebStorm. This shouldn't really matter however. I'm using TS 9.1, AngularJS 1.0.7, RequireJS 2.1.8. I've also tried using DefinitelyTyped's angular.d.td, but it's not helping.

有没有人有应用程序初始化一个TS角应用模块的一个简单的例子，与另一TS，有一个控制器，装载有RequireJS，引用DefinitelyTyped / angularjs / angular.d.ts，并呼吁'角模块angular.module来定义自己，然后引用在网页中的控制器？

Does anyone have a simple example of a TS angular app module for app init, with another TS angular module that has a controller, being loaded with RequireJS, referencing "DefinitelyTyped/angularjs/angular.d.ts", and calling 'angular.module' to define themselves, and then referencing the controller in a web page?

请帮助....我为你燃烧的打字稿，RequireJS，AngularJS模块地狱。

Please, help.... I'm burning in TypeScript, RequireJS, AngularJS module hell.

推荐答案

我能够利用这些技术3一起。我加了 angular.d.ts 从DefinitelyTyped和其他文件到我的Visual Studio项目，但我还需要使用声明模块来添加模块声明语句。这是因为从DefinitelyTyped角度定义为没有AMD / requirejs使用写入。也许是更好地使用jQuery和角度，而不AMD（使用加载它＆LT;脚本＆GT; 标签），并使用AMD只为应用模块，但无论如何我这里是从我的项目中提取

I was able to use these 3 technologies together. I added angular.d.ts and other files from DefinitelyTyped to my Visual Studio project but I also needed to add module declarations using declare module statements. That's because angular definitions from DefinitelyTyped are written for usage without AMD/requirejs. Maybe it is better to use jquery and angular without AMD (load it using <script> tag) and use AMD only for application modules but anyway here is example extracted from my project:

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

requireMain.ts

有关requirejs主文件。这是打字稿文件，但不使用导入语法和使用，而平时requirejs语法。它也声明角模块。

requireMain.ts

Main file for requirejs. It is TypeScript file but doesn't use import syntax and rather uses usual requirejs syntax. It also declares angular modules.

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

这篇关于使用带有打字稿和AngularJS RequireJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！