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 micropost_params
params.require(:micropost).permit(:content)
end
end
3)AngularJS service
$ vi app/assets/javascripts/mymodule.js.erb
myModule.factory("micropostsResource", function($resource) {
return $resource("/app/microposts",{},
{
'create': { method: 'POST' },
'destroy': { method: 'DELETE' }
}
);
});
4)AngularJS controller
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource) {
$scope.micropost = {};
$scope.micropost.content = "Compose new micropost...";
var msg = "Micropost created!";
$scope.submit = function() {
function success(response) {
sessionResource.current_user({}, function(response1) {
var current_user = response1;
flashService.setUser(current_user);
});
flashService.push(msg);
$scope.$emit("$routeChangeSuccess");
}
function failure(response) {
}
micropostsResource.create($scope.micropost, success, failure);
};
$scope.getMessage = function() {
return flashService.get();
};
});
myModule.factory("flashService", function ($rootScope, $timeout) {
var queue = [];
var currentMessage = "";
.......
$rootScope.$on("$routeChangeSuccess", function() {
currentMessage = queue.shift() || "";
});
return {
push: function (msg) {
queue.push(msg);
},
......
5)AngularJS template view
$ vi app/assets/templates/static_pages/home.html.erb
<div ng-controller="HomeCtrl">
<div ng-show="chkSignin().user.id > 0" class="row">
<div class="bg-warning" ng-show="getMessage()">
<p>{{getMessage()}}</p>
</div>
<div class="col-sm-4">
..........
<form name="micropostForm" ng-submit="submit()" novalidate>
<textarea name="content" class="form-control"
ng-model="micropost.content" rows="3" required>
</textarea>
<button type="submit" ng-disabled="micropostForm.$invalid"
class="btn btn-large btn-primary">Post
</button>
</form>