Einfaches AngularJS läuft auf JSFiddle

Wie mache ich ein jsfiddle aus dem folgenden code:

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

Meine nicht funktionierende Versuch: http://jsfiddle.net/zhon/3DHjg/ zeigt nichts und hat Fehler.

InformationsquelleAutor der Frage zhon | 2013-02-06

angularjs jsfiddle

22

@pkozlowski.opensource hat einen schönen blog-post darüber, wie jsFiddle zu schreiben AngularJS-Beispiel-Programme.

InformationsquelleAutor der Antwort Mark Rajcok
40

Müssen Sie einige Dinge im jsFiddle für diese zu arbeiten.

Erste, auf der linken Seite, unter "Frameworks & Erweiterungen", wählen Sie "Kein Umbruch" - im <body>".

Nun, unter "Fiddle-Optionen", ändern Sie "Body-tag" zu <body ng-app='myApp'>

In der JS-panel, initiieren Modul:
```
var app = angular.module('myApp', []);
```
Check it out: http://jsfiddle.net/VSph2/1/

InformationsquelleAutor der Antwort dutzi
7

Definiert haben Ihren controller in einen Funktion Bereich, der nicht zugänglich ist eckig (angular noch nicht geladen ist). In anderen Worten: Sie versuchen, rufen Sie Winkel-Bibliothek-Funktionen und Helfern wie unter Beispiel bevor man Winkel-Bibliothek geladen.
```
function onload(){
 function MainCtrl(){}
}
```
Um dies zu beheben, schalten Sie Ihren Winkel-Last Typ No wrap - in <body> wie gezeigt in der Abbildung.

hier ist eine funktionierende Beispiel in jsfiddle

InformationsquelleAutor der Antwort mpm
2

Klicken Sie auf JAVASCRIPT-Schaltfläche, wählen Sie eckige version und den Ort, wo u wollen, gehören geladenen Skript:

Klicken Sie dann auf HTML-button und fügen ng-app im body-tag. Ihr alle:)

InformationsquelleAutor der Antwort Vasyl Gutnyk
1

Schreibe ich meine Antwort für diejenigen, die land auf dieser Seite , ich wurde verwendet, um zu verwenden ng-Modul Richtlinie, sondern in jsfiddle nach einer halben Stunde merkte ich, dass ng-Modul ist nicht erlaubt, und Sie sehen keine Fehler , und wenn geändert, dass ng-Modul zu ng-app Geige hat sehr gut funktioniert .Ich wollte nur zu teilen dieses .Und "kein Umbruch" (Körper) ist zu müssen.
```
<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/

InformationsquelleAutor der Antwort katmanco
0

Seit Eckige 1.4.8 gewählt hat JSFiddle als die top-Wahl für Winkel-V1 in seine JAVASCRIPT-Einstellungen-panel, weitere Einschränkung gilt: beide ng-app und ng-controller erklärt werden sollte in HTML, damit es funktioniert.

Beispiel-HTML:
```
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="sample" placeholder="type something here...">
  <span>{{sample}}</span>
</div>
```
Beispiel JS:
```
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {});
```
https://jsfiddle.net/y170uj84/

Getestet auch mit der neuesten Eckige 1.6.4, indem Sie die Einstellung als Externe Ressource.

InformationsquelleAutor der Antwort themefield
0

Für kleine Experimente im Winkel 5, die Sie verwenden können,https://stackblitz.com/.
Auf dieser Website werden in eckige Dokumentation zu führen Sie eine live-demo. Zum Beispiel, https://stackblitz.com/angular/eybymjopmav

InformationsquelleAutor der Antwort Prokhor Sednev

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.