Jak używać Angular2 i maszynopisu w Jsfiddle

Dummy pytanie ...
Próbuję kodować aplikację angular2 (2.0.0-beta.6) w Maszynopisie w jsfiddle.
Wiem, że istnieje inne rozwiązanie online, ale ...
W rzeczywistości, mój przykład jest bardzo mała, a problem jest moduł importu:Jak używać Angular2 i maszynopisu w Jsfiddle

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

mam następujący błąd:

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

Próbuję dodać pewne zależności (wymagają, system ...), ale to nie działa.
I nie ma już pakietu Self-Executing dla najnowszej wersji (beta-6) Angular2 (angular2.sfx.dev.js).

Niektóre testy:
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/

Źródło

2016-02-12 asicfr

Plunkr jest o wiele wygodniejszy w tym: http://plnkr.co/edit/duastrVR5HUgJUgr3uBf?p=info – dfsq

Dla plunkera, używam [to link] (https://angular.io/resources/live-examples/quickstart/ts/plnkr.html) z angular.io, który przekieruje Cię do plunkera z już dodanymi odpowiednimi plikami, zawsze miał najnowszą kanciastą wersję. wygoda nt. – Abdulrahman

OP zapytał o JS Fiddle, ale z linkami plunkr, ten przez @Abdulrahman jest najlepszy, ponieważ zawiera routing i nowy @ @ kątowy/formularze – BeetleJuice

W Plunker można po prostu użyć menu

New > Angularjs > 2.0.x (TS)

aby uzyskać minimalną roboczą aplikacji Angular2

Router

Jeśli chcesz wykorzystać router dodać config.js

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

<base href="."> jako pierwsze dziecko w <head> z index.html może być konieczne także.

Aby przełączyć się HashLocationStrategy zmiany main.ts z

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

Źródło

2016-05-25 06:26:10

Podniosłem to, ponieważ startowanie z menu Plunkera jest dobre, ale jeszcze lepszym rozwiązaniem jest https://angular.io/resources/live-examples/quickstart/ts/plnkr.html Jest obsługiwany przez zespół Angular (a nie zespół Plunkera), więc jest bardziej aktualny. Na przykład od tego pisania obejmuje routing jako jak również nowe "@ kątowe/formularze", z których żaden nie ma domyślnego obszaru roboczego 'Plunker> Angularjs> 2.0 (TS)'. – BeetleJuice

Trzeba również zawierać plik SystemJS JS. Widziałem, że tęskniłeś. Wszystko to zawiera niezbędne są:

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

Należy również wtedy skonfigurować SystemJS z następującego kodu, a następnie zaimportować moduł główny zawierający bootstrap funkcję:

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

Źródło

2016-02-12 20:20:41

To nie działa ... Próbowałem wszystkiego z typsem, 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

Szczerze mówiąc, nie jestem zbytnio zadowolony z jsFiddle, ale z tego, co zobaczyłem, powinieneś zdefiniować (jeśli to możliwe) jeden obszar dla JavaScript, który będzie zawierał twoje Konfiguracja SystemJS i jedna dla treści TypeScript (definicja komponentu i bootstrap). Musisz mieć świadomość, że w oparciu o powyższą konfigurację SystemJS rozdzielczość modułu zostanie wykonana według ścieżki. Oznacza to, że 'app/main' musi być czymś, co może być rozwiązane przez jsFiddle (' app/main.ts'). Odpowiada to twojemu obszarowi TypeScript. –

Jeśli nie można tego zrobić, myślę, że trudno będzie użyć aplikacji Angular2 w narzędziu :-( –

Jeśli nie jesteś przywiązany do JS Fiddle rozważyć Plunker zamiast. Twórcy Angulara utrzymują bieżący obszar roboczy z nowymi wydaniami Angular pod numerem this link.

To jest bardziej aktualna niż nawet własnej Kątowymi 2 setup Plunker (który można uzyskać dostęp z menu Plunker: New > AngularJS > 2.0.x (TS)

Minusem: że konfiguracja jest w maszynopisie, więc jeśli chcesz się rozwijać z wanilii JavaScript (ES5 lub ES6), najlepiej jest użyć opcji menu Plunker zamiast:

Źródło

2016-06-25 04:41:58 BeetleJuice

Ten jest lepszy http://stackoverflow.com/questions/41137028/angular2-on- jsfiddle-how-to-include-ts-file # 41139595 –

Jak używać Angular2 i maszynopisu w Jsfiddle

Odpowiedz

Powiązane problemy