如何在Jsfiddle中使用Angular2和Typescript
假问题...
我尝试在jsfiddle的Typescript中编码angular2(2.0.0-beta.6)应用程序。
我知道有其他的解决方案在线,但...
其实,我的例子是非常小的,问题是导入模块上:如何在Jsfiddle中使用Angular2和Typescript
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 ...)但它不起作用。
对于Angular2(angular2.sfx.dev.js)的最新版本(beta-6),没有更多的自执行包。
一些测试:
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/
在Plunker你可以使用菜单
New > Angularjs > 2.0.x (TS)
获得一个最小的工作Angular2应用
路由器
如果您想使用的路由器config.js
'@angular/router': {
main: 'router.umd.js',
defaultExtension: 'js'
},
<base href=".">
添加为第一个孩子的index.html
的<head>
可能是必要的,也是。
从
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';
bootstrap(App, [])
.catch(err => console.error(err));
切换到HashLocationStrategy
变化main.ts
到
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));
我upvoted这个,因为从Plunker菜单开始是好的,但更好的选择是https://angular.io/resources/live-examples/quickstart/ts/plnkr.html。它由Angular团队(不是Plunker团队)维护,因此它更加流行。例如,在撰写本文时,它包括路由为以及新的'@ angular/forms',这两者都不是默认的'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));
它不起作用...我用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
来代替。 Angular开发人员通过this link获得最新的Angular版本,以保持最新的工作空间。
它甚至比Plunker自己的角2的设置(这可以从Plunker菜单访问更多的电流:New > AngularJS > 2.0.x (TS)
缺点:安装程序是打字稿,所以如果你想与香草的Javascript开发(ES5或ES6),您最好的选择是使用Plunker菜单选项。
这一个更好http://*.com/questions/41137028/angular2-on-的jsfiddle,如何对包括-TS文件#41139595 –
Plunkr对此更方便:http://plnkr.co/edit/duastrVR5HUgJUgr3uBf?p=info – dfsq
对于plunker,我使用[this链接](https://angular.io/resources/live-examples/quickstart/ts/plnkr.html),它会将你重定向到合适的文件已经添加的文件夹,它总是有最新的角度版本。 convenie NT。 – Abdulrahman
OP询问JS小提琴,但是在plunkr链接中,这个由@Abdulrahman编写的是最好的,因为它包含了路由和新的'@ angular/forms' – BeetleJuice