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

1)Rails route<\/strong><\/p>\r\n\r\n

$ vi config\/routes.rb<\/p>\r\n\r\n

\r\nmatch '\/app\/microposts', to: 'microposts#create',  via: 'post'\r\nmatch '\/app\/microposts', to: 'microposts#destroy', via: 'delete'<\/pre>\r\n\r\n
2)Rails controller<\/strong><\/p>\r\n\r\n
$ vi app\/controllers\/microposts_controller.rb<\/p>\r\n\r\n
\r\nclass MicropostsController < ApplicationController\r\n  def create\r\n    remember_token = User.encrypt(cookies[:remember_token])\r\n    current_user ||= User.find_by(remember_token: remember_token)\r\n    micropost = current_user.microposts.build(micropost_params)\r\n    if micropost.save\r\n      render json: micropost, status: :created\r\n    else\r\n      render json: micropost.errors, status: :unprocessable_entity\r\n    end\r\n  end\r\n\r\n  private\r\n    def micropost_params\r\n      params.require(:micropost).permit(:content)\r\n    end\r\nend<\/pre>\r\n\r\n
3)AngularJS service<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.factory("micropostsResource", function($resource) {\r\n  return $resource("\/app\/microposts",{},\r\n    {\r\n      'create':  { method: 'POST' },\r\n      'destroy': { method: 'DELETE' }\r\n    }\r\n  );\r\n});<\/pre>\r\n\r\n
4)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource) {\r\n  $scope.micropost = {};\r\n  $scope.micropost.content = "Compose new micropost...";\r\n  var msg = "Micropost created!";\r\n  $scope.submit = function() {\r\n    function success(response) {\r\n      sessionResource.current_user({}, function(response1) {\r\n        var current_user = response1;\r\n        flashService.setUser(current_user);\r\n      });\r\n      flashService.push(msg);\r\n      $scope.$emit("$routeChangeSuccess");\r\n    }\r\n    function failure(response) {\r\n    }\r\n    micropostsResource.create($scope.micropost, success, failure);\r\n  };\r\n  $scope.getMessage = function() {\r\n    return flashService.get();\r\n  };\r\n});\r\n\r\nmyModule.factory("flashService", function ($rootScope, $timeout) {\r\n  var queue = [];\r\n  var currentMessage = "";\r\n.......\r\n  $rootScope.$on("$routeChangeSuccess", function() {\r\n    currentMessage = queue.shift() || "";\r\n  });\r\n\r\n  return {\r\n    push: function (msg) {\r\n      queue.push(msg);\r\n    },\r\n......<\/pre>\r\n\r\n
5)AngularJS template view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/static_pages\/home.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="HomeCtrl">\r\n  <div ng-show="chkSignin().user.id > 0" class="row">\r\n    <div class="bg-warning" ng-show="getMessage()">\r\n      <p>{{getMessage()}}<\/p>\r\n    <\/div>\r\n    <div class="col-sm-4">\r\n..........\r\n      <form name="micropostForm" ng-submit="submit()" novalidate>\r\n        <textarea name="content" class="form-control"\r\n                  ng-model="micropost.content" rows="3" required>\r\n        <\/textarea>\r\n        <button type="submit" ng-disabled="micropostForm.$invalid"\r\n                class="btn btn-large btn-primary">Post\r\n        <\/button>\r\n      <\/form><\/pre><\/div>\r\n","protected":false},"excerpt":{"rendered":"
1)Rails route $ vi config\/routes.rb match '\/app\/microposts', to: 'microposts#create', via: 'post' match '\/app\/microposts', to: 'microposts#destroy', via: 'delete' 2)Rails controller $ vi app\/controllers\/microposts_controller.rb class MicropostsController < ApplicationController def create remember_token = User.encrypt(cookies[:remember_token]) current_user ||= User.find_by(remember_token: remember_token) micropost = current_user.microposts.build(micropost_params) if micropost.save render json: micropost, status: :created else render json: micropost.errors, status: :unprocessable_entity end end private def […]<\/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,178],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1143"}],"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=1143"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1143\/revisions"}],"predecessor-version":[{"id":1144,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1143\/revisions\/1144"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1143"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}