

How to Wire Up Ruby on Rails and AngularJS as a Single-Page Application - jasonswett
http://www.angularonrails.com/ruby-on-rails-angularjs-single-page-application/

======
ewoutkleinsmann
We (10KB) have built our own CMS combining Rails and AngularJS. Our main goal
for our CMS was to turn every website made with it in a Single-Page
Application, but at the same time maintain support for server-side rendering.

We loved the combination of Rails and AngularJS, but we didn't like that we
had to write a lot of stuff twice (ie. Rails routes & Angular routes, Rails
controllers & Angular controllers). Therefore we have written quite some glue
code to automatically generate AngularJS code from our Rails code. I have been
wanting to make a full write-up of all our experience in combining Angular &
Rails for a while now, but didn't get to it yet. I did write-up a quick and
dirty way to automatically generate Angular Resources from you Rails
controllers, though. ([http://10kb.nl/blog/automatically-generate-angular-
resources...](http://10kb.nl/blog/automatically-generate-angular-resources-
for-your-rails-api))

And, if anyone has any questions about combining Rails & Angular feel free to
shoot me an e-mail.

~~~
martindale
I'm building something like this, but in node:
[https://github.com/martindale/maki](https://github.com/martindale/maki)

------
jesalg
Nice work! I've put up a similar (but much simpler) demo and blog post:
[https://github.com/jesalg/RADD](https://github.com/jesalg/RADD)

~~~
jasonswett
Nice. I think your Angular/Devise work will probably end up being helpful for
me.

------
mbell
Great write up! I wrote a bit[0] awhile back about setting html5mode routing
with rails and angular using a similar setup which may be a useful addon to
this article.

[0] [http://mbell697.github.io/2014/02/04/yeoman-angular-rails-
ht...](http://mbell697.github.io/2014/02/04/yeoman-angular-rails-html5mode/)

~~~
jasonswett
Thanks! I'll check it out.

------
lynndylanhurley
I've been using a similar setup for some time now. The most significant
obstacle for me was user authentication. For anyone else who needs to add auth
support to Angular + Rails:

[https://github.com/lynndylanhurley/ng-token-
auth](https://github.com/lynndylanhurley/ng-token-auth)
[https://github.com/lynndylanhurley/devise_token_auth](https://github.com/lynndylanhurley/devise_token_auth)

------
davedx
Nice writeup. I tried to do the same thing a few months back and gave up. How
did you handle getting your browser to talk to a server running on a different
port? (Cross-origin requests).

I have to say though, Rails used to be known for "convention over
configuration", but when I've tried to use it lately I've found it becomes
almost as complicated as configuring enterprise Java projects.

~~~
jasonswett
I didn't have to do anything special to allow CORS, and now that I think of it
I'm not sure why, because it's been necessary on other SPA projects I've been
involved with. Maybe because both servers are localhost. That would be a good
thing for me to figure out and include in the post. I'm kind of learning all
this in public.

------
tcopeland
I wrote up a guide to this along the lines of "here are things I _didn 't_ do
when doing my first Rails / AngularJS app":

[http://thomasleecopeland.com/2014/03/12/doing-a-rails-
angula...](http://thomasleecopeland.com/2014/03/12/doing-a-rails-angular-
mvp.html)

------
kclay
Fyi promise unraveling has been deprecated after Angular 1.2. So it should be

    
    
      Group.query().then(function(groups){
       $scope.groups = groups;

})

~~~
donmack
Do you have a link to any discussion on that?

It looks like the docs still suggest the method used in the blog post:
[https://docs.angularjs.org/api/ngResource/service/$resource](https://docs.angularjs.org/api/ngResource/service/$resource)

"It is important to realize that invoking a $resource object method
immediately returns an empty reference [...] Once the data is returned from
the server the existing reference is populated with the actual data. This is a
useful trick since usually the resource is assigned to a model which is then
rendered by the view. [...] This means that in most cases one never has to
write a callback function for the action methods."

~~~
bronson
[https://github.com/angular/angular.js/commit/fa6e411da26824a...](https://github.com/angular/angular.js/commit/fa6e411da26824a5bae55f37ce7dbb859653276d)

[https://github.com/angular/angular.js/commit/5dc35b527b3c99f...](https://github.com/angular/angular.js/commit/5dc35b527b3c99f6544b8cb52e93c6510d3ac577)

[http://blog.angularjs.org/2013/12/angularjs-13-new-
release-a...](http://blog.angularjs.org/2013/12/angularjs-13-new-release-
approaches.html)

~~~
donmack
Thanks. Okay, that makes sense.

The $resource usage described still works in version 1.2.19, with no promise
unwrapping options set. I could be wrong, but I think it is because the
$resource returns a reference to an empty object that has values copied into
it when the call completes. The actual promise is a property named $promise on
the returned object.

Example: [http://jsfiddle.net/92zmG/7/](http://jsfiddle.net/92zmG/7/)

------
klochner
Why is grunt needed? Is it because he's using Rails::API?

Most setups I've seen just let Rails serve the templates.

~~~
devNoise
grunt is the build tool for the Angular.js side of things. It is doing a lot
of other html front end stuff to make the SPA.

Also grunt has a watch process that see code changes, it will then compile
them and have the server get the browser to reload content to get the new
version.

When this gets deployed to your production server, you will probably use the
same server process that handles the Rails requests. grunt is for development
only.

------
weatherlight
Why RAILS::API instead of something like rabl?

~~~
mbell
Rails-api is a gem that configures rails in a more lean and mean fashion for
API usage, it doesn't handle the json serialization. Mostly rails-api disables
a lot of default rails features/middlewares that aren't needed when you're
only building an API.

For json serialization you may want to look at Active Model Serializers[0], I
found it much easier to work with than rabl, and it's also written by the
rails-api group.

[0] [https://github.com/rails-
api/active_model_serializers](https://github.com/rails-
api/active_model_serializers)

~~~
steveklabnik
AMS maintainer here, I'm making a big announcement about it soon.

That said, you're correct, AMS <-> RABL is the right comparison, not Rails-API
<-> RABL.

~~~
JustinAiken
Where is this AMS announcement going to be? I'd like to watch, since I use AMS
extensively (thanks for the great project!)

~~~
steveklabnik
It'll be on the rails-api-core mailing list:
[https://groups.google.com/forum/#!forum/rails-api-
core](https://groups.google.com/forum/#!forum/rails-api-core)

------
ch4s3
This is a pretty good tutorial, that seems to be poorly covered in the body of
recent(ish) blogs.

~~~
jasonswett
Thanks!

------
arxpoetica
Is this an isomorphic set up? Or does the front end do ALL templating?

~~~
jasonswett
No, not isomorphic.

