AngularJs with Ruby on Rails Task-1

AngularJs with Ruby on Rails Task-1

As we know that Ruby on Rails is a great for  building the backend (Server) Apis. AngularJs is great for building the client side JavaScript Applications. So by combining both of these together for building the applications then surly they will deliver a  great products. So I think AngularJs is a great tool for building the application with Ruby on Rails.

Lets proceed for using AngularJs in our Rails Application:

Step 1: Create a rails application like lets say ‘angulardemo’

Step 2: Add gem “angularjs-rails” to your gem file and do bundle.

Step 3: Now bind the ng-app=”myapp” with html tag in application.html.erb like:

 <html ng-app=”myapp”>

And in application.js just add

 //= require angular

The ng-app directive defines that this is an AngularJS application

Step 4:  Make a controller with index action and set this as root in route.rb

Step 5: Now we are going to make a simple form that will take a book name from user and add this name in the books list shown below.

So for this first of all we have to put a html form with name attribute that will be the book name.

Ruby on Rails

Step 6: Now add  ng-model=”” with this text box like:

      <input type=”text” name=”name” placeholder=”Type a name here” ng-model=”” autocomplete=”off”>

Here ‘ng-model’ binds the value of HTML controls like select,input etc to application data.

And ‘newEntry’ is the object that will working with in this form and name being an attribute that will set on this object for this given field.

Step 7: Now put {{}}  below the form

this will print the model value when you will type in the textbox now. So refresh your page and try to write in your text field and look you will notice same text will appear below the form what you are typing now.

Ruby on Rails

So in this Part we have learn how to use AngularJs in our Rails Application.

In Next part we will discuss how to work with controller, submit form and add this name to a list.

Good Luck.—

Also Read- Few steps for choosing Enterprise Mobile and Web Application Development Company

If you are, looking to Develop and design for your project then feel free to contact us at any time

  • Call Us- +91 9910781148, +1 8033353593
  • Email:
  • Skype- tecorb

“We maintain transparency with our customers . Our values and business ethics has given us repeated customers. We tend are proud to be a reliable outsourcing partner for many clients across the World.”