While learning AngularJS to make a single page app using Rails4, I found some good videos and blogs. However, I did not find any simple example for CRUD operations that made me easily understand the integration between Rails4 and AngularJS. So in this tutorial post, I explain how to create basic CRUD operation using Rails4 and AngularJS.
Here is my git repository for the complete code Github
Create rails project
Create User model
Create Users controller
Create the CRUD operation in users controller and send JSON response. The code sample is here
Add angular gem
In Gemfile add these two gems.
Adding ng-app and ng-view indicates that we have an AngularJS app in the page.
Create an angular controller
First let’s create a directory for our controllers. You can name it whatever you want.
Now create users_controllers.js file. Here I have used the same naming…
Disclaimer:NO CODE SNIPPETS THIS POST. I couldn’t do justice with these great resources available outlined below.
2. Setup an Angular and Bootstrap project with Yeoman
I only found Yeoman a month ago and it changed my life! Don’t let the Terminal setup put you off. The Yeoman Terminal Wizard structures your app with ease! It goes further to teach you how to do a “to-do app”. If your feeling keen, setup Yeoman project with Bootstrap and follow the Code School Tutorial. You’ll also never have to refresh your Browser with the livereload integration!!! Hint: To Edit HTML use the main.html (View) and main.js (Controller)
Yeoman.io – makes Terminal less frightening http://yeoman.io/codelab.html
I prefer setting up Yeoman with SASS, Compass, Bootstrap Version of SASS. So that I don’t diverge from the original intent of this post…You’ll have to wait for post on why I love SASS/SCSS. It’s also worth mentioning that Yeoman also sets up your project for TDD.
Ng-book …great book to follow: I haven’t finished this book yet but it’s great at explaining how angular works. Once you get more familiar with Angular this book is a great reference. I recommend following this book along with a fresh Yeoman project.
If you want awesome code samples here’s github repo. Here’s the book on Amazon
5. ng-europe conference: October 22nd-23rd, 2014
Not really a physical resource as such, but worth mentioning non-the-less! If you have the opportunity I think this would be an amazing event to sign up for. I wish I was going. ng-europe
Some Key Concepts to learn…
Model-View, View-Model: ng-view, ng-controller
scope: $scope, ng-model, two-way-binding
routing & templating: $routeProvider, $location
built-in filters that come with angular: orderby, date, currency, uppercase, lowercase
built-in directives that come with angular: ng-show, ng-hide, ng-repeat, ng-class, ng-click
The future of Angular
This is just a slide that I found while surfing the web. It’s an exciting insight into the future for Angular.
So hopefully this helps you get started with Angular JS! Good luck and Happy Coding. If you can suggest any other resources feel free to comment.
Since my last post I’d just started working on Pizza Mogul for Domino’s. To answer the question above…Pizza Mogul is great concept by Domino’s Pizza Enterprises so that anyone in Australia can sign up, create your own pizzas (using Dominos Toppings), and sell them to earn Virtual Money (like BitCoins) known as Mogul Dough (pun intended). Mogul Dough can be cashed out into your own bank account! So you can earn a slice of the profit. It’s pretty rad, I recommend signing up…It’s Free and fun.
Working on this project was insane (in good way)! The sheer scale and size of the project was massive, by the time I had rolled on the project there were about 40 ThoughtWorkers still currently working on this thing…and many more who had come and gone. We had Teams in our ChengDu, Perth, Sydney and Brisbane Offices.
Assigning features to each of the TW Offices and the use of Microservices were allowed us to work productively and help the delivery of this product. Having that many ThoughtWorkers on a project is kind of unheard of…It opened up the opportunity to pair with lots of different people Devs, X.D.’s, QA’s, BA’s internally and also got to collaborate with Legal and Marketing Teams on the client side; meet a lot of people from ThoughtWorks on a global scale; challenged me to learn a whole suit of tools AngularJS, KnockoutJS, SCSS, Git Command Line, Bourbon Neat; It was a great project to learn how to write tests (TDD), learn Design Principles, Agile Delivery, Stakeholder Management and Consultancy skills. I can imagine the integration would have been challenging to say the least, I myself can’t fathom what that would have been like.
I mainly worked as part of the design team heavily involved with the Front-end development using AngularJS and SCSS, there was also a big responsibility for maintaining accessibility. We used CodeSniffer a great tool for helping with maintaining this and also writing end-to-end tests for accessibility for our views. It really brought my attention to the importance of this and I realised that I need to apply this to my projects. The cross-browser and cross device testing was pretty damn thorough, I recall feelings of frustration related to IE, Firefox, and devices that run on Android 4.2.2.
A highlight in this project was when I presented my first interactive draft of the treaded tax questions page and charity workflow on an iPhone to the marketing team. Tax questions aren’t sexy and trying to make the process as painless as possible was a really big challenge given the legal implications that had to be made explicit to the user.
The marketing team were excited to see this and were impressed with the animations, overall flow and solution. One of the marketing team members even went so far to mention that he wanted to show the CEO of Dominos! I was chuffed! I remember thinking to myself…If I can make tax questions bearable then my job is done!
Don’t get me wrong there were many days when I felt out of my depth, pressured and stressed. To keep my sanity on those days I asked myself if anyone had died because the build had broken, or something that was meant to be simple to implement wasn’t. Somedays you felt like say “Hey we’re not curing cancer here, so take a chill pill.”
Overall, it was an intense learning experience and due to the length of the project I am now able to draw on those experiences good and bad to help me make decisions on future projects. Since leaving the project, I’ve become an Angular JS and SCSS addict, Mobile First Design fan boy, more confident with Git Command Line although I still love BitBucket’s SourceTree App.