Come utilizzare Angular2 e Typescript in Jsfiddle

Domanda fittizia ...
Provo a codificare un'app angular2 (2.0.0-beta.6) in Typescript in jsfiddle.
So che non c'è altra soluzione online, ma ...
In realtà, il mio esempio è molto piccolo e il problema è in modulo di importazione:Come utilizzare Angular2 e Typescript in Jsfiddle

import {bootstrap} from 'angular2/platform/browser' 
import {Component} from 'angular2/core';

ho ottenuto il seguente errore:

Uncaught ReferenceError: System is not defined 
Uncaught ReferenceError: require is not defined

Provo ad aggiungere alcune dipendenze (richiedono, sistema ...) ma non funziona.
E non c'è più un bundle Auto-Esecuzione per la versione recente (beta-6) di Angular2 (angular2.sfx.dev.js).

Alcuni test:
https://jsfiddle.net/asicfr/q8bwosfn/1/
https://jsfiddle.net/asicfr/q8bwosfn/3/
https://jsfiddle.net/asicfr/q8bwosfn/4/
https://jsfiddle.net/asicfr/q8bwosfn/5/
https://jsfiddle.net/asicfr/q8bwosfn/6/

fonte

2016-02-12 asicfr

Plunkr è molto più conveniente per questo: http://plnkr.co/edit/duastrVR5HUgJUgr3uBf?p=info – dfsq

Per plunker, io uso [questo link] (https://angular.io/resources/live-examples/quickstart/ts/plnkr.html) da angular.io che reindirizzerà a plunker con i file appropriati già aggiunti. Aveva sempre la versione angolare più recente. convenie nt. – Abdulrahman

L'OP ha chiesto di JS Fiddle, ma dei link plunkr, questo di @Abdulrahman è il migliore perché include il routing e il nuovo '@ angular/forms' – BeetleJuice

In Plunker si può semplicemente utilizzare il menu

New > Angularjs > 2.0.x (TS)

per ottenere un minimo di applicazione Angular2 lavoro

Router

Se si desidera utilizzare il router aggiungere in config.js

'@angular/router': { 
    main: 'router.umd.js', 
    defaultExtension: 'js' 
},

<base href="."> come primo figlio nel <head> di index.html potrebbe essere necessario pure.

Per passare a HashLocationStrategy cambiamento main.ts da

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {App} from './app'; 

bootstrap(App, []) 
    .catch(err => console.error(err));

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {App} from './app'; 
import {provide} from '@angular/core' 
import {ROUTER_PROVIDERS} from '@angular/router'; 
import {LocationStrategy, HashLocationStrategy} from '@angular/common'; 

bootstrap(App, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HasLocationStrategy}]) 
    .catch(err => console.error(err));

fonte

2016-05-25 06:26:10

Ho svalutato questo perché partire dal menu Plunker è buono ma un'opzione ancora migliore è https://angular.io/resources/live-examples/quickstart/ts/plnkr.html. Viene gestito dal team Angular (non dal team Plunker) quindi è più attuale. Ad esempio al momento della stesura di questo documento è incluso il routing come così come il nuovo '@ angular/forms', nessuno dei quali ha lo spazio di lavoro predefinito' Plunker> Angularjs> 2.0 (TS) ' – BeetleJuice

è necessario anche includere il file JS SystemJS. Ho visto che ti sei perso. Tutti questi include sono necessari:

<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script> 
<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="https://code.angularjs.org/tools/typescript.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>

È inoltre necessario quindi configurare SystemJS con il seguente codice e quindi importare il modulo principale che contiene la funzione di bootstrap:

System.config({ 
    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: { 
    'app': { 
     defaultExtension: 'ts' 
    } 
    } 
}); 
System.import('app/main') 
.then(null, console.error.bind(console));

fonte

2016-02-12 20:20:41

Non funziona ... ho provato tutto con typscript, javascript ... https://jsfiddle.net/asicfr/q8bwosfn/8/ KO https://jsfiddle.net/asicfr/q8bwosfn/9/ KO https://jsfiddle.net/asicfr/q8bwosfn/10/KO https://jsfiddle.net/asicfr/q8bwosfn/11/ KO – asicfr

Honnestly, non sono molto confortevole con jsFiddle ma da quello che ho visto, dovresti definire (se possibile) un'area per JavaScript che conterrà il tuo Configurazione SystemJS e una per il contenuto di TypeScript (definizione del componente e bootstrap). È necessario essere consapevoli del fatto che, in base alla configurazione di SystemJS di cui sopra, la risoluzione del modulo sarà effettuata in base al percorso. Ciò significa che 'app/main' deve essere qualcosa che può essere risolto da jsFiddle (' app/main.ts'). Questo corrisponderebbe alla tua area TypeScript. –

Se non è possibile farlo, penso che sarà difficile usare l'applicazione Angular2 nello strumento :-( –

Se non sono legati a JS Fiddle, considerare Plunker invece. Gli sviluppatori di Angular mantengono uno spazio di lavoro ancora aggiornato con le nuove versioni di Angular allo this link.

E 'più attuale che anche proprio Angular 2 configurazione del Plunker (cui si può accedere dal menu Plunker: New > AngularJS > 2.0.x (TS)

Il rovescio della medaglia: che l'installazione è a macchina, quindi se si desidera sviluppare con vaniglia Javascript (ES5 o ES6), la soluzione migliore è utilizzare l'opzione di menu Plunker.

fonte

2016-06-25 04:41:58 BeetleJuice

Questo è meglio http://stackoverflow.com/questions/41137028/angular2-on- jsfiddle-how-to-include-ts-lima # 41139595 –

Come utilizzare Angular2 e Typescript in Jsfiddle

risposta

Problemi correlati