上的jsfiddle运行简单的AngularJS(Simple AngularJS running

2019-07-19 09:47发布

如何使一个的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:

@ pkozlowski.opensource有一个很好的博客帖子有关如何使用的jsfiddle写AngularJS示例程序。



Answer 2:

您需要设置一些东西在的jsfiddle这个工作。

首先,左侧面板,在“框架和扩展”上,选择“否涡卷 - 在<BODY>”。

现在,在“小提琴选项”,变“正文标记”,以<body ng-app='myApp'>

在JS面板,开始您的模块:

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

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



Answer 3:

你在功能范围,是不是要访问角(角还没有加载)定义控制器。 换句话说,你正在试图获得角库加载之前调用角度图书馆的功能和助手像下面的例子。

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

为了解决这个问题,切换广告角负载类型是No wrap - in <body>像显示在屏幕截图。

这里是一个工作中的jsfiddle例如



Answer 4:

点击JAVASCRIPT按钮,选择角度版本和地方ü希望包括加载脚本:

然后点击HTML按钮,并在身体标记添加NG-应用。 所有:)



Answer 5:

我写我的那些谁这个页面上降落的答案,我以前用NG模块的指令,但在的jsfiddle半小时,我意识到,NG-模块是不允许之后,你看到没有错误,而当改变了NG-模块 NG-应用小提琴的工作非常出色。我只是想分享这个。而没有包装(体)需要太多。

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

由于角1.4.8已经选择的jsfiddle作为其JavaScript设置面板角V1顶部的选项,更限制适用:既ng-appng-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/

也有最新的1.6.4角测试,通过设定为外部资源。



Answer 7:

对于角5的小实验,你可以使用https://stackblitz.com/ 。 本网站角文档中用于运行现场演示。 例如, https://stackblitz.com/angular/eybymjopmav



文章来源: Simple AngularJS running on JSFiddle