Simple AngularJS running on JSFiddle

Question

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.

@mark, this answers the general case. Can you write it up as an answer so I can "accept" it. — zhon
– zhon, Commented Feb 6, 2013 at 16:40
After selecting Load Type:"No wrap - in <body>" in JavaScript setting worked for me. — Thulasiram
– Thulasiram, Commented May 11, 2017 at 7:20

BiscuitBaker · Accepted Answer · 2015-04-29 11:28:47Z

40

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/

edited Apr 29, 2015 at 11:28

BiscuitBaker

1,4173 gold badges23 silver badges37 bronze badges

answered Feb 6, 2013 at 16:15

dutzi

1,9282 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zhon Over a year ago

Why do I need to initialize my app? The example works without it.

Thulasiram Over a year ago

After selecting Load Type:"No wrap - in <body>" in JavaScript setting worked for me.

Mark Rajcok · Accepted Answer · 2013-02-06 17:18:44Z

22

@pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.

answered Feb 6, 2013 at 17:18

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Comments

malana · Accepted Answer · 2016-04-06 18:58:18Z

7

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

edited Apr 6, 2016 at 18:58

malana

5,2603 gold badges30 silver badges44 bronze badges

answered Feb 6, 2013 at 16:08

mpm

20.2k7 gold badges52 silver badges56 bronze badges

1 Comment

zhon Over a year ago

I should have selected "no wrap (body)" instead of "onload"

Vasyl Gutnyk · Accepted Answer · 2017-04-13 21:43:38Z

2

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

answered Apr 13, 2017 at 21:43

Vasyl Gutnyk

5,0593 gold badges37 silver badges38 bronze badges

Comments

furkankatman · Accepted Answer · 2016-07-21 12:25:06Z

1

I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .And no wrap (body) is required too.

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

edited Jul 21, 2016 at 12:25

answered Dec 22, 2015 at 9:03

furkankatman

1,21014 silver badges24 bronze badges

Comments

themefield · Accepted Answer · 2017-08-09 21:20:54Z

0

Since Angular 1.4.8 has been chosen by JSFiddle as the top option for Angular V1 in its JAVASCRIPT setting panel, more restriction applies: both ng-app and ng-controller should be declared in HTML to make it work.

Sample HTML:

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

Sample JS:

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

https://jsfiddle.net/y170uj84/

Also tested with the latest Angular 1.6.4, by setting as External Resource.

edited Aug 9, 2017 at 21:20

answered Jul 16, 2017 at 5:32

themefield

4,43337 silver badges34 bronze badges

Comments

Prokhor Sednev · Accepted Answer · 2018-02-12 08:30:20Z

0

For little experiments in angular 5, you can use https://stackblitz.com/. This site is used in angular documentation to run live demo. For example, https://stackblitz.com/angular/eybymjopmav

answered Feb 12, 2018 at 8:30

Prokhor Sednev

6957 silver badges14 bronze badges

Collectives™ on Stack Overflow

Simple AngularJS running on JSFiddle

7 Answers 7

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related