Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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
share|improve this question
JSFiddle its supposed to add it in the markup automatically when selecting Angular as a Framework. – Alexander Ventura Jul 5 at 20:02
add comment (requires an account with 50 reputation)

1 Answer

up vote 1 down vote accepted

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)

share|improve this answer
1  
I see. Tricky CoffeeScript syntax I am still getting used to. – Alexander Ventura Jul 5 at 20:20
@AlexanderVentura I'm glad I could help. If it helps I've done, and seen AngularJS +CoffeeScript development and it's very nice :) – Benjamin Gruenbaum Jul 5 at 20:22
One last thing, when I change the $scope.items to $scope.items = Items.query the page still does not parse. Why is that? – Alexander Ventura Jul 5 at 20:27
1  
@AlexanderVentura How would it know if it's a call or an assignment? There are no parameters :) You can try $scope.items = Items.query() – Benjamin Gruenbaum Jul 5 at 20:29
I see, I tried to keep it as a purist CoffeeScript syntax. Thanks again. – Alexander Ventura Jul 5 at 20:29
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.