Ruby on Rails Development Company- Tecorb Technologies: January 2017

Tuesday 31 January 2017

AngularJs with Ruby on Rails Task-II

In Part-I we have done how to use basic AngularJs in our Rails Project.

Now today we will work with the controller and model in angular js and submit that book form and add that book into the list.

Let’s proceed further:

Step 1: Now we will define a controller into our view (index.html.erb) using a div using ‘ng-controller’ like:

Step 2: Now we will define the controller in the welcome.js file

Here ‘myapp’ is same as we have defined in application.html.erb within ‘ng-app’ and ‘welcomeCtrl’ is same which we have defined in view index.html.erb.

$scope is an object by which we will use to interact with the view, we can get and set variables and functions on it.

Here we have set a books array with hashes as the elements.

Step 3: Now first of all we have to access this books array on our view and show a list of books . So come to the index.html.erb and add a list like:

Here ‘ng-repeat’ will works like as loop and return every book one by one that are available in books array.

Now Refresh the browser and you will see a list of available books.

http://tecorb.com/2017/01/27/angularjs-ruby-on-rails-task-ii/

Step 4: Now we have to submit this form and add the value to the list shown below.

For this we have to add ng-submit="addEntry()" in our form tag. Basically ‘ng-submit’ will call the ‘addEntry()’ method when this form will submit. Like,

Step 5: Now we have to define this ‘addEntry()’ method in our Angular controller that we have defined in welcome.js file

Here $scope.books.push($scope.newEntry) will push the newEntry object in books array. ‘newEntry’ is that object which will use to access the form fields as we have described in Part-I blog.

And after pushing the newEntry data into books array we have to reset the fields so we will initialize ‘newEntry’ with null {}

Now All Done, refresh and add some book.

Also Read- AngularJs with Ruby on Rails Task-1

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.”

Thursday 26 January 2017

AngularJs with Ruby on Rails Task-1

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.

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:

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.

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.”