Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails Tutorial create micropost with AngularJS

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>

Ruby on Rails Tutorial updating users with AngularJS

(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

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams) {
  if ($routeParams.id) {
    var msg = "Profile updated";
    $scope.title = "Update your profile";
    $scope.btn_name = "Save changes";
    userResource.show({ id: $routeParams.id }, function(user_info) {
      $scope.user = user_info.user;
      $scope.gravatar_url = user_info.gravatar_url;
    })
  } else {
    var msg = "Welcome to the Sample App!";
    $scope.title = "Sing up";
    $scope.btn_name = "Create my account";
    $scope.user = new userResource();
  }
  $scope.submit = function() {
.......
    if ($routeParams.id) {
      userResource.update($scope.user, success, failure);
    } else {
      userResource.create($scope.user, success, failure);
    }
  };

ref.
Rails controller 

  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

(4)AngularJS template view

$ vi app/assets/templates/users/new.html.erb

<h1 class="text-center">{{title}}</h1>
.....
<button ng-click="submit()" class="btn btn-primary"
         ng-disabled="userNewForm.$invalid" >
  {{btn_name}}
</button>
......
<span ng-show="user.id">
  <img alt="{{user.name}}" src="{{gravatar_url}}" />
  <a href="http://gravatar.com/emails">change</a>
</span>

(5)add link to navigation menu

$ vi app/views/layouts/_header.html.erb

<li><%= link_to "Settings", "/users/{{chkSignin().user.id}}/edit" %></li>