web-dev-qa-db-fra.com

AngularJS simple fonctionnant sur JSFiddle

Comment est-ce que je fais un jsfiddle du code suivant:

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

Ma tentative infructueuse: http://jsfiddle.net/zhon/3DHjg/ ne montre rien et contient des erreurs.

angularjsjsfiddle
18
zhon

@ pkozlowski.opensource a publié un article sur Nice blog sur l'utilisation de jsFiddle pour écrire des exemples de programmes AngularJS.

22
Mark Rajcok

Vous devez configurer certaines choses dans jsFiddle pour que cela fonctionne.

Tout d’abord, dans le panneau de gauche, sous "Frameworks & Extensions", sélectionnez "Pas d’enveloppe <corps>". 

Maintenant, sous "Options de violon", remplacez "Tag corps" par <body ng-app='myApp'>

Dans le panneau JS, lancez votre module:

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

Allez voir ça: http://jsfiddle.net/VSph2/1/

40
dutzi

Vous avez défini votre contrôleur dans une étendue de fonction non accessible à angular (angular n'est pas encore chargé). En d'autres termes, vous essayez d'appeler les fonctions et les aides de la bibliothèque angulaire comme ci-dessous, par exemple avant de charger la bibliothèque angulaire.

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

Pour résoudre ce problème, réglez votre type de charge angulaire sur No wrap - in <body>, comme indiqué dans la capture d'écran.

 enter image description here

voici un travail exemple dans jsfiddle

7
mpm

Cliquez sur le bouton JAVASCRIPT, choisissez la version angulaire et placez le script chargé:  enter image description here

Cliquez ensuite sur le bouton HTML et ajoutez ng-app dans la balise body. C'est tout:)  enter image description here

2
Vasyl Gutnyk

J'écris ma réponse pour ceux qui atterrissent sur cette page, j'avais l'habitude d'utiliser ng-module directive mais dans jsfiddle après une demi-heure, j'ai réalisé que ng-module n'est pas autorisé et vous ne voyez pas d'erreur, et quand changé cela ng-module à ng-app fiddle a très bien fonctionné. Je voulais juste partager ceci .Et no wrap (body) est également requis.

<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

Pour de petites expériences dans angular 5, vous pouvez utiliser https://stackblitz.com/ . Ce site est utilisé dans la documentation angulaire pour la démonstration en direct. Par exemple, https://stackblitz.com/angular/eybymjopmav

0
Prokhor Sednev

Étant donné que Angular 1.4.8 a été choisi par JSFiddle comme option supérieure pour Angular V1 dans son panneau de configuration JAVASCRIPT, des restrictions supplémentaires s'appliquent: ng-app et ng-controller doivent être déclarés en HTML pour que ça marche.

Exemple HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="sample" placeholder="type something here...">
  <span>{{sample}}</span>
</div>

Échantillon JS:

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {});

https://jsfiddle.net/y170uj84/

Également testé avec la dernière Angular 1.6.4, en définissant comme ressource externe.

0
themefield