上的jsfiddle

運行簡單的AngularJS如何做的jsfiddle了以下代碼：上的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/說明不了什麼，有錯誤。

來源

2013-02-06 zhon

http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/ –

@mark，這回答了一般情況。你可以把它寫成答案，以便我可以「接受」它。 – zhon

在JavaScript設置中選擇加載類型後：「無換行」爲我工作。 – Thulasiram

@pkozlowski .opensource有一個不錯的blog post關於如何使用jsFiddle編寫AngularJS示例程序。

來源

2013-02-06 17:18:44

您已將控制器定義在角度不可訪問的函數範圍內（角度尚未加載）。換句話說，在加載角度庫之前，您正試圖調用角庫的函數和helper，如下面的示例。

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

要解決此，切換廣告角負荷類型爲No wrap - in <body>像在屏幕截圖所示。

這裏是一個工作example in jsfiddle

來源

2013-02-06 16:08:49 mpm

我應該選擇「no wrap（body）」而不是「onload」 – zhon

你需要設置一些東西在的jsfiddle這個工作。

首先，在左側面板的「框架&擴展」下，選擇「無換行 - 在< body>」。

現在，在「小提琴選項」，變「身體標記」，以<body ng-app='myApp'>

在JS面板，開始您的模塊：

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

檢查出來：http://jsfiddle.net/VSph2/1/

來源

2013-02-06 16:15:41 dutzi

爲什麼我需要初始化我的應用程序？這個例子沒有它。 – zhon

選擇加載類型後：JavaScript設置中的「無換行」爲我工作。 – Thulasiram

我寫我的那些誰這個頁面上降落的答案，我以前用NG模塊指令，但在的jsfiddle半小時，我意識到NG模塊是不允許的，你以後看到沒有錯誤，當改變，ng模塊到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/

來源

2015-12-22 09:03:17 katmanco

點擊JAVASCRIPT按鈕，選擇角度版本和地方ü希望包括加載腳本：

然後點擊HTML按鈕，並添加NG-應用程序中身體標籤。所有:)

來源

2017-04-13 21:43:38

由於角1.4.8已經選擇的jsfiddle作爲其JavaScript設置面板角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/

了最新的1.6.4角還測試了通過設定爲外部資源。

來源

2017-07-16 05:32:55 themefield

對於角度爲5的小實驗，可以使用https://stackblitz.com/。此網站用於角度文檔以運行現場演示。例如，https://stackblitz.com/angular/eybymjopmav

來源

2018-02-12 08:30:20

回答

相關問題