it-swarm.com.de

Einfaches AngularJS, das auf JSFiddle läuft

Wie mache ich aus folgendem Code ein 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>

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

18
zhon

@ pkozlowski.opensource hat einen Nice blog post darüber, wie man mit jsFiddle AngularJS-Beispielprogramme schreibt.

22
Mark Rajcok

Damit dies funktioniert, müssen Sie einige Dinge in jsFiddle einrichten.

Wählen Sie im linken Bereich unter "Frameworks & Extensions" die Option "No wrap-in <body>" aus. 

Ändern Sie nun unter "Geigenoptionen" den Tag "Körper" in <body ng-app='myApp'>.

Initiieren Sie im JS-Panel Ihr Modul:

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

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

40
dutzi

Sie haben Ihren Controller in einem Funktionsbereich definiert, auf den der Winkel nicht zugreifen kann (Winkel ist noch nicht geladen). Mit anderen Worten, Sie versuchen, die Funktionen und Helfer der Winkelbibliothek wie im folgenden Beispiel aufzurufen, bevor die Winkelbibliothek geladen wird.

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

Um dieses Problem zu beheben, ändern Sie Ihren Winkellasttyp in No wrap - in <body> wie in der Abbildung gezeigt.

 enter image description here

hier ist ein arbeits beispiel in jsfiddle

7
mpm

Klicken Sie auf die Schaltfläche JAVASCRIPT, wählen Sie die Winkelversion und legen Sie die Stelle fest, an der das geladene Skript eingefügt werden soll:  enter image description here

Klicken Sie dann auf die Schaltfläche "HTML" und fügen Sie ng-app im body-Tag hinzu. Es ist alles:)  enter image description here

2
Vasyl Gutnyk

Ich schreibe meine Antwort für diejenigen, die auf dieser Seite landen. Ich war es gewohnt, ng-module Direktive zu verwenden, aber in jsfiddle wurde mir nach einer halben Stunde klar, dass ng-module) ist nicht erlaubt und es wird kein Fehler angezeigt, und als ng-module in ng-app geändert wurde, funktionierte die Geige sehr gut. Ich wollte das nur teilen .Und kein Wrap (body) ist ebenfalls erforderlich.

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

1
katmanco

Für kleine Experimente in Winkel 5 können Sie https://stackblitz.com/ verwenden. Diese Site wird in der Winkeldokumentation zur Ausführung einer Live-Demo verwendet. Zum Beispiel https://stackblitz.com/angular/eybymjopmav

0
Prokhor Sednev

Da Angular 1.4.8 von JSFiddle als oberste Option für Angular V1 in seinem JAVASCRIPT-Einstellungsfeld ausgewählt wurde, gilt eine weitere Einschränkung: Sowohl ng-app als auch ng-controller sollten in HTML deklariert werden 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/

Wird auch mit dem neuesten Angular 1.6.4 getestet, indem Sie als externe Ressource festlegen.

0
themefield