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.

As a first teaser set of screenshots, the end point is like this:

Tutorial_7 home page

Tutorial_7 clubs

Tutorial_7 teams error handling

The tutorial comes in multiple parts:

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:

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

  1. Pingback: CRUD application with AngularJS, Rails, twitter-bootstrap and ng-boilerplate: part 5 New and Delete | technpol

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

  3. Pingback: CRUD application with AngularJS, Rails, twitter-bootstrap and ng-boilerplate: part 2 boilerplate served by rails | technpol

  4. Pingback: CRUD application with AngularJS, Rails, twitter-bootstrap and ng-boilerplate: part 3 List | technpol

  5. Pingback: CRUD application with AngularJS, Rails, twitter-bootstrap and ng-boilerplate: part 4 grid and CRUD | technpol

  6. Pingback: CRUD application with AngularJS, Rails, twitter-bootstrap and ng-boilerplate: part 6 another entity | technpol

  7. Pingback: CRUD application with AngularJS, Rails, twitter-bootstrap and ng-boilerplate: part 7 tidyup | technpol

  8. Pingback: AngularJS and Rails – shared directory or not | technpol

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

  10. Pingback: AngularJS and Devise – authentication with a rails server | technpol

  11. Pingback: Rails generator to generate angular views | technpol

  12. Pingback: Adding translation using angular-translate to an angularjs app | technpol

  13. Thanks so much for the in depth tutorials. I’m so glad I finally found a tutorial that demonstrates how I can use Angular for full app with authorization, after I completed the RailsCast tutorial. However, I was curious to why it is so much more complicated than the Angular RailsCast? Why do we need node.js, Bower, Grunt, ng-boilerplate? RoR is my first programming experience, but now it basically seems like all it’s good for is backend and that I’m only half way there before I can make any decent web apps.

  14. I think the answer is that you can do the RailsCast way, which basically uses Angular to enrich Rails. That’s an entirely valid way to put your application together.

    Alternatively, you can run a client and a server that are separate, connected only by a well-defined json interface. That’s perhaps a good choice if you want to get into all the various plugins and extensions that are available for Angular. My gut feel is that the angular/rails plugin would give me support issues longer term, but it was not a definite call, either way would work.

    I’m finding that now I have it running, it’s not that big a deal. I have my rails scaffold generator creating most of the angular code for me, and for many of the pages they run “out of the box” with almost no tailoring. So in a sense I’m still going into rails, typing “rails generate scaffold xxxxx” and I end up with a set of rails and angular code that pretty much runs straight away. So I think the rails dream is still working for me – but just with a different set of code living on the front-end.

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

  16. Pingback: 앵귤러 공부하기 – 전산기술자 제이

  17. Pingback: 8: Deletes and resource error handling | technpol

  18. Pingback: AngularJS and Rails CRUD application using ng-boilerplate and twitter bootstrap | Gatelockservice

  19. Pingback: Web Programming Blog

  20. Hi, this article very userfully.Thanks a lot.I have question about ng-boilerplate.I user Kendo-UI in ng-boilerplate.In the Kendo-UI have call ajax like this : in the setting.tpl.html have tabs,when I click tab it will load file html.

    First tab
    Second tab

    When I run it got the error the abc.tpl.html not found.Can you have any advice?

    Thanks

  21. I think some of that didn’t display properly?

    Sometimes you need to put the pathname on the front of the templates – they seem to always require at least the enclosing directory (so maybe “myTemplates/abc.tpl.html”).

  22. Hi Paul,
    Thanks for your answer.My code is : .And ng-bp build acb.tpl.html into templates-app.js.Right?
    But It still got the error not found.

  23. OK, I have no experience with Kendo-UI at all. But I know that when ngbp runs, the templates are all pushed into build/src/templates-app.js. So you should be able to look in there and see the template name that you’re looking for. I’m not sure whether the template cache is going to work with Kendo though – I’m not sure how ngbp would know how to deal with that.

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