{"id":1112,"date":"2015-08-04T05:53:14","date_gmt":"2015-08-04T05:53:14","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1112"},"modified":"2015-08-04T05:53:14","modified_gmt":"2015-08-04T05:53:14","slug":"updating-users-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/updating-users-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial updating users with AngularJS"},"content":{"rendered":"

(1)Rails controller<\/strong><\/p>\r\n\r\n

$ vi app\/controllers\/users_controller.rb<\/p>\r\n\r\n

\r\n  def update\r\n    @user = User.find(params[:id])\r\n    if @user.update_attributes(user_params)\r\n      render json: @user, status: :created, location: @user\r\n    else\r\n      render json: @user.errors, status: :unprocessable_entity\r\n    end\r\n  end<\/pre>\r\n\r\n
(2)AngularJS route<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);\r\n\r\nmyModule.config(function($routeProvider, $locationProvider) {\r\n  $locationProvider.html5Mode(true);\r\n  $routeProvider\r\n........\r\n    .when("\/users\/:id\/edit", {\r\n     templateUrl: "<%= asset_path('users\/new.html.erb') %> "\r\n     })<\/pre>\r\n\r\n
(3)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams) {\r\n  if ($routeParams.id) {\r\n    var msg = "Profile updated";\r\n    $scope.title = "Update your profile";\r\n    $scope.btn_name = "Save changes";\r\n    userResource.show({ id: $routeParams.id }, function(user_info) {\r\n      $scope.user = user_info.user;\r\n      $scope.gravatar_url = user_info.gravatar_url;\r\n    })\r\n  } else {\r\n    var msg = "Welcome to the Sample App!";\r\n    $scope.title = "Sing up";\r\n    $scope.btn_name = "Create my account";\r\n    $scope.user = new userResource();\r\n  }\r\n  $scope.submit = function() {\r\n.......\r\n    if ($routeParams.id) {\r\n      userResource.update($scope.user, success, failure);\r\n    } else {\r\n      userResource.create($scope.user, success, failure);\r\n    }\r\n  };<\/pre>\r\n\r\n
ref.
\r\nRails controller <\/p>\r\n\r\n
\r\n  def show\r\n    user = User.find(params[:id])\r\n    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)\r\n    @user_info = {\r\n      user: user,\r\n      gravatar_url: "https:\/\/secure.gravatar.com\/avatar\/#{gravatar_id}"\r\n    }\r\n    render json: @user_info\r\n  end<\/pre>\r\n\r\n
(4)AngularJS template view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/users\/new.html.erb<\/p>\r\n\r\n
\r\n<h1 class="text-center">{{title}}<\/h1>\r\n.....\r\n<button ng-click="submit()" class="btn btn-primary"\r\n         ng-disabled="userNewForm.$invalid" >\r\n  {{btn_name}}\r\n<\/button>\r\n......\r\n<span ng-show="user.id">\r\n  <img alt="{{user.name}}" src="{{gravatar_url}}" \/>\r\n  <a href="http:\/\/gravatar.com\/emails">change<\/a>\r\n<\/span><\/pre><\/div>\r\n\r\n
(5)add link to navigation menu<\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/_header.html.erb<\/p>\r\n\r\n
\r\n<li><%= link_to "Settings", "\/users\/{{chkSignin().user.id}}\/edit" %><\/li><\/pre><\/div>","protected":false},"excerpt":{"rendered":"
(1)Rails controller $ vi app\/controllers\/users_controller.rb def update @user = User.find(params[:id]) if @user.update_attributes(user_params) render json: @user, status: :created, location: @user else render json: @user.errors, status: :unprocessable_entity end 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\/edit", { templateUrl: "<%= asset_path('users\/new.html.erb') %> " }) (3)AngularJS controller $ vi app\/assets\/javascripts\/mymodule.js.erb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,167,145,166],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1112"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1112"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1112\/revisions"}],"predecessor-version":[{"id":1113,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1112\/revisions\/1113"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1112"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}