Home » Angularjs » Simple AngularJS running on JSFiddle

Simple AngularJS running on JSFiddle

Posted by: admin November 30, 2017 Leave a comment

Questions:

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.

Answers:

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

Questions:
Answers:

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/

Questions:
Answers:

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.

enter image description here

here is a working example in jsfiddle

Questions:
Answers:

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/

Questions:
Answers:

Click JAVASCRIPT button, choose angular version and place where u want include loaded script:
enter image description here

Then click HTML button and add ng-app in body tag. Its all:)
enter image description here

Questions:
Answers:

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.