AngularJs with Ruby on Rails Task-3

In Part-2 we have worked with the controller and model in angularJs with Ruby on Rails  and submitted the book form, add that book into the list.

Today we will discuss how to save and get and save data  from/to  the database model using API in ruby on rails with the help of AngularJs.

Lets proceed further :

Step 1: First of all we have to create a Book model in rails with name attribute. And migrate the migration.

Step 2. Now create a  books controller in rails that will contain two actions first for index (to  make an api to get all books records from the db) and another for create( to save data in Book Model). And generate the routes for both of these.

• Assuming that you are generating the routes using resources :books  in route.rb
• So for index action path will be ‘books/’ with GET type and for create action path will be same ‘books/’ with POST type.

 Step 3: Now we have to create the JSON Apis for index and create in our books controller like so we can call them from angularJs Controller 

Step 4: Now from AngularJS controller that we have defined in welcome.js we have to call these apis to fetch the book records and save the book into the database.

Now We have all done. Refresh your page add book from text-box that will save into your database and all blow listing will be fetch from database. Have fun with AngularJS

Also Read- AngularJs with Ruby on Rails Task-II

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

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,

<form ng-submit="addEntry()">

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