Building web apps with Rails4 and AngularJS in 15 minutes

An approach for Angular and Rails CRUD

Josh Software - Where Programming is an Art!

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

file db/migrate/[timestamp]_create_users.rb

app/model/user.rb

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.

Setup layout

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…

View original post 329 more words

Advertisements

So you want to learn AngularJS

angular tshirt
Be an Angular Master

I found starting Angular a bit difficult as I’ve come from a jQuery/Javascript Front-end background. I’m no expert even now, but I’ve certainly come a long way since I started. The Angular way is a bit different and just knowing principles of MVC Framework learning curve can be quite steep. My aim for this post is to save you some time and get you to take the leap to start learning AngularJS.

Disclaimer: NO CODE SNIPPETS THIS POST. I couldn’t do justice with these great resources available outlined below.

1. Start with Code School FREE Course

If you are looking for a place to start I recommend Code School’s Angular Course. It’s a fun course that you can follow quite easily. It involves some quirky videos as all codeschool flavoured tutorials do, but I found this such a great place to start.
https://www.codeschool.com/courses/shaping-up-with-angular-js

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.

3. Egghead.io Tutorials

John Lindquist’s Egghead.io is also a great place to start Angular JS learning. His egghead.io site is filled with other tutorials in addition to Angular JS.
Egghead.io Tutorials:
https://egghead.io/articles/new-to-angularjs-start-learning-here

4. ng-book

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.

What the hell is Pizza Mogul?

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.

Developer with lots of Devices
Cross Device Testing+++
My Desk at Dominos, lots of Screens
My workspace….Got Screens?!

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.