AngularJS simples rodando no JSFiddle

Como eu faço um jsfiddle fora do seguinte código:

    
  • {{num}}
function MainCtrl($scope) { $scope.nums = ["1","2"]; }

Minha tentativa de não trabalho: http://jsfiddle.net/zhon/3DHjg/ não mostra nada e tem erros.

@ pkozlowski.opensource tem uma boa postagem no blog sobre como usar o jsFiddle para escrever programas de exemplo AngularJS.

Você precisa definir algumas coisas no jsFiddle para que isso funcione.

Primeiro, no painel esquerdo, em “Frameworks & Extensions”, selecione “No wrap-in “.

Agora, em “Opções de violino”, altere “Body tag” para

No painel JS, inicie seu módulo:

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

Confira: http://jsfiddle.net/VSph2/1/

Você definiu seu controlador em um escopo de function que não é acessível para angular (o angular ainda não está carregado). Em outras palavras, você está tentando chamar funções e auxiliares da biblioteca angular como exemplo abaixo antes de obter a biblioteca angular carregada.

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

Para resolver isso, mude o tipo de carga angular para No wrap - in como mostrado na captura de canvas.

insira a descrição da imagem aqui

aqui está um exemplo de trabalho em jsfiddle

Clique no botão JAVASCRIPT, escolha a versão angular e coloque onde deseja include o script carregado: insira a descrição da imagem aqui

Em seguida, clique no botão HTML e adicione ng-app na tag body. É tudo 🙂 insira a descrição da imagem aqui

Eu estou escrevendo minha resposta para aqueles que pousam nesta página, eu estava acostumado a usar a diretiva ng-module mas no jsfiddle depois de meia hora eu percebi que ng-module não é permitido e você não vê nenhum erro, e quando mudou isso ng- módulo para ng-app violino funcionou muito bem. Eu só queria compartilhar isso. E não wrap (corpo) é necessário também.

 

{{greeting}}


 var app=angular.module("appX",[]); console.log(app); app.controller("appCtrl",function($scope){ $scope.greeting="Hello World"; }); 

https://jsfiddle.net/cloudnine/trgrjwf1/7/

Como o Angular 1.4.8 foi escolhido pelo JSFiddle como a principal opção para o Angular V1 em seu painel de configuração do JAVASCRIPT, mais restrições se aplicam: tanto o ng-app quanto o ng-controller devem ser declarados em HTML para fazê-lo funcionar.

HTML de amostra:

 
{{sample}}

Amostra JS:

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

https://jsfiddle.net/y170uj84/

Também testado com o mais recente Angular 1.6.4, definindo como Recurso Externo.

Para pequenas experiências em angular 5, você pode usar https://stackblitz.com/ . Este site é usado em documentação angular para executar a demonstração ao vivo. Por exemplo, https://stackblitz.com/angular/eybymjopmav