VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

AngularJSコードサンプル（resource）

wp-admin

AngularJS : 1.6.5
Bootstrap : 3.3.7
　
※v1.2.3のサンプルはこちら。
　

（１）AngularJSの$resourceサービスの使用方法

１）resourceクラスメソッドを使用した例

登録データ{{new_data}}
ID First Name Last name
{{item.id}} {{item.firstName}} {{item.lastName}}
ユーザー詳細情報
  • ID:{{user.id}}
  • FirstName:{{user.firstName}}
  • LastName:{{user.lastName}}
  • Address:{{user.address}}
  • Age:{{user.age}}

変更テスト
値に”_rev”を追加

ユーザー変更
ユーザーの変更後のデータ
  • ID:{{user_update.id}}
  • FirstName:{{user_update.firstName}}
  • LastName:{{user_update.lastName}}
  • Address:{{user_update.address}}
  • Age:{{user_update.age}}
ユーザー削除
{{user_delete.data}}
ユーザー登録
ユーザー登録データ
  • FirstName:{{user_create.firstName}}
  • LastName:{{user_create.lastName}}
  • Address:{{user_create.address}}
  • Age:{{user_create.age}}

リクエストURL、メソッド

  • リクエストURL：{{Result.url}}
  • リクエストメソッド：{{Result.method}}

２）resourceインスタンスを使用した例

ID First Name Last name
{{item.id}} {{item.firstName}} {{item.lastName}}
ユーザー詳細情報
サーバーリクエストは必要なし
  • ID:{{user.id}}
  • FirstName:{{user.firstName}}
  • LastName:{{user.lastName}}
  • Address:{{user.address}}
  • Age:{{user.age}}

変更テスト
値に”_rev”を追加

ユーザー変更
ユーザーの変更後のデータ
  • ID:{{user_save.id}}
  • FirstName:{{user_save.firstName}}
  • LastName:{{user_save.lastName}}
  • Address:{{user_save.address}}
  • Age:{{user_save.age}}
ユーザー削除
{{user_delete.data}}

リクエストURL、メソッド

  • リクエストURL：{{Result1.url}}
  • リクエストメソッド：{{Result1.method}}

１）resourceクラスメソッドを使用した例<br />
<button class="btn btn-primary" ng-click="create()">ユーザー登録</button><br />
<span>登録データ{{new_data}}</span><br />
<button class="btn btn-primary" ng-click="index()">ユーザー一覧</button><br />
<div ng-switch on="switch">
  <div ng-switch-when="index">
    <table class="table table-striped table-bordered">
      <thead>
        <tr><th>ID</th><th>First Name</th><th>Last name</th><th></th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in users">
          <td>{{item.id}}</td>
          <td>{{item.firstName}}</td>
          <td>{{item.lastName}}</td>
          <td>
            <button class="btn btn-primary" ng-click="show(item.id)">詳細表示</button>  <button class="btn btn-primary" ng-click="destroy(item.id)">削除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="show">
    <div class="panel panel-default">
      <div class="panel-heading">ユーザー詳細情報</div>
      <div class="panel-body">
        <ul>
          <li>ID:{{user.id}}</li>
          <li>FirstName:{{user.firstName}}</li>
          <li>LastName:{{user.lastName}}</li>
          <li>Address:{{user.address}}</li>
          <li>Age:{{user.age}}</li>
        </ul>
        <strong>変更テスト</strong><br />
        <span>値に"_rev"を追加</span><br />
        <button class="btn btn-primary" ng-click="update(user)">変更</button>
      </div>
    </div>
  </div>
  <div ng-switch-when="update">
    <div class="panel panel-default">
      <div class="panel-heading">ユーザー変更</div>
      <div class="panel-body">
        <span>ユーザーの変更後のデータ</span><br />
        <ul>
          <li>ID:{{user_update.id}}</li>
          <li>FirstName:{{user_update.firstName}}</li>
          <li>LastName:{{user_update.lastName}}</li>
          <li>Address:{{user_update.address}}</li>
          <li>Age:{{user_update.age}}</li>
        </ul>
      </div>
    </div>
  </div>
  <div ng-switch-when="destroy">
    <div class="panel panel-default">
      <div class="panel-heading">ユーザー削除</div>
      <div class="panel-body">
        <span>{{user_delete.data}}</span><br />
      </div>
    </div>
  </div>
  <div ng-switch-when="create">
    <div class="panel panel-default">
      <div class="panel-heading">ユーザー登録</div>
      <div class="panel-body">
        <span>ユーザー登録データ</span><br />
        <ul>
          <li>FirstName:{{user_create.firstName}}</li>
          <li>LastName:{{user_create.lastName}}</li>
          <li>Address:{{user_create.address}}</li>
          <li>Age:{{user_create.age}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<strong>リクエストURL、メソッド</strong><br />
<ul>
  <li>リクエストURL：{{Result.url}}</li>
  <li>リクエストメソッド：{{Result.method}}</li>
</ul>
２）resourceインスタンスを使用した例<br />
<button class="btn btn-primary" ng-click="query()">ユーザー一覧</button><br />
<div ng-switch on="switch">
  <div ng-switch-when="list">
    <table class="table table-striped table-bordered">
      <thead>
        <tr><th>ID</th><th>First Name</th><th>Last name</th><th></th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in users">
          <td>{{item.id}}</td>
          <td>{{item.firstName}}</td>
          <td>{{item.lastName}}</td>
          <td>
            <button class="btn btn-primary" ng-click="get(item)">詳細表示</button>  <button class="btn btn-primary" ng-click="delete(item)">削除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="get">
　　：
　　：


var demoApp = angular.module('demoApp', ['ngResource'])
;

demoApp.controller("resrcCtrl", function($scope, $resource, $location){
  var userResource = $resource("../../resource/users/:id", { id: "@id" },{
      'create':  { method: 'POST' },
      'index':   { method: 'GET', isArray: true },
      'show':    { method: 'GET', isArray: false },
      'update':  { method: 'PUT' },
      'destroy': { method: 'DELETE' }
  })
  $scope.index = function () {
    userResource.query(function(data, headers){
        $scope.users = data;
        $scope.Result = {};
        $scope.Result.url = "/ng/resource/users/";
        $scope.Result.method = "GET";
        $scope.switch = "index";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.show = function (id) {
    $scope.switch = "show";
    userResource.show({ id: id },function(data, headers){
        $scope.user = data;
        $scope.Result = data;
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.new_data ={
    firstName: "first0_rev",
    lastName: "last0_rev",
    address: "address0_rev",
    age: "age0_rev"
  };
  $scope.create = function () {
    $scope.switch = "create";
    userResource.create($scope.new_data,function(data, headers){
        $scope.user_create = data;
        $scope.Result = data;
        $scope.Result.url = "/ng/resource/users";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }

  $scope.update = function (user) {
    $scope.switch = "update";
    user.firstName += "_rev";
    user.lastName += "_rev";
    user.address += "_rev";
    user.age += "_rev";
    userResource.update(user,function(data, headers){
        $scope.user_update = data;
        $scope.Result = data;
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }

  $scope.destroy = function (id) {
    $scope.switch = "destroy";
    userResource.destroy({ id: id },function(data, headers){
        $scope.user_delete = data;
        $scope.Result = data;
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  var userResource1 = $resource("../../resource/users/:id", { id: "@id" });
  $scope.query = function () {
    userResource1.query(function(data, headers){
        $scope.users = data;
        $scope.Result1 = {};
        $scope.Result1.url = "/ng/resource/users/";
        $scope.Result1.method = "GET";
        $scope.switch = "list";
      },function(err) {
        $scope.Result1 = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }

  $scope.get = function (user) {
    $scope.user = user;
    $scope.switch = "get";
    $scope.Result1.url = "サーバーリクエストなし";
    $scope.Result1.method = "サーバーリクエストなし";
  }
  $scope.save = function (user) {
    user.firstName += "_rev";
    user.lastName += "_rev";
    user.address += "_rev";
    user.age += "_rev";
    $scope.switch = "save";
    user.$save(function(data, headers){
        $scope.user_save = data;
        $scope.Result1 = data;
      },function(err) {
        $scope.Result1 = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.delete = function (user) {
    $scope.switch = "delete";
    user.$delete(function(data, headers){
        $scope.user_delete = data;
        $scope.Result1 = data;
      },function(err) {
        $scope.Result1 = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
});

モバイルバージョンを終了