angularjs - 在 JSFiddle 上运行的简单 AngularJS

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/没有显示任何内容并且有错误。

score 40 · Accepted Answer

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

首先，在左侧面板的“Frameworks & Extensions”下，选择“No wrap - in <body>”。

Now, under "Fiddle Options", change "Body tag" to <body ng-app='myApp'>

In the JS panel, initiate your module:

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

Check it out: http://jsfiddle.net/VSph2/1/

score 22 · Accepted Answer

@pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.

score 7 · Accepted Answer

您已经在 angular 无法访问的函数范围内定义了控制器（尚未加载 angular）。换句话说，在加载 Angular 库之前，您正在尝试调用 Angular 库的函数和助手，如下例所示。

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

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

这是jsfiddle中的一个工作示例

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .And no wrap (body) is required too.

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

score 0 · Accepted Answer

由于 JSFiddle 已在其 JAVASCRIPT 设置面板中选择 Angular 1.4.8 作为 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 进行了测试。

score 0 · Accepted Answer

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

angularjs - 在 JSFiddle 上运行的简单 AngularJS

7 回答 7

Related

Reference