Menu
I have created rails view (ERB). However, I want to integrate it into angularjs $routeProvider, but I don't know what url should I fill into templateUrl to give me the appropriate rails view. For example, I tried:
$routeProvider.when('/pages/foo', {
templateUrl: "/pages/foo",
controller: "PageFoo"
})
But the result appears as a blank page.
Are the two features even integrateable? Or do I have to create new .html files, instead of using preexisting .html.erb
432
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout ( index. html ) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
AngularJS Scope The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.
Answer: C is the correct option. The ng-bind directive is used to bind the application data to the HTML view in the AngularJS application.
If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module. The ngRoute module routes your application to different pages without reloading the entire application.
Angular js provides its own routes. rails routes will always be used when you want to connect your views with database(CRUD). that is data binding with angular.js now i will show you how to use it with rails...
I want to add new user using angular js views and list all users. i will use rails as backend to store users in database so i will create user_controller
First Create resource of user. we will not create any views so be carefull for that
rails g resource user name:string
Then go to route.rb and check there is a route created, and create Home controller with index action that we will use as our single page application where our output will be yield.
rails g controller home index
root to: "home#index"
type this command on terminal where you will see our 7 routes. we never use new and edit method, because new and edit don't respond to json.
rake routes
Now we want all user with a unique name so go to create_user migration and uncomment this line and then we will migrate the database.
add_index :users, :name, unique: true
rake db:migrate
Now modify our controller so that all data fetching and insertion will be done with json format. so put this code inside users_controller.rb, if you are using rails 4 then follow this otherwise not. attributes will be adjustable in model.
class UsersController < ApplicationController
respond_to :json
def index
respond_with User.all
end
def create
respond_with User.create(user_params)
end
private
def user_params
params.require(:user).permit(:name)
end
end
Its time to use angulajs in our rails application
Go to application.html.erb replace tag line with this
<html ng-app="userApp">
Now add angular.js file in asses/javascripts, download it from http://angularjs.org/
Now we will create a controller to handle our angular application routes to know then that this controller wants something from me. so type this on terminal
mkdir -p app/assets/javascripts/angular/controllers
Now let's create the controller file itself. I'm calling this controller the "userCtrl", Thus our filename will be app/assets/javascripts/angular/controllers/userCtrl.js.coffee
In controller userCtrl
app = angular.module("userApp", ["ngResource"])
@userCtrl = ($scope, $resource) ->
User = $resource("/users", {id: "@id"}, {update: {method: "PUT"}})
$scope.users = User.query()
$scope.createUser = ->
user = User.save($scope.newUser)
$scope.users.push(user)
(This will insert new user record into database, by creating createUser method)
Create a view for taking input from user write this code in home/index.html.erb.
<div ng-controller="userCtrl">
<form ng-submit="createUser()">
<label>Enter Name</label>
<input type="text" placeholder="Enter user name" ng-model="newUser.name" />
<button ng-click="createUser()" class="button tiny">Submit</button>
</form>
<!-- List all usres -->
<h4 ng-show="users.$resolved && users.length > 1">All users</h4>
<span ng-repeat="c in users">
{{c.name}}<br>
</span>
</div>
Run application and watch output.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
