Unable to CoffeeScript AngularJS module to load with ng-app in JSFiddle

Question

I'm playing around with Coffeescript and AngularJS, trying to use the new "controller as" syntax. Despite varied attempts and searching Google, I can't get it to work - the controller reference in my html doesn't find the Coffeescript class for the controller.

I suspect I am doing something wrong or just misunderstanding things but if anyone has a working example, it would be very helpful.

Here's a little jsfiddle showing what I am trying to do: http://jsfiddle.net/G2r4p/ (the controller in this example is just an empty dummy controller so I can test the syntax).

When I run this example in my browser I get:

Error: [ng:areq] Argument 'AppController' is not a function, got undefined
at hasOwnPropertyFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:60:12)
at assertArg (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:1187:11)
at assertArgFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:1197:3)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5547:9)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5060:34
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:203:20)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5047:11)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4607:15)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4610:13)
at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4516:30)

Thanks

Updated the title and added the JSFiddle tag to this question so hopefully it gets the JSFiddle team's attention. — Ben Lesh
– Ben Lesh, Commented Oct 7, 2013 at 19:46
See this answer to Why do I need to angular.bootstrap even when I declare ng-app=“MyApp” in JSFiddle, and this working fork of your JSFiddle. — Stewie
– Stewie, Commented Oct 8, 2013 at 0:17

Ahmad Mageed · Accepted Answer · 2013-10-07 19:47:53Z

1

JS Fiddle is the culprit. Your syntax is correct and works fine as is when I tried it in JS Bin. It looks like JS Fiddle is processing something out of order, compared to JS Bin, which doesn't suffer from this issue.

Check out the working JS Bin example: http://jsbin.com/akABEjI/1/edit

You might also be interested in my blog post that takes the AngularJS Todo app and converts it to CoffeeScript: "Writing AngularJS controllers with CoffeeScript classes." Ultimately your sample is similar to what I end up with in my final example.

answered Oct 7, 2013 at 19:47

Ahmad Mageed

96.9k20 gold badges170 silver badges177 bronze badges

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

6 Comments

matt helliwell Over a year ago

I've seen that already (very useful and clear it was too). What I can't work out is what on earth I've done wrong!

matt helliwell Over a year ago

Got it, thanks to you blog. I gradually removed things until it stoppe working. The issue is that when I was trying it, I was registering the controller in a separate file to the controller definition, ie I had the call to .controller("AppController", AppController) in a different file to AppController.coffee. Presumably due to the coffeescript scoping, the controller was not being registered properly.

Ahmad Mageed Over a year ago

@matthelliwell glad it helped. It was tricky getting CoffeeScript classes working initially, which led me through that step by step process of slowly building up to it.

bob Over a year ago

@AhmadMageed Thanks for the post and blog. I would like to use coffeescript classes but want to avoid the "controller as" since I'm defining routes in module.config. Is this possible?

Ahmad Mageed Over a year ago

@bob the second-last example on my blog demonstrates the controller without the as syntax. Here's the direct JS Bin link to the example. Hope that helps!

|

Denison Luz · Accepted Answer · 2013-10-07 19:41:32Z

0

I have changed a bit your code and it is working now (http://jsfiddle.net/denisonluz/r5KQb/2/)

Also bear in mind that sometimes can be a bit tricky to make AngularJS work when using JSFiddle. There's a good post here about it. When using AngularJS and CoffeScript on JSFiddle you must use manual bootstrap.

COFFESCRIPT

testApp = angular.module 'testApp', []

testApp.controller 'AppController', ($scope) ->
    $scope.items = [{title: "My test App", description: 'Some Text Here'}]

angular.bootstrap document, ["testApp"]

HTML

<div ng-controller='AppController'>
<h3>one plus two is {{1 + 2}}</h3>
  <ul ng-repeat='item in items'>
    <li>{{item.title}}</li>
    <li>{{item.description}}</li>
   </ul>
</div>

edited Oct 7, 2013 at 19:41

answered Oct 7, 2013 at 19:33

Denison Luz

3,56525 silver badges24 bronze badges

1 Comment

matt helliwell Over a year ago

Putting aside the jsfiddle problem, which is an unfortunate red herring, I can get the code going like your example as well. However, I am trying to get the "controller as" syntax to work so the view can access my controller class directly, rather than using $scope. There's a good video about it here: thinkster.io/pick/GmI3KetKo6/…

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

The problem isn't your CoffeeScript, it's JSFiddle.

The problem is that the way JSFiddle is doing CoffeeScript, it's processing the CS and executing the created JavaScript well after Angular tries to bootstrap the app with your ng-app="TestApp" directive.

While @dluz, "solves" this problem, it doesn't explain it.

One solution is to bootstrap your app manually, as @dluz suggests, but you won't have to, and shouldn't have to, do this in a production environment.

Ideally, in a production environment, you'd be pre-processing your CoffeeScript and it would never be compiled to JavaScript in the browser, as it is in JSFiddle.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 7, 2013 at 19:41

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

1 Comment

matt helliwell Over a year ago

Trouble is, I get the same problem if I transpile the Coffeescript and run it on a local server so whilst jsfiddle may be adding an unnecessary level of complexity, I've still got the problem. With hindsight, I should've just posted the code sample and left jsfiddle out of it.

Dinis Cruz · Accepted Answer · 2015-06-28 16:56:06Z

Here is a simple example with coffeescript, angular and jade working side by side

doctype html
html(lang="en")
    head
        meta(charset="utf-8")
        title Test
        script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js')
        script(src='http://coffeescript.org/extras/coffee-script.js')
        style.
            input { width: 200px }

        script(type='text/coffeescript').
            app = angular.module('App', [])
            app.controller 'TestController', ($scope)->
                $scope.name = 'Angular 1.4 with Jade with coffee'
            angular.bootstrap document, ["App"]

    body
        div
            div(ng-controller="TestController")
                h2 {{name}}
                hr
                input(type="text" ng-model="name" )

Collectives™ on Stack Overflow

Unable to CoffeeScript AngularJS module to load with ng-app in JSFiddle

4 Answers 4

6 Comments

1 Comment

The problem isn't your CoffeeScript, it's JSFiddle.

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

The problem isn't your CoffeeScript, it's JSFiddle.

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related