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'