javascript - Typescript + RequireJs + AngularJs

I mitt front-end vill jag använda TypeScript med requireJs och AngularJs

Jag fick TypeScript att fungera med AngularJS, men när jag vill lägga till RequireJs fungerar ingenting längre. Jag hoppas att någon kan hjälpa mig här :)

Detta är i princip min struktur:

I min indexfil refererar jag till huvudfilen som min RequireJs-startpunkt

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

Detta är min 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']]);
    });
});

Sist men inte minst min appsetup-fil, där jag laddar min app:

///<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;

Även Webstorm understryker angular i require-satsen och säger att det inte kan hitta det. För närvarande får jag detta fel:

Ohanterat fel: [$injector:modulerr] Kunde inte instansiera modul app på grund av: Fel: [$injector:nomod] Modulen 'app' är inte tillgänglig! Du stavade antingen fel på modulnamnet eller glömde att ladda den. Om du registrerar en modul, försäkra dig om att du specificerar de......0)

Vet ni vad jag gör fel? Eller har ni kanske några länkar till sidor där jag kan se hur man kan utveckla med dessa 3 teknologier för stora projekt?

Svar #1

När TypeScript kompilerar skapar det define()-funktionen (för antingen requirejs eller commonjs) baserat på förekomsten av antingen import eller export. Men observera att import och export bara fungerar på TypeScript-moduler, inte vanliga JS-filer. Du kan göra något som detta

import myimportmodule = require("myimportmodule");

Var din importmodul var

export module myimportmodule
{
   export class Test
   {}
}

Och du kan inte göra något sådant.

import angular = require("angular");

enbart för att angular.js inte är en TypeScript-modul.

titta på koden nedan

/**
 * 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);
}

Lägg märke till den här raden?

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

det kommer att lägga till ett beroende i define-funktionen så att js-filen ser ut så här:

/**
* 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

Det är därför du behöver detta

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

För att få åtkomst till Angular-funktionalitet. Hoppas det hjälper. Redigerad---- Eller så kan du göra följande i antingen angular.d.ts eller en annan .d.ts-fil om du verkligen vill importera det på detta sätt

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

detta kommer att skapa en extern moduldeklaration med var angular inuti och exportera den.

Relaterade artiklar