AngularJS and Rails Tutorial: part 6 the team entity, grid filtering, links between pages

Part 6 of a tutorial that connects AngularJS to a Rails backend. This post focuses on updating our modal form to support the “new” function, adding a delete button to our ngGrid, and adding error handling in case our rails application rejects our updates. We also add filters to our grid and automatically populate the team filter when we navigate from a specific club.  The previous post was New and Delete, the next post is Tidyup.  You can also find the index of the posts in the tutorial, or hit the tutorials menu at the top and select the Rails 3 tutorial.

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.

Continue reading

Advertisements

AngularJS and Rails CRUD application using ng-boilerplate and twitter bootstrap: 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.

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.

Continue reading