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

VPSサーバーを使ってWebサイトを運用する過程で行った作業、調査内容を備忘としてまとめています。

アーカイブ

コーディング

AngularJSコードサンプル（sce、sanitize v1.2.23）

コメントをどうぞ

AngularJS : 1.2.23
Bootstrap : 3.2.0

（１）$sce、$sanitizeサービスを使ってHTMLデータを表示

１）AngularJSの通常のバインド
{{htmlData}}

２）$sanitizeサービスとng-bind-htmlディレクティブを使用

３）$sceのtrustAsHtmlを使用


１）AngularJSの通常のバインド<br />
<span>{{htmlData}}</span><br />
２）$sanitizeサービスとng-bind-htmlディレクティブを使用<br />
<span ng-bind-html="htmlData"></span><br />
３）$sceのtrustAsHtmlを使用<br />
<span ng-bind-html="trustedData"></span><br />


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

demoApp.controller("sceCtrl", function ($scope,$sce) {
  $scope.htmlData = "<b style='color: red;' onmouseover=alert('Alert!')>mouseover</b>";
  $scope.trustedData = $sce.trustAsHtml($scope.htmlData);
});

コーディング

AngularJSのデータバインディングのディレクティブの概要

コメントをどうぞ

AngularJSのデータバインディングのディレクティブの概要についてまとめました。
　
デモとコードサンプルはこちら。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１Wayデータバインディング
・１Wayデータバインディングの設定をすると、スクリプト内のデータモデルに設定した変数の値がHTML内の関連付けられた要素に即座に反映される。
　
・1Wayデータバインディングを利用するには、二重波括弧{{…}}を使用するか、ng-bind、ng-bind-templateディレクティブを使用する。
　
・{{…}}の方が簡単に記述できるので、通常はこちらを使用する。
　ng-bindは一つのデータバインディングしか利用できないので、二つ以上ある場合はng-bind-templateディレクティブを使用する必要がある。
　
●使用例
　
下記のようにスクリプトで$scopeサービスを使って変数に値を設定すると、設定した値がHTMLの要素にバインディングされ、HTMLに値が表示される。
　
（スクリプト）
$scope.country = “日本”;
$scope.gender = “男性”;
　
（HTML）
私は{{country}}在住の{{gender}}です
<div>私は<span ng-bind=”country”></span>在住です。</div>
<div>ng-bind-template：私は{{country}}在住の{{gender}}です。</div>
　
※二重波括弧の文字を表示したい場合は？
　
AngularJSでは、二重波括弧は１Wayデータバインディングとして解釈されてしまうため、そのままでは文字として表示する事が出来ない。
　
表示する場合は、下記のようにng-non-bindableディレクティブを使う。
<div ng-non-bindable>二重波括弧{{…..}}を表示するには、ng-non-bindableを使用。</div>
２Wayデータバインディング
・１WayデータバインディングではスクリプトからHTMLの要素へ、という方向だが、２WayデータバインディングではHTMLの要素からスクリプトへ反映させ、双方向に同期させることも出来る。
　この場合は、ng-modelディレクティブを使用する。ユーザーがデータを入力できるHTML要素と一緒に使用する必要があるので、input、texterea、select要素などの属性に指定して使用する。
　
●使用例
　
下記例では、nameを２Wayデータバインディングとして設定してあるので、ユーザーが入力した値が即座に上の行の「私の名前は・・」の部分に表示される。
　
（スクリプト）
$scope.name = “初期値”;
　
（HTML）
<div>私の名前は{{name}}です。</div>
名前:<input ng-model=”name” />
　
デモとコードサンプルはこちら。
コーディング

AngularJSコードサンプル（http interceptor）

コメントをどうぞ

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

（１）$httpサービスのInterceptor



レスポンスデータ

№ 名前 年齢 住所
{{item.id}} {{item.name}} {{item.age}} {{item.address}} 

<button ng-click="getFriends(true)">データ取得</button><br />
<button ng-click="getFriends(false)">データ取得（エラー）</button><br />
<strong>レスポンスデータ</strong><br />
    <table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends" >
      <td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.address}}</td>
    </tr>
  </tbody>
</table>


１）アノニマスのファクトリを使ってinterceptorを設定する方法
var demoApp = angular.module('demoApp', []);
demoApp.config(function($httpProvider) {
  $httpProvider.interceptors.push(function ($q) {
    return {
      request: function(config) {
        config.headers.Authorization = 'Basic xxxx';
        console.log('Interceptor:request', config.headers);
        return config;
      },
      requestError: function(rejection) {
        console.log('Interceptor:requestError', rejection);
        return $q.reject(rejection);
      },
      response: function(response) {
        console.log('Interceptor:response', response);
        return response;
      },
      responseError: function(rejection) {
        console.log('Interceptor:responseError', rejection.statusText);
        return $q.reject(rejection);
      }
    }
  })
});

demoApp.controller('intceptCtrl', function ($scope, $http) {
  $scope.getFriends = function (tf) {
    var svrURL = (tf ? "friends.json" :"invalid-url.php");
    var config = {};
    $http.get(svrURL, config)
      .then(function onSuccess(response) {
        console.log('Client:response', response.status);
        $scope.friends = response.data;
      }, function onError(response) {
        console.log('Client:responseError',response.status);
        $scope.friends = [];
      });
  };
});

２）サービスとしてinterceptorを登録する方法
var demoApp = angular.module('demoApp', []);
demoApp.factory('myInterceptor', function($q) {
  return {
    request: function(config) {
      config.headers.Authorization = 'Basic xxxx';
      console.log('Interceptor:request', config.headers);
      return config;
    },
    requestError: function(rejection) {
      console.log('Interceptor:requestError', rejection);
      return $q.reject(rejection);
    },
    response: function(response) {
      console.log('Interceptor:response', response);
      return response;
    },
    responseError: function(rejection) {
      console.log('Interceptor:responseError', rejection.statusText);
      return $q.reject(rejection);
    }
  };
});
demoyApp.config(function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
});

コーディング

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

コメントをどうぞ

AngularJS : 1.2.23
Bootstrap : 3.2.0

（１）$httpサービスのInterceptor



レスポンスデータ

№ 名前 年齢 住所
{{item.id}} {{item.name}} {{item.age}} {{item.address}} 

<button ng-click="getFriends(true)">データ取得</button><br />
<button ng-click="getFriends(false)">データ取得（エラー）</button><br />
<strong>レスポンスデータ</strong><br />
    <table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends" >
      <td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.address}}</td>
    </tr>
  </tbody>
</table>


１）アノニマスのファクトリを使ってinterceptorを設定する方法
var demoApp = angular.module('demoApp', []);
demoApp.config(function($httpProvider) {
  $httpProvider.interceptors.push(function ($q) {
    return {
      request: function(config) {
        config.headers.Authorization = 'Basic xxxx';
        console.log('Interceptor:request', config.headers);
        return config;
      },
      requestError: function(rejection) {
        console.log('Interceptor:requestError', rejection);
        return $q.reject(rejection);
      },
      response: function(response) {
        console.log('Interceptor:response', response);
        return response;
      },
      responseError: function(rejection) {
        console.log('Interceptor:responseError', rejection.statusText);
        return $q.reject(rejection);
      }
    }
  })
});

demoApp.controller('intceptCtrl', function ($scope, $http) {
  $scope.getFriends = function (tf) {
    var svrURL = (tf ? "friends.json" :"invalid-url.php");
    var config = {};
    $http.get(svrURL, config)
      .success(function (data, status, headers, config) {
        console.log('Client:response', status);
        $scope.friends = data;
      })
      .error(function (data, status, headers, config) {
        console.log('Client:responseError',status);
        $scope.friends = [];
      });
  };
});

２）サービスとしてinterceptorを登録する方法
var demoApp = angular.module('demoApp', []);
demoApp.factory('myInterceptor', function($q) {
  return {
    request: function(config) {
      config.headers.Authorization = 'Basic xxxx';
      console.log('Interceptor:request', config.headers);
      return config;
    },
    requestError: function(rejection) {
      console.log('Interceptor:requestError', rejection);
      return $q.reject(rejection);
    },
    response: function(response) {
      console.log('Interceptor:response', response);
      return response;
    },
    responseError: function(rejection) {
      console.log('Interceptor:responseError', rejection.statusText);
      return $q.reject(rejection);
    }
  };
});
demoyApp.config(function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
});