打字稿 + RequireJs + AngularJs

Question

在我的前端，我想将 typescript 与 requireJs 和 AngularJs 一起使用

我得到了使用 angularjs 的 typescript，但是当我想添加 requireJs 时，什么都没有了。我希望有人可以在这里帮助我:)

这基本上是我的结构：

在我的索引文件中，我将主文件作为我的 requireJs 起点

</script><script src="/components/requirejs/require.js" data-main="/js/main">

这是我的 main.ts

///<reference path="types/collection.d.ts"/>

require.config({
    baseUrl: '/js/',
    paths: {
        angular: '/components/angular/angular',
        angularRoute: '/components/angular-route/angular-route'
    },
    shim: {
        'angular': {'exports': 'angular'},
        'angularRoute': ['angular']
    },
    priority: [
        'angular'
    ]
});

require( [
    'angular',
    'app/appsetup'
], function(angular, app) {
    'use strict';
    $(document).ready(function () {
        var $html = $('html');
        angular.bootstrap($html, [app.app['name']]);
    });
});

最后但并非最不重要的是我的 appsetup 文件，我正在加载我的应用程序：

///<reference path="../types/collection.d.ts"/>
/// <amd-dependency path="angular"/>

import controller = require("./../controllers/home/index");
import angular = require("angular");

export var app = angular.module('app', ['ngRoute'])
                        .controller('app.controllers.home.index', controller.HomeController);

return app;

Webstorm 也在 require 语句中强调了 angular 并说它找不到它。 目前我收到此错误：

未捕获的错误：[$injector:modulerr] 无法实例化模块应用程序 由于：错误：[$injector:nomod] 模块“应用程序”不可用！你 要么拼错了模块名称，要么忘记加载它。如果注册 一个模块确保你指定de......0）

你们知道我做错了什么吗？或者您是否有一些页面链接，我可以在其中看到您如何使用这 3 种技术为大型项目进行开发？

Answer 1

当 typescript 编译时，它会根据 import 或 export 的存在创建 define() 函数（对于 requirejs 或 commonjs）。但请注意，导入和导出仅适用于打字稿模块而不是简单的 js 文件。 你可以这样做

import myimportmodule = require("myimportmodule");

你的导入模块在哪里

export module myimportmodule
{
   export class Test
   {}
}

而且你不能这样做。

import angular = require("angular");

只是因为 angular.js 不是打字稿模块。

看看下面的代码

/**
 * Created by Costa on 4/19/2014.
 */
///<reference path="../ts_references/reference.ts"/>


///<amd-dependency path="angular"/>

//register controllers

import ImportMainCtrl = require("controllers/import/importMainCtrl");
export module Controllers
{

    var angular:ng.IAngularStatic = require("angular");
    var ControllersAM:ng.IModule;
    ControllersAM = angular.module('controllers', []);
    ControllersAM.controller(ImportMainCtrl);
}

注意到这一行了吗？

///<amd-dependency path="angular"/>

它会在define函数中添加一个依赖，所以js文件看起来像这样：

/**
* Created by Costa on 4/19/2014.
*/
///<reference path="../ts_references/reference.ts"/>
define(["require", "exports", "controllers/import/importMainCtrl", "angular"], function(require, exports, ImportMainCtrl) {
    (function (Controllers) {
        var angular = require("angular");
        var ControllersAM;
        ControllersAM = angular.module('controllers', []);
        ControllersAM.controller(ImportMainCtrl);
    })(exports.Controllers || (exports.Controllers = {}));
    var Controllers = exports.Controllers;
});
//# sourceMappingURL=controllers.js.map

这就是你需要这个的原因

var angular:ng.IAngularStatic = require("angular");

访问角度功能。 希望有帮助。 已编辑---- 或者，如果您真的想像这样导入它，您可以在 angular.d.ts 或另一个 .d.ts 文件中执行以下操作

declare module 'angular'{
    export var angular:ng.IAngularStatic;
}

这将创建一个内部带有 var angular 的外部模块声明并将其导出。