3

I am trying to experiment with examples and tutorials at http://docs.angularjs.org/guide/expression and the examples are not working in plunker and jsfiddle. I am getting this error in the console

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=App&p1=Error%3A%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A27%3A198)

Is this a known error?

zs2020
  • 53,766
  • 29
  • 154
  • 219
neoeahit
  • 1,689
  • 2
  • 21
  • 35

1 Answers1

4

JSFiddle in particular has always been difficult to get working with AngularJS. The HTML section isn't meant to take an entire HTML document. Instead, you need to configure the workspace to work with Angular following these steps:

  1. Under external resources, add the Angular script (remember to click the + icon)
  2. Under Fiddle Options change the body tag to include ng-app like so: <body ng-app>

That should get you started. If you don't mind using an older version of Angular (1.1.1), you can select it from the "Frameworks & Extensions" drop down and change the 2nd drop down from onLoad to No wrap - in <body>.

See here for a working example from the docs: http://jsfiddle.net/jPtb3/

And here for the optional approach using 1.1.1: http://jsfiddle.net/5nA2H/

Update

There's some misinformation in the comments.. The docs ARE actually creating angular.module for you, but they're passing in an empty dependency. So you can either remove ="App" (not best), or you fix the angular.module declaration by removing the empty dependency (best) like so:

angular.module('App', []);
Langdon
  • 19,875
  • 18
  • 88
  • 107
  • 1
    Why cant one load it as a script in the html tag? That is also an option. But the issue i am facing that http://docs.angularjs.org/guide/expression example which have been provided by the developers of angular.js are not working only. – neoeahit Aug 28 '13 at 18:39
  • 2
    Oh I see... you're clicking the Edit button from the docs. That appears to be broken. You see how it sets `ng-app="App"` instead of simply ``? That's the difference you're seeing. `ng-app="App"` is expecting there to be an `angular.module` named `App`, but the Edit link isn't providing that module so it gives you that nasty error. – Langdon Aug 28 '13 at 18:43
  • If you want to use the edit button just take out the `="App"` bit. – Langdon Aug 28 '13 at 18:43
  • Thanks. I am surprised so many developers have seen that page and yet no one has looked into it! – neoeahit Aug 28 '13 at 18:54