AngularJs with Ruby on Rails Task-II

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

Now today we will work with the controller and model in angularJs and submit that book form and add that book into the list.Lets proceed further:

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

rsz_book3

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

rsz_book4

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:

rsz_2book5

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

rsz_book6

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

rsz_1book7

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

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.

1 thought on “AngularJs with Ruby on Rails Task-II”

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