Как использовать Angular2 и Typcript в Jsfiddle

Dummy question ...
Я пытаюсь закодировать приложение angular2 (2.0.0-beta.6) в TypScript в jsfiddle.
Я знаю, что есть другое решение в Интернете, но ...
На самом деле, мой пример очень мал, и проблема заключается в модуле импорта:Как использовать Angular2 и Typcript в Jsfiddle

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

я получил следующее сообщение об ошибке:

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

Я пытаюсь добавить некоторые зависимости (require, system ...), но это не сработает.
И больше нет пакета самоизготовления для последней версии (бета-6) Angular2 (angular2.sfx.dev.js).

Некоторые тесты:
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/

источник

2016-02-12 asicfr

Plunkr гораздо удобнее для этого: http://plnkr.co/edit/duastrVR5HUgJUgr3uBf?p=info – dfsq

Для плункера я использую [этот link] (https://angular.io/resources/live-examples/quickstart/ts/plnkr.html) из angular.io, который перенаправит вас на плункер с уже добавленными файлами. Он всегда имел последнюю угловую версию. convenie нт. – Abdulrahman

ОП спросил о JS Fiddle, но из ссылок plunkr, этот by @Abdulrahman является лучшим, потому что он включает в себя маршрутизацию и новые '@ угловые/формы' – BeetleJuice

В Plunker вы можете просто использовать меню

New > Angularjs > 2.0.x (TS)

, чтобы получить минимальное рабочее приложение Angular2

маршрутизатор

Если вы хотите использовать маршрутизатор добавить в config.js

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

<base href="."> как первый ребенок в <head> из index.html может быть необходимой.

Для переключения на HashLocationStrategy изменения main.ts от

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

источник

2016-05-25 06:26:10

Я поддержал это, потому что, начиная с меню Plunker, это хорошо, но даже лучший вариант https://angular.io/resources/live-examples/quickstart/ts/plnkr.html. Он поддерживается командой Angular (а не командой Plunker), поэтому она более актуальна. Например, на момент написания она включает в себя маршрутизацию как а также новые '@ угловые/формы', ни одна из которых не имеет рабочего пространства' Plunker> Angularjs> 2.0 (TS) 'по умолчанию. – BeetleJuice

Вы должны также включить SystemJS JS файл. Я видел, что ты пропустил это. Все это включает в себя необходимо:

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

Кроме того, необходимо затем настроить SystemJS с помощью следующего кода, а затем импортировать основной модуль, содержащий самозагрузки функцию:

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

источник

2016-02-12 20:20:41

Это не работает ... Я пробовал все с помощью 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

В самом деле, я не очень удобен с jsFiddle, но из того, что я видел, вы должны определить (если возможно) одну область для JavaScript, которая будет содержать ваши SystemJS и один для вашего содержимого TypeScript (определение компонента и загрузочный файл). Вы должны знать, что в соответствии с приведенной выше конфигурацией SystemJS, разрешение модуля будет выполняться по пути. Это означает, что 'app/main' должно быть чем-то, что может быть разрешено jsFiddle (' app/main.ts'). Это будет соответствовать вашей области TypeScript. –

Если это невозможно сделать, я думаю, что будет сложно использовать приложение Angular2 в инструменте :-( –

Если вы не привязаны к JS Fiddle, рассмотрим Plunker вместо этого. Угловые разработчики постоянно обновляют рабочее пространство с новыми версиями угловых выпусков по адресу this link.

Это больше тока, чем даже собственная Угловая 2 установки Plunker (который можно получить доступ из меню Plunker: New > AngularJS > 2.0.x (TS)

Недостаток: что установка находится в машинописном, так что если вы хотите развивать с ванильным Javascript (ES5 или ES6), лучше всего использовать опцию меню Plunker.

источник

2016-06-25 04:41:58 BeetleJuice

Это лучше http://stackoverflow.com/questions/41137028/angular2-on- jsfiddle-хау к включают-TS-файл # 41139595 –

Как использовать Angular2 и Typcript в Jsfiddle

ответ

Смежные вопросы