如何使用 plunker 或 jsfiddle 到运行 angular2 代码

Question

我试图在 plnkr 或 jsfiddle 中为 Angular 2 练习一些程序。但我总是发现它们不起作用，如果我打开开发人员工具，我会看到 404 错误或其他一些异常。在 plnkr 或 jsfiddle 中运行 Angular2 应用程序的正确方法是什么。

这是我指的链接：

A very basic program in Angular2 in jsfiddle

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

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }

Another jsfiddle example.

这 2 个是 plnkr 示例：Plunkr1, plunkr2

更新：

当我使用 jsfiddle 时，我选择了 Typescript + Angular 2 像这样

在开发者控制台中，我仍然看到错误消息：

这些是错误的详细信息：

angular2.js:3282 Uncaught ReferenceError: System is not defined
    at angular2.js:3282
(anonymous) @ angular2.js:3282
angular2.dev.js:1 Failed to load resource: the server responded with a status of 404 ()
Rx.js:1 Failed to load resource: the server responded with a status of 404 ()
system.js:1 Failed to load resource: the server responded with a status of 404 ()
Rx.js:1 Failed to load resource: the server responded with a status of 404 ()
angular2.dev.js:1 Failed to load resource: the server responded with a status of 404 ()
require.js:8 Uncaught Error: Module name "angular2/platform/browser" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at G (require.js:8)
    at Object.e [as require] (require.js:27)
    at requirejs (require.js:33)
    at eval (eval at exec (typescript.js:41), <anonymous>:9:17)
    at exec (typescript.js:41)
    at HTMLDocument.runScripts (typescript.js:41)

Answer 1

Jsfiddle.net: 在jsfiddle的Javascriptwindow中，您可以在点击JS框架标题时出现的下拉列表中选择使用Javascript+Angular。这是jsfiddle中一个比较新的特性，几个月前更新的。

另请查看 Stackblitz.com，这是另一个在线编辑器，可方便地与 React/Angular 和其他 JS 框架一起使用。

如果您因找不到文件等而收到 404 异常，可能是因为 incorrect/incomplete 路径或缺少文件。

您的资源面板中有 non-existent 资源的路径。冗余链接导致 404 错误。使用 jsfiddle Javascript/Angular 组合或使用有效的导入资源。删除冗余资源（除 require.js 之外的所有资源），您将看到差异。同时更正任何语法错误。

希望对您有所帮助

（我用plunkr的不多，没法提供建议）..

如何使用 plunker 或 jsfiddle 到运行 angular2 代码

How to use plunker or jsfiddle to run angular2 code

javascript

jsfiddle

angularjs

angular2-template

如何使用 plunker 或 jsfiddle 到 运行 angular2 代码

How to use plunker or jsfiddle to run angular2 code

javascript

jsfiddle

angularjs

angular2-template

如何使用 plunker 或 jsfiddle 到运行 angular2 代码