1)Rails controller show action
$ vi app/controllers/users_controller.rb
def show
user = User.find(params[:id])
gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
@user_info = {
user: user,
gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}"
}
render json: @user_info
end
2)AngularJS route
$ vi app/assets/javascripts/mymodule.js.erb
myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);
myModule.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
......
.when("/users/:id", {
templateUrl: "<%= asset_path('users/show.html.erb') %> "
})
3)AngularJS controller "UsersShowCtrl"
$ vi app/assets/javascripts/mymodule.js.erb
myModule.factory("userResource", function($resource) {
return $resource("/app/users/:id", { id: "@id" },
{
.........
'show': { method: 'GET', isArray: false },
.........
}
);
});
myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource) {
$scope.user_info = userResource.show({ id: $routeParams.id });
});
4)AngularJS template
$ vi app/assets/templates/users/show.html.erb
<div ng-controller="UsersShowCtrl">
<div class="row">
<div class="col-xs-6 col-sm-4">
<h3>{{user_info.user.name}}</h3>
<h1>
<img alt="{{user_info.user.name}}" src="{{user_info.gravatar_url}}" />
{{user_info.user.name}}
</h1>
</div>
<div class="col-xs-6 col-sm-8">
<h3>Main View</h3>
</div>
</div>
</div>
5)Rails route
*Preblem
1."http://localhost:3000/users/1"
2.browser reload
3."No route" error
*Avoidance
$ vi config/routes.rb
get 'users/*other', to: 'layouts#index'