2015-08-26 5 views
10

Questa è l'index.html con angolare alpha35:come utilizzare Angular2, systemjs localmente senza node.js/NPM

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <base href="/"> 
     <title>APP Ang2</title> 
     <script src="scripts/traceur-runtime.js"></script> 
     <script src="https://jspm.io/[email protected]"></script> 
     <script src="scripts/bundle35/angular2.dev.js"></script> 
     <script src="scripts/bundle35/router.dev.js"></script> 
     <meta name="viewport" content="width=device-width,initial-scale=1" /> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
    </head> 
    <body> 

     <app>Loading...</app> 

     <script>System.import('app').catch(console.log.bind(console));</script> 

    </body> 
    </html> 

e funziona bene se non v'è connessione internet e può essere caricato system.js . Se cerco di ottenere una copia locale di system.js come questo:

<script src="scripts/[email protected]"></script> 

poi non funziona nulla, fino a quando ho messo rx.js nella cartella principale e mettere questa riga alla fine del file:

<script src="scripts/[email protected]"></script> 
</body> 
</html> 

quindi System.js funziona bene, ma in questo caso, c'è uno strano problema con i collegamenti angular2. non funzioneranno fino a quando non avrò qualche interazione con la pagina (invia un modulo, apri una selezione, fai in modo che qualche div cambi le sue dimensioni anche con la semplice nascosta, ecc.). Non appena qualcosa cambia nella pagina, tutti i binding iniziano a funzionare e la pagina viene resuscitata.

Come fare tutto questo funziona localmente senza node.js e senza connessione internet?

+0

Vorrei cambiare il tag angularjs per angular2 o qualcosa che è effettivamente correlato a angular2. Quindi, node.js è lato server, puoi servire la tua app angular2 utilizzando un semplice http. Per systemjs è una cosa complicata. Mi sono sforzato e sembra che la versione online di jspm sia diversa da quella che si ottiene dai pacchetti. Inoltre, tutto questo sarà avvolto in un modo migliore una volta che la versione finale si avvicina. Nel frattempo potresti andare con questo progetto di seed che fornisce una piccola struttura, un setup di gulp e gestisce le dipendenze: https://github.com/mgechev/angular2-seed –

+0

Grazie per il tuo commento. Ho cambiato i tag. Ho visto questo progetto di seed, ma voglio davvero fare a meno di node/gulp. E funziona senza, solo che sono dipendente da systemjs scaricato ogni volta. Proverò a verificare la versione di jspm nei pacchetti, forse se includo quello, funzionerà. Penso che non sia completamente logico che non possa fare tutto questo a livello locale. – kakaja

+0

Hai aggiunto questo? System.config ({ baseURL: '/ scripts' }); –

risposta

0

Grazie alla Arnaud Boeglin's idea di differenza nei pacchetti versione, ho controllato con es6-module-loder e per caso questa installazione funziona perfettamente (finora non ho trovato alcun problema):

<script src="scripts/traceur-runtime.js"></script> 
    <script src="scripts/es6-module-loader.js"></script> 
    <script src="scripts/[email protected]"></script> 
    <script src="scripts/bundle35/angular2.dev.js"></script> 
    <script src="scripts/bundle35/router.dev.js"></script> 

Il caricatore di modulo es6 deve trovarsi prima del systemjs nel tag <head>.

5

si dovrebbe includere la versione sfx di angolare 2 in questo modo:

<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script> 

Si noti che si tratta di un autonomo il file js è possibile scaricare in locale.

controllare questo progetto di esempio che ho fatto in github:

https://github.com/alfonso-presa/angular2-es5-sample

Modifica: selezionare questa domanda SO per ulteriori chiarimenti su ciò che sfx significa: Difference between angular.dev.js and angular.sfx.dev.js

+0

Grazie tu! È davvero interessante vedere un'installazione completamente diversa di ng2. Però, per il mio progetto mi piacerebbe ancora usare system.js – kakaja

+0

Grazie per il link al chiarimento. – kakaja