AngularJs with Ruby on Rails Task-II
- AngularJs with Ruby on Rails Task-I – Mobile and web application- Tecorb Technologies on Few steps for choosing Enterprise Mobile and Web Application Development Company
- Step 3: Now first of all we have to access this books array on our view and show a list of books .
- ‘ng-repeat ‘ will works like as loop and return every book one by one that are available in books array.
- $scope.books.push($scope.newEntry) will push the newEntry object in books array. ‘
- Now today we will work with the controller and model in angularJs and submit that book form and add that book into the list.
Tecorb Technologies is the beast company for Ruby on Rails Development. We also use angularJS in Rails project. We Developed many application in Rails.
@tecorb1: #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:
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.
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,