Question

在我的前端，我想使用带有requireJs和AngularJs的打字稿

我使用angularjs工作的打字稿，但是当我想添加requireJs时，没有任何工作了。我希望有人可以在这里帮助我:)。

这基本上是我的结构：

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

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

这是我的主要内容。

///<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语句中强调了角度，并表示无法找到它。目前我收到此错误：

未捕获错误：[$ injector：modulerr]无法实例化模块应用由于：错误：[$ injector：nomod]模块＆＃39; app＆＃39;不可用！您要么错误拼写模块名称，要么忘记加载它。如果注册模块确保您指定de ...... 0）

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

Answer 1

当typescript编译时，它会根据导入或导出的存在创建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 inside的外部模块声明并将其导出。

打字稿+ RequireJs + AngularJs

1 个答案: