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.
As a first teaser set of screenshots, the end point is like this:
The tutorial comes in multiple parts:
- Initial thoughts on integrating AngularJS and Rails
- Part 1: Creating a rails backend for the League app :part 1
- Part 2: Installing ng-boilerplate creating a standalone angular app, and serving up via Rails
- Part 3: Adding a list (query) page to the AngularJS app and adding karma unit testing
- Part 4: Updating the list to use ngGrid, and building an edit popup
- Part 4.5: Karma unit tests for the modal dialog
- Part 5: New and Delete
- Part 6: Creating teams and a relationship between clubs and teams
- Part 7: Tidyup
- Translation and internationalisation
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:
- CSRF protection with rails and angularjs
- Integrating Devise authentication with AngularJS
- Using rails generator to generate angular modules
- JSON/JSONP vulnerability protection