AngularJs with Ruby on Rails Task-I

As we know that Ruby and 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.

rsz_book

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

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

<input type=”text” name=”name” placeholder=”Type a name here” ng-model=”newEntry.name” 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 {{newEntry.name}}  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.

rsz_book2

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

In Next part we will discuss the working with controller and submit this form and add this name to a list.

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: company@tecorb.com
  • 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.”

Advertisements

Author: Tecorb Teconologies

TecOrb Technologies Pvt Ltd is very fast growing company that is totally focused on Mobile Applications and Web based solutions on various domains. Over the years we have assembled a huge pool of highly skilled resources, enabled by cutting-edge tools and technologies. We build brand image of companies via digital and viral marketing so that your reach is maximized across social media sites.

3 thoughts on “AngularJs with Ruby on Rails Task-I”

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