Angular JS + CoffeeScript + JSFiddle: Code not working

Question

I started playing around with CoffeeScript and AngularJS today and noticed that there is not a whole lot of documentation or examples on how to correctly write AngularJS using CoffeeScript. My own experimentation with it seems not to be working. As a pedagogical excersice, could someone point me as to why this is fiddle is not working?

http://jsfiddle.net/dralexmv/8km8x/4/

It claims the InventoryModule is not defined. Although I have declared it in the first line.

This is the HTML:

<div ng-app='InventoryModule' ng-controller='InventoryController'>
<table>
    <tr ng-repeat='item in items'>
        <td>{{item.title}}</td>
        <td>{{item.price | currency}}</td>
    </tr>
</table>

And this is the CoffeeScript:

inventoryModule = angular.module 'InventoryModule', []

inventoryModule.factory 'Items', ->
    items = {}
    items.query -> [
        {title: 'Table', price: '5'},
        {title: 'Chair', price: '10'}
    ]
    items

inventoryModule.controller 'InventoryController', ($scope, Items) ->
    $scope.items = Items.query

JSFiddle its supposed to add it in the markup automatically when selecting Angular as a Framework. — Alexander Ventura
– Alexander Ventura, Commented Jul 5, 2013 at 20:02

Benjamin Gruenbaum · Accepted Answer · 2013-07-05 20:05:33Z

5

Your code contains the following

items.query -> [{title: 'Hello', price: '5'}]

Which translates to:

  var items = {};
  items.query(function() { // Items has no method query
    return [{
        title: 'Hello',
        price: '5'
      }];
  });

What you meant, is to define a member as a function, so it should be:

items.query = () -> [{title: 'Hello', price: '5'}]

Which translates to:

  var items = {};

  items.query = function() {
    return [{
        title: 'Hello',
        price: '5'
      }];
  };

Which is what you meant :)

(fiddle)

answered Jul 5, 2013 at 20:05

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

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

5 Comments

Alexander Ventura Over a year ago

I see. Tricky CoffeeScript syntax I am still getting used to.

Benjamin Gruenbaum Over a year ago

@AlexanderVentura I'm glad I could help. If it helps I've done, and seen AngularJS +CoffeeScript development and it's very nice :)

Alexander Ventura Over a year ago

One last thing, when I change the $scope.items to $scope.items = Items.query the page still does not parse. Why is that?

Benjamin Gruenbaum Over a year ago

@AlexanderVentura How would it know if it's a call or an assignment? There are no parameters :) You can try $scope.items = Items.query()

Alexander Ventura Over a year ago

I see, I tried to keep it as a purist CoffeeScript syntax. Thanks again.

Collectives™ on Stack Overflow

Angular JS + CoffeeScript + JSFiddle: Code not working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related