8: Deletes and resource error handling

Part 8 of the tutorial focuses on adding a delete button to our ngGrid, and adding error handling in case our rails application rejects our updates.  You can find the tutoral index, or hit the tutorials menu at the top and select the Rails 4 tutorial.

If you haven’t completed the earlier tutorials, you can get the code at github:PaulL tutorial_7.

Continue reading

Advertisements

4: Adding a basic list using $resource for a restful query from rails

In this post we start building out our AngularJS client, using ngResource to pull data from our rails 4 server.  At the end of section 4 we should have a basic clubs list function operational.

In this post, I’m going to talk a bit more about what angular is actually doing, and how it connects to rails.  Hopefully it will be semi-understandable, but I’ll note that it’s taken me a few weeks to bend my brain around what angular is doing – it’s quite different than rails.

If you’ve dropped into the middle of this tutorial, you can get the code for part 3 of the tutorial from gitHub:PaulL.  If you’re looking for the other parts of this tutorial you can find them by going to the index page or hitting the tutorials menu above.

Continue reading

3: Installing ng-boilerplate, and serving it through rails

In section three of the Rails 4 and AngularJS tutorial, we make use of the excellent ng-boilerplate template provided by joshdmiller.

Note before you begin this section of the tutorial that ng-boilerplate is close to version 4.0, and that version will change the structure substantially.  I’m planning to plug that content in over the next few weeks as it comes available, so expect this tutorial to be evolving.  It should be fit for use, but if you complete it over multiple days you may find that it changes under you whilst you’re doing it.  Caveat emptor.

Continue reading

2: Creating the base rails backend

In this portion of the Rails4 and AngularJS tutorial we build the base of the rails backend.  We’ll come back later and add Devise and CanCan to it, for now we’re just focusing on having an application that runs and serves json, at the end of this segment you should end up with a Rails server that is providing clubs.json and teams.json, ready to have the Angular frontend added.

If you’re interested in the rest of this tutorial, you can visit the index page, or you can hit the tutorials menu above and look at the rails 4 tutorial category.  If you haven’t yet installed Rails 4 you may want to look at the previous page on installation, and if you’re fine with the Rails portion, you may want to move onto the next page that starts the AngularJS install.  Finally, the code for the position at the end of this section of the tutorial can be found on github:PaulL:tutorial_1_and_2.

Continue reading

1: Installing Rails 4 without breaking Rails 3

The first part of the Rails 4 tutorial is actually getting Rails 4 without messing up your existing Rails 3 install.  The other parts of this tutorial can be found at the index, or by hitting the tutorial menu above and selecting the Rails 4 tutorial option.

We’re going to use RVM to create a separate gemset for ruby 2.0.0, which should give us separation between our projects.

Continue reading

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.

Continue reading

Rails app for Angularjs, building the rails league application: part 1

Part 1 of a tutorial that connects AngularJS to a Rails backend. This post focuses on creating a base Rails server application that our AngularJS front end will later connect to, it assumes that you are familiar with Rails already and have all the rails dependencies installed.  The next post is Installing ng-boilerplate, and serving up via Rails.  You can also find the index of the posts in the 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