アーカイブ

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

関連記事の目次

Proudly powered by WordPress