AngularJS, Yeoman, CoffeeScript and Rails API


I’ve been learning Angularjs lately, and I’ve come across a number of tutorials combining Angularjs with Rails, or Angular with Yeoman, but nothing that combines all three.  So I’ve cobbled together a few different tutorials into one AngYoRails project.

The main basis of my tutorial is the Angular tutorial. Yeoman is a code generator that has many generator modules to create the kind of app you want — Angular, Node, Backbone, and many more. That tutorial walks you though creating a basic Angular front-end app with Yeoman. The app is a to-do list, where you can enter todos in a form and submit them and they appear in the list. The tutorial has a good explanation of angular directives, app structure, and data binding.

Once you complete the tutorial and get your Angular app working, the next step is to wire it up to a rails API. My goal for this step is to show how an app can be structured into front-end Angular and back-end rails apps, with Rails just exposing a JSON api.  So let’s get the rails app started:

rails new todo -S

edit Gemfile:

group :development, :test do
  gem 'rspec-rails'

and run:
bundle install

so now you have a basic rails app. Let’s create a scaffold for our Todo model/controller :

rails g scaffold todo description:text rank:integer:uniq


This will create a Todo model with description and rank fields, a database migration to create the table, a controller with basic CRUD methods for our Todo model, and html views (which we don’t need).

Run the migration with

rake db:migrate; RAILS_ENV=test rake db:migrate

If you get an error, you database probably needs setup first; that’s outside the scope of this tutorial but check out How to Setup Ruby on Rails with Postgres.

Now you should be able to start you rails app with ‘rails s’, and navigate to http://localhost:3000/posts and create some new posts. Great!

I’ve structured my rails and Angular app by moving my Yeoman-generated angular app under the rails app in a directory called ‘angular’. To see how I organized this you can see the whole thing on github :

Now comes the tricky part — setting up angular to get/post data to this API to read/write Todo items. First, lets install angular-resource:

cd angular
bower install angular-resource

This will install the angular-resource module in your Angular app under bower_components/angular-resource.  It should also add a <script> tag to your angular/app/index.html file, if not add it :

<script src="bower_components/angular-resource/angular-resource.js"></script>

and in your angular/app/scripts/app.js (or, if using coffeescript like I am) should contain ‘ngResource’ :

 .module('angularCoffeeApp', [


Now let’s create a service in our angular app, that we can call from our controller to interact with the API. Create a service using the Yeoman angular:service generator:

yo angular:service --coffee todo

This will create a file at app/scripts/services/ with a stub implementation. Change it to contain the following:

'use strict'
# @ngdoc service 
# @name angularCoffeeApp.todo 
# @description 
# # todo 
# Factory in the angularCoffeeApp. 
  .factory 'TodoService', ($resource) ->
    class TodoService 
      constructor: () ->
        @service = $resource('http://localhost:3000/todos/:id.json', {id: '@id'}) 
      create: (attrs) ->
        todo = 
          description: attrs.description
        new @service(todo).$save (todo) ->
 = todo.$id 
      destroy: (todo) ->
        new @service(id:$delete (todo) ->
          console.log("todo deleted") 
      all: ->

This TodoService has a constructor, which creates a @service object which is our angular-resource which will talk to our Rails API. It also has create(), destroy(), and all() methods we can call to create a new todo, delete a todo, and to list all the todos. We can invoke this service in our main Todo controller, angular/app/scripts/services/

'use strict'
# @ngdoc function 
# @name angularCoffeeApp.controller:MainCtrl 
# @description 
# # MainCtrl
# Controller of the angularCoffeeApp
 .controller 'MainCtrl', ($scope, TodoService) ->
   $scope.todosrv = new TodoService()
   $scope.todos = $scope.todosrv.all()

   $scope.addTodo = ->
     $scope.todo = '' 

   $scope.removeTodo = (todo, index) ->
      $scope.todos.splice(index, 1)


This controller gets invoked when we navigate to our main angular route at ‘/’.  It first sets up a new TodoService instance, and calls the all() method on that instance to get a list of all todos. It pushes that onto the $scope.todos , which we will use when rendering the todo list. There are also methods to add and remove todos, which invoke the create() and remove() methods on the TodoService. We can call those when a user creates a new Todo, or deletes a Todo from the page.

So let’s do that: in app/views/main.html, use this markup:

<div class="container" ng-controller="MainCtrl">
 <h2>My todos</h2>
<!-- Todos input -->
 <form role="form" ng-submit="addTodo()">
 <div class="row">
 <div class="input-group">
 <input type="text" ng-model="todo.description" placeholder="What needs to be done?" class="form-control">
 <span class="input-group-btn">
 <input type="submit" class="btn btn-primary" value="Add">
<!-- Todos list -->
 <div ui-sortable ng-model="todos">
 <p class="input-group" ng-repeat="todo in todos" style="padding:5px 10px; cursor: move;">
 <input type="text" ng-model="todo.description" class="form-control">
 <span class="input-group-btn">
 <button class="btn btn-danger" ng-click="removeTodo(todo, index)" aria-label="Remove">X</button>


The first section is the ‘add a new todo’ form. Note the ng-submit directive, which tells angular to call addTodo() method on our controller. Our controller, as you saw above, calls our TodoService to post the todo to our rails api, and also pushes it onto the $scope so our list of todos gets updated.  The input field also has a ng-model field to map this form field onto the Todo model.

The second section renders the todo list; note the ng-model again, and ui-sortable on the list view; this allows us to drag-and-drop the todo items in the list to reorder them. The ng-repeat directive lets us loop over the todos list, and again the ng-model on the input field binds to our model’s description attribute. There’s also a ‘delete’ button, which calls removeTodo() when clicked. We pass in the todo item itself, as well as the index of where it is in the list, so we can remove it from our angular app as well as call the Rails api to delete it.

So if you wire all this up, and try it out… it doesn’t work. You should get an error like this:


XMLHttpRequest cannot load http://localhost:3000/todos.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.


This is due to Rails ‘Cross-Origin Resource Sharing’ policy; basically, it won’t allow your angular app to request resources from the rails app unless its on the same host/port. We could set up Angular to proxy requests to the Rails app, but my intention was to design something that could be loosely coupled between the front-end Angular app and the Rails api, so dealing with this CORS problem seems more fitting.

To address it, add the rack-cors gem to your Gemfile:

gem 'rack-cors', require: 'rack/cors'

and ‘bundle install’ again.  Then edit your config/application.rb to configure CORS:


 config.middleware.use Rack::Cors do
   allow do
     origins '*'
     resource '*', :headers => :any, :methods => [:get, :post, :options, :delete]


Restart your rails app, and now your request to Angular should work and render your todo list.

Screen Shot 2014-07-06 at 6.50.52 PM


If you check your rails app, you should also see your new post persisted there, through the JSON api:

Screen Shot 2014-07-06 at 6.51.19 PM



My app isn’t complete yet, it still needs sorting to work and be persisted to the api.

The following resources were instrumental to my understanding of Angular, I’m very grateful to the authors for providing such great material:


If you have any comments or questions, feel free to leave them here or on the github issues page: 

Tagged with: , , ,
Posted in Code

Lazy loading javascript files with Rails

The Rails asset pipeline is wonderful for organizing your javascript files. Once you figure it out, it’s really quite nice.

One problem I had was that certain pages of my site needed some heavier javascript, and I wanted to delay loading those scripts until after the page is loaded. I hoped this would provide some perceptible page speed improvement to the user, who wouldn’t have to wait until all the js is downloaded to see the page.

However the Rails asset pipeline doesn’t really support this ability — not that I could see, anyway.  I did come across a couple resources that helped me figure this out, and here’s how I got it to work:

First, set up your application layout.  I do something like this, to allow for the main site-wide js to be loaded, but also defer to the specific page if anything needs to be added there:

<%= stylesheet_link_tag "application" %>
 <%= yield :stylesheets %>
 <%= javascript_include_tag "application" %>
 <%= yield :javascripts %>

now instead of loading the ‘application’ js file, change your layout to load a new file called ‘application_bootstrap.js.erb’  in your app/assets/javascripts directory:

<%= javascript_include_tag "application_bootstrap" %>

in that application_bootstrap file, use this code to append the real application.js file to your page after it’s loaded (using code from :

// Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = '<%= asset_path "application.js" %>';
// Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

Notice in this case I have loaded application.js, which is in my /app/assets/javascripts folder. Since it’s part of the asset pipeline, that file will get loaded and its contents executed.  On our production site, all these assets will have fingerprints so the filenames will look like this:


Note that we use the asset_path erb helper to generate the correct path to that file.  When we look in the application.js file itself, we see the usual Rails asset pipeline notation for including multiple js files, like this:

//= require jquery-1.7.2.min
//= require jquery_ujs
//= require bootstrap.min
//= require bootstrap-datepicker.js
//= require jquery.placeholder.js
//= require site

when the asset pipeline runs, it will concatenate all those files together ,and deliver it to the browser. As long as we don’t need those files before rendering the page, the site should still work.  If some are still needed, you can separate those out and load them as usual, and lazy-load the rest.

Also I mentioned having additional js to render on specific pages — those can be lazy loaded too. Just repeat the same process you did for application_bootstrap.js. Create whatever_bootstrap.js.erb, put the above code in it, and change the

<%= asset_path "application.js" %>

To whatever.js you want to load for that page (assuming whatever.js is in your app/assets/javascripts directory).  Be sure to test this on a variety of different browsers, I did see some different behavior on older browsers that left the page unusable.

Don’t forget to add these new assets to the precompile list in environments/production.rb (or whatever env you want):

config.assets.precompile += %w(application_bootstrap.js whatever_bootstrap.js)

And you should be good to go. try running RAILS_ENV=production rake assets:precompile, and see if you get an application_bootstrap.js file with the expected contents.


Here is a screenshot of firebug after implementing this change. You can see that the home_bootstrap js gets loaded before the page is finished loaded (vertical red line), but the home-5c702… js file is loaded after.  So the user isn’t waiting on that file to load before seeing the page.

Some caveats:

This won’t work if you use require_tree in your asset pipeline; in that case, you may need to put your application_bootstrap.js.erb file in its own subdirectory so it doesn’t get loaded by the asset pipeline automatically.

There are other, probably better ways of lazy loading javascript; I’m still experimenting with this, so will probably revise it as I make tweaks.  One possibility is replacing the code in application_bootstrap with the a call to the LazyLoad library, and ensuring LazyLoad itself is loaded in the layout.



Tagged with: , , ,
Posted in Code

Boston Tech Scene 101

People often reach out to me asking about the Boston web/mobile tech scene. How to find meet ups, looking for co-founders, or recruiting for their company.  Here’s a collection of resources for incubators, meet ups, and other events around Boston.

This list is by no means exhaustive, but I will add to it as I find more resources. If you would like me to add anything, drop me a note on the contact page.

Developer training

Startup Institute – training program across a variety of disciplines to prepare students for startup careers.  — web developer training program, run by Thoughtbot (see below).

General Assembly – Offers classes on a variety of tech topics, as well as more in-depth courses.

RailsBridge Boston – Introductory Ruby on Rails workshop for women.

Launch Academy – 10-week course from novice to junior developer



Incubators / Accelerators / Co-working

TechStars — One of the premiere incubators and startup schools nationwide, TechStars has a Boston location and accepts a few Boston-based startups each year.

Paypal Start Tank — Paypal hosts select startups in their Financial District offices, as well as offers mentoring and events. 

Cambridge Innovation Center – rental space and facilities specially arranged for small and startup companies.

MassChallenge — Startup accelerator and competition.

Idea — venture lab attached to Northeastern University , open to students there.

OpenIncubate — IT-focused incubator, also associated with OpenStack cloud software.

Harvard i-Lab — venture lab associated with Harvard University, open to its students.




Ruby and Rails groups

Boston.rb — the biggest gathering of Ruby enthusiasts in the area. Videos of presentations are also available on their site.

Thoughtbot — A consulting company, not a public forum, but a strong presence in the Ruby scene and worth getting to know.




WebInno — David Bisel (of Venrock) puts on this popular bi-monthly mixer and demo night.

Boston hosts many meet ups in various topics  around tech and startups, search to find those in your area of interest.  Check out Lean Startup Circle, or Boston Mobile Apps Developers meetups.



Innovation District – Boston marketing term for neighborhoods around the Seaport District. The city of Boston is making an effort to woo startups and tech companies to the area.


Posted in Events

Set up a Torrent and Media Server on Raspberry Pi

Photo courtesy of Feremy Fuksa, used under Creative Commons license

Photo courtesy of Jeremy Fuksa, used under Creative Commons license

I recently purchased a Raspberry Pi mini computer, and had to think of something to do with it.  I decided I would offload the torrent downloading and media serving responsibility from my home PC to this tiny wonder. Here’s how I did it:


1) setup your raspberry pi.  Here’s an intro tutorial.  Basically you need a PC of some sort, an SD card, and a way to copy files to that card from the computer (eg a USB adapter for the SD card).  I used a mini SD card with a ‘macro’ SD card holder, and plugged that into my pc with a multi-type card reader like this one.  You’ll want to use the default Raspbian Wheezy image for your card, download it here. The Raspberry setup guide presumes you use a Windows PC, if not you’ll need other instructions on how to setup the SD card.


2) boot your pi for the first time. This is a bit of pain, because by default the Pi needs a video display connected to its hdmi port, and keyboard to its usb ports. I’d rather be able to just boot it and the ssh to the Pi, but to set that up you have to boot the standard way first. I connected to my TV with a hdmi cable and an old USB keyboard I had lying around.


3) setup ssh. You’ll want to do the rest of the setup from the comfort of your laptop or desktop, so the first thing we’ll do is setup ssh on the Pi so we can connect to it instead of using the TV.  Here’s one way to do it.


4) install transmission.  This will be our bittorrent client.  Instructions here. You will want to change the rpc-whitelist (I just turned rpc-whitelist-enabled  to false). Watch-dir is the location that transmission will monitor for uploaded torrent files; any files it finds there will automagically begin torrenting. Don’t forget to change the password, as we’ll be exposing this via web. Try it out by going to http://<yourPiIpAddress>:9091/  (that should be the default port configured in /etc/transmission-daemon/settings.json, under ‘rpc-port’). You can change some settings from the web gui if you like.

5) setup an external drive.  You’ll want to add a usb drive to store your torrents and media on, so connect that up. It should be accessible on /media/usb0. Make sure your transmission settings say to save to that drive or some folder under it.

6) install serviio for media serving.  I run Serviio on my Pi, which provides a DNLA server that other devices, including many modern TVs, can connect to and stream content from.  To install Serviio you first need Java, so get the java distribution for ARM from Oracle Java. I didn’t find this version for ARM in their main lists, so you have to hunt for it.  Download that, copy it to you pi, unpack it and install it in /opt/jdk1.8.0.  Update your PATH env variable to include /opt/jdk1.8.0 in ~/.bashrc.

Once Java is installed, confirm it by running ‘java -verison’.  Then proceed to install serviio.  Download Serviio from , get the linux version.  You’ll also want to install some of the prerequisites, such as ffmpeg, by running:

- apt-get update

- apt-get install ffmpeg

- download serviio, unpack it, and install wherever you like. Run the server by running ‘bin/’ from the serviio directory. Hopefully, it will start up. It may take some time to start, due to the Raspberry Pi’s relatively slow cpu.

- Once you confirmed serviio is running ok, you need to configure it. This difficult because we’re not running our Pi with a display, so we want to run the serviio console on our laptop (or desktop), and have it connect to the serviio server on the Pi.  This can be done with some java vm arguments.  Simply start the serviio console from the command line with:

on the Pi:
in the bin/ file, add -Dserviio.remoteHost=<server_IP_address> to the end of the JAVA_OPTS line

on the client machine:
in the bin/ file, add -Dserviio.remoteHost=<server_IP_address> to the end of the JAVA_OPTS line

Then start the server on the pi with, and the client on your machine with You should see the GUI console pop up, and hopefully connect to your Serviio running on the Pi. From here, you can set the media directory (choose your Transmission download directory from step 4), and whatever else you want. Be sure to refresh the library to get Serviio to pick up all your files.

Disconnect your console, and Serviio should still be running. At this point, you should be able to turn on your TV or DLNA device and see the Serviio registered there. You can browse to your content and play it back on your TV!

At this point, you will probably want to ensure that Serviio and transmission are started every time Pi boots, and if the process dies for some reason (fairly common with Java) to restart it.  You can do this with some scripts in /etc/init.d:




I have to admit this isn’t entirely stable, and I need to reboot my Pi occasionally. I think it’s pushing the little Pi to its memory and cpu limits, especially running Serviio which requires Java and a considerable amount of memory. Still, it’s a fun project in a small package.

Feel free to contact me if you have trouble or any questions.


Posted in Uncategorized

General Assembly offers tech education

General Assembly ( is a new face in the Boston tech scene, having opened its Kendal Square location back in October.  GA claims to “transform thinkers into creators through education and opportunities in technology, business, and design.”  GA hosts a variety of classes, from a one-evening session on mobile apps to a 10-week course in product management.

I attended the class titled “Building Web Apps with Backbone.js”, which gave an intro to the popular Backbone.js framework. About 12 people attended, with varying levels of skill and experience. The instructor, Dave Wasmer, took the pulse of the attendees with a quick javascript quiz and then dove into the meat of the material.

Dave has a great command of Javascript and backbone.js.  Unfortunately Dave didn’t get a chance to cover some of the material, as the class had a lot of questions that slowed down his progress. It’s tough to do crowd control, and ensure that everyone has the right background to benefit from the material.

Still, my group did get some valuable tips out of the class, and we’re going back for the Advanced backbone.js course later in February. A big benefit to attending in-person classes and meetups (as opposed to doing tutorials online) is the chance to meet and talk with other people working in the field.  We met a number of great people, and I left thinking that General Assembly is making a big contribution to the Boston tech community.

Slides from the class are here:

Dave is also very interested in building a community of Backbone.js developers in Boston, so if you use backbone or are interested in learning, contact Dave on twitter at @davewasmer .

More General Assembly course listings at



Tagged with: , ,
Posted in Code, Events

Learning as a Team

Former PMI Mass Bay president Steve Martin (not that Steve Martin) presented at this month’s chapter meeting in Burlington.  His slides, and other materials are available here:

Steve’s talk focused on teams and learning, and how teams learn differently from individuals.  After the basic concepts, he then applied that idea to the world of corporate training — for example, Scrum training for a team or whole company.  The way it’s usually done is a 1-day or a few days of intensive training, where the topic is introduced and a lot of material thrown at the student, and after the training they are ‘certified’ and now ready to be a ‘master’ of this subject at their company.

Except we don’t retain that much of what was presented; 25%, maybe. And we don’t learn as well given all the material up front, as opposed to learning a little bit over time.  So Steve proposes work-based learning on real projects, with teams using a scrum-like process to figure out what is most important for them to learn first (the backlog), experiment with that knowledge and do something practical, then reflect on how it went before learning the next important concept.

Steve claims this style has shown to reduce cost of training up to 30%, and since the team is using a real project to learn the new material, benefits are shown immediately. This takes the focus away from passing a test or completing a course to using the new knowledge to actually work better and improve the project, which makes the team more accountable for results.

Steve blogs at

More info on PMI Mass Bay (Boston-area chapter) and upcoming events available here:


Posted in Agile and Scrum, Events

Agile Boston – Thanksgiving for Scrum

over 100 in attendance at Agile Boston "Give Thanks for Scrum" event.

over 100 in attendance at Agile Boston “Give Thanks for Scrum” event.

Today I attended the Agile Boston group’s November meetup, titled ‘Give Thanks for Scrum‘.  The “giving thanks” part was to recognize everyone working to transform their team/organization to embrace Scrum and agile methodologies. Ken Schwaber and Jeff Sutherland each presented, and both had some interesting highlights about how far scrum has progressed since its creation in 1990s:

  • 400k+ job postings that mention ‘scrum’; Ken claims we’ve reached the tipping point
  • Scrum has moved out of just software, and into manufacturing, even social ‘do-good’ organizations with great results
  • US Dept. of Defense now requires their vendors to produce product in an iterative fashion, with frequent customer touchpoints – one of the key principles of agile

Some other fun stuff I learned today:

  • Jeff told the story of Joe Justice, who led a top-ten finishing team in the 100mpg electric car competition, delivering a road-legal electric vehicle in only 3 months! — using agile practices.
  • Heang Ly led a session demonstrating several ice-breakers, those getting-to-know-you games and funny practices to get strangers talking.  It seems like everybody likes to call these things ‘lame’ and act too good for them, but it’s amazing how earnest everyone was once we got going. People came out of their shells and talked, offered to help each other, and shared their insights.  I soon got over my self consciousness and thoroughly enjoyed myself.
  • Dan Mezick emceed, and brought passion and energy to the room from start to finish. I liked his no-holds-barred style, willingness to say daring things and challenge conventional wisdom.  I’ve started reading his blog.

More info on upcoming meetings at the Agile Boston site.

I met some great people, had some ok food, and generally had a good time. It wasn’t perfect — some people talking during the presentations made it hard to concentrate, and it seemed like a lot of attendees already knew each other, I had a hard time approaching people (which is more my problem than theirs).  But everyone was warm and inviting, and pretty positive people overall — the kind of people you get energy from when they’re around.  So I’ll probably be going back for the next meeting.
Posted in Agile and Scrum, Events