Typoskript + RequireJs + AngularJS

Question

In meinem Front-End Ich möchte Typoskript verwenden, um mit requireJs und AngularJS

Ich habe Typoskript mit AngularJS arbeiten, aber wenn ich will, ist mehr funktioniert requireJs nichts hinzuzufügen. Ich hoffe, dass mir jemand helfen kann hier :)

Dies ist im Grunde meine Struktur:

In meiner Indexdatei Ich bin beziehen die Hauptdatei als meine requireJs Ausgangspunkt

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

Das ist mein Hauptteil.

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

Last aber nicht zuletzt meine AppSetup Datei, wo ich meine app bin Laden:

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

Auch unterstreicht WebStorm Winkel in der Erklärung bedürfen und sagt, dass es cant finden. Derzeit erhalte ich diese Fehlermeldung:

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)

Wissen Sie, Jungs, was ich falsch mache? Oder haben Sie vielleicht Links zu Seiten, auf denen ich sehen kann, wie Sie mit diesen 3 Technologien für große Projekte entwickeln können?

Answer 1

Wenn das Typoskript kompiliert wird, erstellt es die Funktion define() (entweder requirejs oder commonjs) basierend auf dem Vorhandensein von Import oder Export. Beachten Sie jedoch, dass Import und Export nur für Typoskript-Module und nicht für einfache js-Dateien funktionieren. Sie können so etwas tun diese

import myimportmodule = require("myimportmodule"); 

Wo Ihr Importmodul

export module myimportmodule 
{ 
    export class Test 
    {} 
} 

war Und man kann nicht etwas tun.

import angular = require("angular"); 

einfach weil angular.js kein Typoskript-Modul ist.

Blick auf den Code unten

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

diese Linie Hinweis?

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

wird es eine Abhängigkeit in die Funktion definieren hinzufügen, damit die js-Datei wie folgt aussieht:

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

Das ist, warum müssen Sie diese

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

Winkel Funktionalität zuzugreifen. Hoffe, dass hilft. Bearbeitet ---- Oder Sie können Folgendes in entweder angular.d.ts oder einem anderen .d tun.ts-Datei, wenn Sie es wirklich wie diese

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

importieren mögen diese eine externe Modul Deklaration mit dem var Winkel innen und exportiert es schaffen.