AngularJS and Rails 4 CRUD application using ng-boilerplate and twitter bootstrap 3: Tutorial Index

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:

clubs list page with grid

club detail page

This tutorial comes in multiple parts:

Advertisements

16 thoughts on “AngularJS and Rails 4 CRUD application using ng-boilerplate and twitter bootstrap 3: Tutorial Index

  1. Pingback: Installing Rails 4 without breaking Rails 3 | technpol

  2. Pingback: Creating the base rails backend | technpol

  3. Pingback: 4: Adding a basic list using $resource for a restful query from rails | technpol

  4. Pingback: 5: End to end testing | technpol

  5. Pingback: 6: Adding ngGrid and an edit page | technpol

  6. Pingback: AngularJS and Rails CRUD application using ng-boilerplate and twitter bootstrap: Tutorial Index | technpol

  7. Pingback: 7: Adding unit testing using karma | technpol

  8. Pingback: 9: Adding the teams entity, and links from clubs to team | technpol

  9. Pingback: 10: Adding devise integration – logon and security | technpol

  10. Pingback: Rails app for Angularjs, building the rails league application: part 1 | technpol

  11. Pingback: AngularJS and Rails Tutorial: part 3 a basic list using $resource for a restful query from rails | technpol

  12. Pingback: AngularJS and Rails Tutorial: part 4 ngGrid and edit in a modal popup | technpol

  13. Pingback: AngularJS and Rails Tutorial: part 5 New and Delete, initial $resource error handling | technpol

  14. Pingback: AngularJS and Rails Tutorial: part 6 the team entity, grid filtering, links between pages | technpol

  15. Pingback: AngularJS and Rails Tutorial: part 7 form error handling, datepicker | technpol

  16. Pingback: AngularJS and Rails Tutorial: part 4.5 unit testing bootstrap modals with Karma | technpol

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s