Post navigation

A tutorial that connects AngularJS to a Rails backend, written for someone who is already familiar with Rails and looking to get the usability and coding productivity benefits of AngularJS. What distinguishes this tutorial from others on Angular is the Rails backend, the focus on providing full CRUD functionality, including form pages for the new and edit functions, and connecting two entities together with a foreign key relationship.

The tutorial is built around a sports league app, called League. It has clubs, each club has teams. The entities are pretty simple, but are sufficient to demonstrate a lot of things. It builds slowly and attempts to explain the AngularJS concepts as I understand them (and an important warning here: I’m still learning AngularJS, so no guarantees that I understand it right – but at the end of the tutorial you’ll have an app running, which is a good starting point for learning more).

In the tutorial I’ve chosen to use vanilla Rails as the backend, a real app would clearly use authentication such as Devise and CanCan, and a bunch of other Rails Gems to provide a richer experience. I’ve chosen to use the ng-boilerplate application scaffold, which provides a set of build tools and provides a directory structure to store the application in. You could make different decisions without impacting the outcome too much – I’d suggest starting by building it this way, then make your own tailoring once you’ve got the hang of the process.

I have added unit testing using karma to the tutorial, parts 3 and 4.5 are key to this. Once ng-boilerplate adds e2e testing (in the next few days) I intend to add that too. At that point, I think as a framework this is getting close to something you could start building upon.

There is a newer, rails 4 and newer angularJS, version of this tutorial. It is also more complete and has a nicer UI that doesn’t use modal windows, which is probably a better choice for anyone starting fresh today. The first page in that tutorial is here, and the index here. It is a work in progress at present, but also worth a look. The pages for this rails 3 tutorial, and the rails 4 tutorial (and in future other tutorials) can be found under the tutorials menu item above.

The sample code for this tutorial is on github:PaulL, there is a branch that shows the ending point for each tutorial page. This should allow people to do just one page of the tutorial if they so desire. It’ll also make it easier to see the code in context.

There is also some associated content thinking around whether it is really necessary to put rails and angular into entirely separate directories – when I started this I thought it was safer, but I’ve completed a proof of concept where I put them in the same directory, but still use them as independent toolsets. This makes git easier, and may let me use rails scaffolding tools to generate the Angular code framework. Still a work in progress, but initial thoughts are up.

There are also a few related Angular and Rails posts that I’ve put up, they’re not directly part of the tutorial, but are relevant:

Thanks so much for the in depth tutorials. I’m so glad I finally found a tutorial that demonstrates how I can use Angular for full app with authorization, after I completed the RailsCast tutorial. However, I was curious to why it is so much more complicated than the Angular RailsCast? Why do we need node.js, Bower, Grunt, ng-boilerplate? RoR is my first programming experience, but now it basically seems like all it’s good for is backend and that I’m only half way there before I can make any decent web apps.

I think the answer is that you can do the RailsCast way, which basically uses Angular to enrich Rails. That’s an entirely valid way to put your application together.

Alternatively, you can run a client and a server that are separate, connected only by a well-defined json interface. That’s perhaps a good choice if you want to get into all the various plugins and extensions that are available for Angular. My gut feel is that the angular/rails plugin would give me support issues longer term, but it was not a definite call, either way would work.

I’m finding that now I have it running, it’s not that big a deal. I have my rails scaffold generator creating most of the angular code for me, and for many of the pages they run “out of the box” with almost no tailoring. So in a sense I’m still going into rails, typing “rails generate scaffold xxxxx” and I end up with a set of rails and angular code that pretty much runs straight away. So I think the rails dream is still working for me – but just with a different set of code living on the front-end.

Hi, this article very userfully.Thanks a lot.I have question about ng-boilerplate.I user Kendo-UI in ng-boilerplate.In the Kendo-UI have call ajax like this : in the setting.tpl.html have tabs,when I click tab it will load file html.

First tab
Second tab

When I run it got the error the abc.tpl.html not found.Can you have any advice?

OK, I have no experience with Kendo-UI at all. But I know that when ngbp runs, the templates are all pushed into build/src/templates-app.js. So you should be able to look in there and see the template name that you’re looking for. I’m not sure whether the template cache is going to work with Kendo though – I’m not sure how ngbp would know how to deal with that.