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.
This tutorial replaces my previous rails 3 tutorial, with the following key changes:
- Upgrades to rails 4 and twitter bootstrap 3. This is simply about keeping up to date
- Moves away from modals/dialogs for the edit functions, instead using a second state. This allows support for multiple views, which cannot easily be done with dialogs
- Provides full end-to-end testing using protractor and astrolabe
- More thorough treatment of logon and registration using Devise, including CSRF protection
This tutorial is complete, and ready for use, although I may further extend it from time to time.
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, and am providing instructions for implementing authentication using Devise and CanCan. 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.
The code will walk through a number of Angular concepts, including controllers, directives, filters, services, internationalisation/translation, resources and grids.
This code will be in github:PaulL, my aim is to have a branch that shows the ending point for each tutorial page. I’ll link that to the end of each page, and the start of the next page, allowing 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.
The result of the tutorial should be an application along these lines:
This tutorial comes in multiple parts:
- 1: Installing Rails 4 without breaking Rails 3
- 2: Building the base Rails app
- 3: Installing ng-boilerplate, and serving it through rails
- 4: Adding a basic list and connecting to rails with ngResource
- 5: End to end testing
- 6: ngGrid for the list, and an edit page
- 7: Adding unit testing using karma and jasmine
- 8: Error handling and a delete button
- 9: Teams entity, and links from clubs to teams
- 10: Adding devise integration, logon and security
- Upgrading to ng-grid 3.0
- 11: Adding translation and internationalisation (not complete, consider looking at the Rails 3 version instead)