getting angularjs to work in jsfiddle?

StackOverflow https://stackoverflow.com/questions/23526738

  •  17-07-2023
  •  | 
  •  

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?

Was it helpful?

Solution

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/

OTHER TIPS

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top