getting angularjs to work in jsfiddle?

Question

I'm trying to make an angularjs jfiddle for another question, but I can't get it working. Can somebody look at it and let me know what I'm doing wrong?

<div ng-app="myApp">
  <div ng-conroller="MyController">
    Click me: <input type="checkbox" ng-model="checked"/><br/>
    <div>
        {{checked}}
    </div>
  </div>
</div>

js:

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

var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
    $scope.checked = true;
});

fiddle link

fiddle link without external libraries

fiddle link with only ng-animate ext library

Can it be that it's because jsfiddle adds a "http://fiddle.jshell.net/_display/" in front of any external library location? Like when I try to add "ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js" then jsfiddle changes it to "http://fiddle.jshell.net/_display/ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"

WHY?

"Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' is not available!" — isherwood
– isherwood, Commented May 7, 2014 at 19:37
Looks like fiddle is trying to load 1.3.0 beta unsuccessfully. — isherwood
– isherwood, Commented May 7, 2014 at 19:38
Oh, that's you. Don't load external files if you've set Fiddle to load them for you. :-) — isherwood
– isherwood, Commented May 7, 2014 at 19:39

akn · Accepted Answer · 2016-05-04 09:14:42Z

2

You need to set option no wrap - in <body>

You should use:

var controllers = angular.module('my.controllers', []);

Instead of:

var controllers = app.module('my.controllers', []);

This fiddle works: http://jsfiddle.net/NBhn4/1/

EDIT:

To work with ng-animate you need to include external libraries in correct order and use No-Library (pure JS) option or eg. any jQuery library:

Updated fiddle: http://jsfiddle.net/NBhn4/175/

edited May 4, 2016 at 9:14

answered May 7, 2014 at 19:51

akn

3,7221 gold badge29 silver badges45 bronze badges

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

4 Comments

EasterBunnyBugSmasher Over a year ago

tried it. Your fiddle works because you don't require ngAnimate. But I need that one.

EasterBunnyBugSmasher Over a year ago

it works. thanks! And interestingly, it also doesn't add the URL prefix for the libraries anymore now.

tu4n Over a year ago

you used ng-conroller (should be controller) in your js but it still works ? how o_O ?

akn Over a year ago

@nmtuan, it doesn't work :) With ng-conroller angular sets values in $rootScope. If you change it to ng-controller, checkbox will be checked on init (beacuse of $scope.checked=true in controller's code. I updated the fiddle.

furkankatman · Accepted Answer · 2015-12-22 08:58:45Z

0

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 .

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

answered Dec 22, 2015 at 8:58

furkankatman

1,21014 silver badges24 bronze badges

Collectives™ on Stack Overflow

getting angularjs to work in jsfiddle?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related