Simple AngularJS en cours d'exécution sur JSFiddle

Comment puis-je faire un jsfiddle de le 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>

De mon travail tentative: http://jsfiddle.net/zhon/3DHjg/ montre rien et a des erreurs.

  • pkozlowskios.wordpress.com/2012/08/12/...
  • cela répond au cas général. Pouvez-vous l'écrire comme une réponse afin que je puisse "accepter" il.
  • Après avoir sélectionné le Type de Charge:"Sans retour - dans <body>" en JavaScript a fonctionné pour moi.
InformationsquelleAutor zhon | 2013-02-06
  1. 22

    @pkozlowski.opensource a une belle post de blog sur la façon d'utiliser jsFiddle pour écrire AngularJS exemples de programmes.

    InformationsquelleAutor Mark Rajcok
  2. 40

    Vous avez besoin de mettre certaines choses en place dans jsFiddle pour que cela fonctionne.

    D'abord, sur le panneau de gauche, sous "Cadres & Extensions", sélectionnez "Sans retour - dans <body>".

    Maintenant, en vertu de "Tripoter les Options" modifier "balise " Body" pour <body ng-app='myApp'>

    Dans le JS panneau de lancer votre module:

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

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

    • Pourquoi ai-je besoin d'initialiser mon application? L'exemple fonctionne sans elle.
    • Après avoir sélectionné le Type de Charge:"Sans retour - dans <body>" en JavaScript a fonctionné pour moi.
    InformationsquelleAutor dutzi
  3. 7

    Vous avez défini votre contrôleur en fonction de la portée qui n'est pas accessible angulaire (angulaire n'est pas encore chargé). En d'autres mots que vous essayez d'appeler angulaire fonctions de la bibliothèque et des aides comme l'exemple ci-dessous avant d'arriver angulaire de la bibliothèque est chargé.

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

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

    Simple AngularJS en cours d'exécution sur JSFiddle

    ici est un travail exemple dans jsfiddle

    • Je devrais avoir sélectionné "pas de retour à la ligne (corps)" au lieu de "onload"
    InformationsquelleAutor mpm
  4. 2

    Cliquez sur bouton JAVASCRIPT, choisissez angulaire de la version et de l'endroit où tu veux inclure script chargé:
    Simple AngularJS en cours d'exécution sur JSFiddle

    Puis cliquez sur bouton HTML et ajouter ng-app dans la balise body. Son tout:)
    Simple AngularJS en cours d'exécution sur JSFiddle

    InformationsquelleAutor Vasyl Gutnyk
  5. 1

    Je suis en train d'écrire ma réponse pour ceux qui débarquent 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 aucune erreur , et quand changé que ng-module à ng-app violon a très bien fonctionné .Je voulais juste partager cette .Et sans retour (corps) est également requise.

    <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 katmanco
  6. 0

    Depuis Angulaire 1.4.8 a été choisi par JSFiddle que l'option haut Angulaire V1 dans son JAVASCRIPT panneau de réglage, plus de restriction s'applique: les deux ng-app et ng-controller doit être déclarée dans le HTML pour le faire fonctionner.

    Exemple de code 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 Angulaire 1.6.4, en définissant en tant que Ressource Externe.

    InformationsquelleAutor themefield
  7. 0

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

    InformationsquelleAutor Prokhor Sednev