Simple AngularJS running on JSFiddle

zhon picture zhon · Feb 6, 2013 · Viewed 24.7k times · Source

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.

Answer

dutzi picture dutzi · Feb 6, 2013

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/