logo标签列表

简单的AngularJS在JSFiddle上运行

angularjsjsfiddle
19

我如何将以下代码制作成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/ 没有任何显示并且存在错误。

3
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/ - Mark Rajcok
@mark，这回答了一般情况。你能把它写成一个答案，这样我就可以“接受”它了。 - zhon
在JavaScript设置中选择“不换行 - 在<body>中”，对我起了作用。 - Thulasiram
7个回答
40

为了使此代码正常运行，您需要在jsFiddle中进行一些设置。

首先，在左侧面板的“框架和扩展”下，选择“No wrap - in <body>”。

现在，在“Fiddle选项”下，将“Body标签”更改为<body ng-app='myApp'>

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

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

看看这个：http://jsfiddle.net/VSph2/1/

2
为什么需要初始化我的应用程序？即使没有它，这个示例也能正常运行。 - zhon
1
在JavaScript设置中选择“不换行 - 在<body>中”，对我起了作用。 - Thulasiram
22

@pkozlowski.opensource写了一篇很好的博客文章，介绍如何使用jsFiddle编写AngularJS示例程序。

7
你已经在一个函数作用域中定义了你的控制器，这个作用域对于angular来说是不可访问的（angular尚未加载）。换句话说，在获取angular库之前，你正在尝试调用类似下面示例的angular库的函数和帮助程序。
function onload(){
 function MainCtrl(){}
}

为解决这个问题，请将您的Angular加载类型切换为“无包装 - 在<body>中”，如屏幕截图所示。

enter image description here

这里有一个在 JSFiddle 中工作的 示例

3
我应该选择“无换行（body）”而不是“onload”。 - zhon
2

点击JAVASCRIPT按钮，选择angular版本并确定脚本加载的位置: enter image description here

然后点击HTML按钮，在body标签中添加ng-app即可。这就是全部：) enter image description here

1
我正在为那些来到这个页面的人撰写答案，我习惯使用 ng-module 指令，但在 jsfiddle 中半小时后我意识到 ng-module 不被允许，你看不到错误，而将其更改为 ng-app 后，fiddle 就可以正常工作了。我只是想分享一下这个经验。并且需要使用 no wrap (body)。
<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/

0

由于JSFiddle在其JAVASCRIPT设置面板中选择了Angular 1.4.8作为Angular V1的首选项，因此会有更多限制：必须在HTML中声明ng-app和ng-controller才能使其正常工作。

示例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版本，通过设置为外部资源进行测试。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接