javascript - typescript + RequireJs + AngularJs

Question

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

我的 typescript 可以与 angularjs 一起使用，但是当我想添加 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 并表示它无法找到它。目前我收到此错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the de......0)

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

Answer 1

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

import myimportmodule = require("myimportmodule");

你的导入模块在哪里

export module myimportmodule
{
   export class Test
   {}
}

你不能做这样的事情。

import angular = require("angular");

只是因为 angular.js 不是 typescript 模块。

看下面的代码

/**
 * 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 功能。希望有所帮助。编辑----或者，如果你真的想像这样导入它，你可以在 angular.d.ts 或另一个 .d.ts 文件中执行以下操作

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

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