カテゴリー別アーカイブ: コーディング

AngularJSコードサンプル（resource）

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;
      }
    );
  }
});

関連記事の目次

AngularJSコードサンプル（resource v1.2.23）

AngularJSコードサンプル（resource v1.2.23）


AngularJS : 1.2.23
Bootstrap : 3.2.0

（１）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;
      }
    );
  }
});

関連記事の目次

AngularJSコードサンプル（route）

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


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


●user_main.html
<button class="btn btn-primary" ng-click="new()">ユーザー登録へ</button>
<button class="btn btn-primary" ng-click="index()">ユーザー一覧</button>

●user_index.html
<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>
<strong>実行結果</strong><br />
<span>{{Result}}</span><br />
<button class="btn btn-primary" ng-click="cancel()">戻る</button>

●user_show.html
<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>
    <button class="btn btn-primary" ng-click="edit(user.id)">ユーザ情報変更</button>
    <button class="btn btn-primary" ng-click="cancel()">戻る</button>
  </div>
</div>

●user_new.html
<div class="panel panel-default">
  <div class="panel-heading">ユーザー登録</div>
  <div class="panel-body">
    <span>ユーザー登録データ</span><br />
    <ul>
      <li>FirstName:{{new_data.firstName}}</li>
      <li>LastName:{{new_data.lastName}}</li>
      <li>Address:{{new_data.address}}</li>
      <li>Age:{{new_data.age}}</li>
    </ul>
    <button class="btn btn-primary" ng-click="create()">ユーザー登録</button>
    <button class="btn btn-primary" ng-click="cancel()">戻る</button><br />
    <strong>実行結果</strong><br />
    <span>{{Result}}</span><br />
  </div>
</div>

●user_edit.html
<div class="panel panel-default">
  <div class="panel-heading">ユーザー情報変更</div>
  <div class="panel-body">
    <span>ユーザー変更内容</span><br />
    <ul>
      <li>FirstName:{{user.firstName}}</li>
      <li>LastName:{{user.lastName}}</li>
      <li>Address:{{user.address}}</li>
      <li>Age:{{user.age}}</li>
    </ul>
    <button class="btn btn-primary" ng-click="update(user)">変更実行</button>
    <button class="btn btn-primary" ng-click="cancel()">戻る</button><br />
    <strong>実行結果</strong><br />
    <span>{{Result}}</span><br />
  </div>
</div>


var demoApp = angular.module('demoApp', ['ui.bootstrap','ngRoute','ngResource']);
demoApp.config(function($locationProvider,$routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when("/ng/resource/users_r", {
      templateUrl: "/wp-content/themes/wp/template/user_index.html",
      controller: "UsersIndexCtrl" })
    .when("/ng/resource/users_r/main", {
      templateUrl: "/wp-content/themes/wp/template/user_main.html",
      controller: "UsersMainCtrl" })
    .when("/ng/resource/users_r/new", {
      templateUrl: "/wp-content/themes/wp/template/user_new.html",
      controller: "UsersNewCtrl" })
    .when("/ng/resource/users_r/:id", {
      templateUrl: "/wp-content/themes/wp/template/user_show.html",
      controller: "UsersShowCtrl" })
    .when("/ng/resource/users_r/:id/edit", {
      templateUrl: "/wp-content/themes/wp/template/user_edit.html",
      controller: "UsersEditCtrl" })
    .otherwise({
      templateUrl: "/wp-content/themes/wp/template/user_main.html",
      controller: "UsersMainCtrl" });
});

demoApp.factory("userResource", function($resource) {
  return $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' }
    }
  );
});

demoApp.controller("UsersMainCtrl", function($scope, userResource,$location){
  $scope.new = function() {
    $location.path("/ng/resource/users_r/new");
  };
  $scope.index = function() {
    $location.path("/ng/resource/users_r");
  };
});

demoApp.controller("UsersIndexCtrl", function($scope, userResource,$location){
  userResource.query(function(data, headers){
      $scope.users = data;
    },function(err) {
      $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
  $scope.destroy = function (id) {
    userResource.destroy({ id: id },function(data, headers){
        $scope.Result = "id:" + id + "のユーザーを削除しました。デモ用なのでユーザー一覧画面は更新されません。";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.show = function(id) {
    $location.path("/ng/resource/users_r/" + id);
  };
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

demoApp.controller("UsersNewCtrl", function($scope, userResource,$location){
  $scope.new_data ={
    firstName: "first0_rev",
    lastName: "last0_rev",
    address: "address0_rev",
    age: "age0_rev"
  };
  $scope.create = function () {
    userResource.create($scope.new_data,function(data, headers){
        $scope.Result = "ユーザーを登録しました";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

demoApp.controller("UsersShowCtrl", function($scope, userResource,$routeParams,$
location){
  userResource.show({ id: $routeParams.id },function(data, headers){
      $scope.user = data;
    },function(err) {
      $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
  $scope.edit = function(id) {
    $location.path("/ng/resource/users_r/" + id + "/edit");
  };
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

demoApp.controller("UsersEditCtrl", function($scope, userResource,$routeParams,$
location){
  userResource.show({ id: $routeParams.id },function(data, headers){
      $scope.user = data;
      $scope.user.firstName += "_rev";
      $scope.user.lastName += "_rev";
      $scope.user.address += "_rev";
      $scope.user.age += "_rev";
    },function(err) {
      $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
  $scope.update = function (user) {
    userResource.update(user,function(data, headers){
        $scope.user_update = data;
        $scope.Result = "ユーザー情報を変更しました。";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

関連記事の目次

AngularJSコードサンプル（routev1.2.23）

AngularJS : 1.2.23
Bootstrap : 3.2.0

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


●user_main.html
<button class="btn btn-primary" ng-click="new()">ユーザー登録へ</button>
<button class="btn btn-primary" ng-click="index()">ユーザー一覧</button>

●user_index.html
<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>
<strong>実行結果</strong><br />
<span>{{Result}}</span><br />
<button class="btn btn-primary" ng-click="cancel()">戻る</button>

●user_show.html
<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>
    <button class="btn btn-primary" ng-click="edit(user.id)">ユーザ情報変更</button>
    <button class="btn btn-primary" ng-click="cancel()">戻る</button>
  </div>
</div>

●user_new.html
<div class="panel panel-default">
  <div class="panel-heading">ユーザー登録</div>
  <div class="panel-body">
    <span>ユーザー登録データ</span><br />
    <ul>
      <li>FirstName:{{new_data.firstName}}</li>
      <li>LastName:{{new_data.lastName}}</li>
      <li>Address:{{new_data.address}}</li>
      <li>Age:{{new_data.age}}</li>
    </ul>
    <button class="btn btn-primary" ng-click="create()">ユーザー登録</button>
    <button class="btn btn-primary" ng-click="cancel()">戻る</button><br />
    <strong>実行結果</strong><br />
    <span>{{Result}}</span><br />
  </div>
</div>

●user_edit.html
<div class="panel panel-default">
  <div class="panel-heading">ユーザー情報変更</div>
  <div class="panel-body">
    <span>ユーザー変更内容</span><br />
    <ul>
      <li>FirstName:{{user.firstName}}</li>
      <li>LastName:{{user.lastName}}</li>
      <li>Address:{{user.address}}</li>
      <li>Age:{{user.age}}</li>
    </ul>
    <button class="btn btn-primary" ng-click="update(user)">変更実行</button>
    <button class="btn btn-primary" ng-click="cancel()">戻る</button><br />
    <strong>実行結果</strong><br />
    <span>{{Result}}</span><br />
  </div>
</div>


var demoApp = angular.module('demoApp', ['ui.bootstrap','ngRoute','ngResource']);
demoApp.config(function($locationProvider,$routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when("/ng/resource/users_r", {
      templateUrl: "/wp-content/themes/wp/template/user_index.html",
      controller: "UsersIndexCtrl" })
    .when("/ng/resource/users_r/main", {
      templateUrl: "/wp-content/themes/wp/template/user_main.html",
      controller: "UsersMainCtrl" })
    .when("/ng/resource/users_r/new", {
      templateUrl: "/wp-content/themes/wp/template/user_new.html",
      controller: "UsersNewCtrl" })
    .when("/ng/resource/users_r/:id", {
      templateUrl: "/wp-content/themes/wp/template/user_show.html",
      controller: "UsersShowCtrl" })
    .when("/ng/resource/users_r/:id/edit", {
      templateUrl: "/wp-content/themes/wp/template/user_edit.html",
      controller: "UsersEditCtrl" })
    .otherwise({
      templateUrl: "/wp-content/themes/wp/template/user_main.html",
      controller: "UsersMainCtrl" });
});

demoApp.factory("userResource", function($resource) {
  return $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' }
    }
  );
});

demoApp.controller("UsersMainCtrl", function($scope, userResource,$location){
  $scope.new = function() {
    $location.path("/ng/resource/users_r/new");
  };
  $scope.index = function() {
    $location.path("/ng/resource/users_r");
  };
});

demoApp.controller("UsersIndexCtrl", function($scope, userResource,$location){
  userResource.query(function(data, headers){
      $scope.users = data;
    },function(err) {
      $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
  $scope.destroy = function (id) {
    userResource.destroy({ id: id },function(data, headers){
        $scope.Result = "id:" + id + "のユーザーを削除しました。デモ用なのでユーザー一覧画面は更新されません。";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.show = function(id) {
    $location.path("/ng/resource/users_r/" + id);
  };
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

demoApp.controller("UsersNewCtrl", function($scope, userResource,$location){
  $scope.new_data ={
    firstName: "first0_rev",
    lastName: "last0_rev",
    address: "address0_rev",
    age: "age0_rev"
  };
  $scope.create = function () {
    userResource.create($scope.new_data,function(data, headers){
        $scope.Result = "ユーザーを登録しました";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

demoApp.controller("UsersShowCtrl", function($scope, userResource,$routeParams,$
location){
  userResource.show({ id: $routeParams.id },function(data, headers){
      $scope.user = data;
    },function(err) {
      $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
  $scope.edit = function(id) {
    $location.path("/ng/resource/users_r/" + id + "/edit");
  };
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

demoApp.controller("UsersEditCtrl", function($scope, userResource,$routeParams,$
location){
  userResource.show({ id: $routeParams.id },function(data, headers){
      $scope.user = data;
      $scope.user.firstName += "_rev";
      $scope.user.lastName += "_rev";
      $scope.user.address += "_rev";
      $scope.user.age += "_rev";
    },function(err) {
      $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
  $scope.update = function (user) {
    userResource.update(user,function(data, headers){
        $scope.user_update = data;
        $scope.Result = "ユーザー情報を変更しました。";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
      }
    );
  }
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

関連記事の目次

AngularJSの$qサービスでpromise/deferredパターンのサンプル作成

AngularJSでは、$http、$timeout、$intervalサービスなどではpromises/deferredパターンで実装されていて、サービス利用時にpromiseオブジェクトがリターンされ、非同期処理を行う事が出来ます。$qサービスを使うとpromises/deferredパターンのサービスなどを定義する事が出来ます。
続きを読む →

関連記事の目次

Proudly powered by WordPress