Question

如何从以下代码中创建一个jsfiddle：

<html>
<head>
</head>
<body>
    <div ng-app ng-controller="MainCtrl">
        <ul>
            <li ng-repeat="num in nums">
                {{num}}
            </li>
        </ul>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>

    <script type="text/javascript" charset="utf-8">
        function MainCtrl($scope) {
            $scope.nums = ["1","2"];
        }
    </script>
</body>
</html>

我的非工作尝试：http://jsfiddle.net/zhon/3DHjg/没有显示任何内容并且有错误。

Answer 1

您需要在jsFiddle中设置一些内容才能使其正常工作。

首先，在左侧面板的“Frameworks＆amp; Extensions”下，选择“No wrap-in＆lt; body＆gt;”。

现在，在“小提琴选项”下，将“正文标记”更改为<body ng-app='myApp'>

在JS面板中，启动您的模块：

var app = angular.module('myApp', []);

检查出来：http://jsfiddle.net/VSph2/1/

Answer 2

@ pkozlowski.opensource有一个很好的blog post关于如何使用jsFiddle来编写AngularJS示例程序。

Answer 3

您已在角色无法访问的功能范围中定义了控制器（角度尚未加载）。换句话说，在加载角度库之前，你试图调用角度库的函数和助手，如下例所示。

function onload(){
 function MainCtrl(){}
}

要解决此问题，请将角度加载类型切换为No wrap - in <body>，如屏幕截图所示。

这是一个有效的example in jsfiddle

Answer 4

单击JAVASCRIPT按钮，选择角度版本和您想要包含加载脚本的位置：

然后单击HTML按钮并在body标签中添加ng-app。全部:)

Answer 5

我正在为那些登陆此页面的人写下我的答案，我习惯使用 ng-module 指令，但是在半小时之后 jsfiddle 我意识到<不允许使用strong> ng-module ，并且您看不到任何错误，并且当 ng-module 更改为 ng-app 小提琴时效果非常好。我只是想要分享这个。并且也不需要换行（正文）。

<div ng-app="appX" ng-controller="appCtrl">
  <p>{{greeting}}
  </p>
</div>

var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});

https://jsfiddle.net/cloudnine/trgrjwf1/7/

Answer 6

由于JSFiddle选择Angular 1.4.8作为其JAVASCRIPT设置面板中Angular V1的顶级选项，因此适用更多限制：ng-app和ng-controller都应在HTML中声明以使其成为工作

示例HTML：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="sample" placeholder="type something here...">
  <span>{{sample}}</span>
</div>

示例JS：

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {});

https://jsfiddle.net/y170uj84/

还使用最新的Angular 1.6.4进行测试，设置为外部资源。

Answer 7

对于角度5的小实验，您可以使用https://stackblitz.com/。此站点用于角度文档以运行实时演示。例如，https://stackblitz.com/angular/eybymjopmav

在JSFiddle上运行的简单AngularJS

7 个答案: