tipografico + RequireJs + AngularJs

Question

Nel mio front-end voglio usare dattiloscritto con requireJs e AngularJs

ho ottenuto dattiloscritto lavorare con angularjs, ma quando voglio aggiungere requireJs nulla funziona più. Spero che qualcuno mi può aiutare qui :)

Questo è fondamentalmente la mia struttura:

Nel mio file di indice sto riferisco il file principale, come i miei requireJs punto di partenza

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

Questo è il mio 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']]); 
    }); 
}); 

Ultima ma non meno importante il mio file Appsetup, dove sto caricando la mia 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; 

anche WebStorm sottolinea angolare nella dichiarazione richiedere e dice che cant trovare esso. Attualmente sto ottenendo questo errore:

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)

Sei ragazzi sanno quello che sto facendo male? O hai forse qualche link alle pagine, dove posso vedere come puoi sviluppare con queste 3 tecnologie per grandi progetti?

Answer 1

Quando dattiloscritto viene compilato, crea la funzione define() (per requirejs o commonjs) in base alla presenza dell'importazione o dell'esportazione. Ma si noti che l'importazione e l'esportazione funzionano solo su moduli dattiloscritti, non semplici file js. Si può fare qualcosa di simile

import myimportmodule = require("myimportmodule"); 

Dove il vostro modulo di importazione era

export module myimportmodule 
{ 
    export class Test 
    {} 
} 

E non si può fare qualcosa di simile.

import angular = require("angular"); 

semplicemente perché angular.js non è un modulo dattiloscritto.

un'occhiata al codice qui sotto

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

Avviso questa linea?

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

si aggiunge una dipendenza nella funzione di definire quindi il file js è simile al seguente:

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

Ecco perché avete bisogno di questo

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

per accedere alle funzionalità angolare. Spero che questo aiuti. Modificato ---- Oppure è possibile eseguire quanto segue in angular.d.ts o in un altro .d.il file ts se si vuole veramente importare in questo modo

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

questo creerà una dichiarazione modulo esterno con la var angolare interno ed esportarlo.