打字稿+ RequireJs + AngularJs

Question

在我的前端,我想使用带有requireJs和AngularJs的typescript

我得到了使用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语句中的angular,并说它无法找到它.目前我收到此错误:

未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块应用程序:错误:[$ injector:nomod]模块'app'不可用!您要么错误拼写了模块名称,要么忘记加载它.如果注册模块,请确保指定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的外部模块声明并将其导出.