Menu
How do I make a jsfiddle out of the following 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>
My non working attempt: http://jsfiddle.net/zhon/3DHjg/ shows nothing and has errors.
822
Entering and running code JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result. Once you enter code, just hit Run in the top actions bar, and the fourth panel with results will appear.
jsfiddle's js is all local too. Local to browser.
JSFiddle is an online IDE which is designed to allow users to edit and run HTML, JavaScript, and CSS code on a single page.
You need to set some things up in jsFiddle for this to work.
First, on the left panel, under "Frameworks & Extensions", select "No wrap - in <body>".
Now, under "Fiddle Options", change "Body tag" to <body ng-app='myApp'>
In the JS panel, initiate your module:
var app = angular.module('myApp', []);
Check it out: http://jsfiddle.net/VSph2/1/
100
@pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.
31
You've defined your controller in a function scope that is not accessible to angular (angular is not yet loaded). In other words you are trying to call angular library's functions and helpers like below example before getting angular library loaded.
function onload(){
function MainCtrl(){}
}
To resolve this, switch your angular load type to be No wrap - in <body> like shown in screenshot.
here is a working example in jsfiddle
41
Click JAVASCRIPT button, choose angular version and place where u want include loaded script:
Then click HTML button and add ng-app in body tag. Its all:)
31
answered Nov 15 '22 20:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
