AngularJS1.5のメモ。
サービス
$window
| メソッド | 説明 |
|---|
| $window.alert(メッセージ) | 警告 |
| $window.confirm(メッセージ) | 確認 |
| $window.prompt(メッセージ) | テキスト入力 |
$http
HTTPクライアントやajax通信を行う方法の1つに$httpサービスを使用する方法がある。
以下、そのサンプルである。
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script>
var app = angular.module("sampleApp", []);
function ctrlFunc($http, $window) {
this.func = function(){
$http.post('http://localhost:8090',{data:{value1:'hoge', value2:2}})
.success(function(data, status, headers, config){
$window.confirm("success");
})
.error(function(data, status, headers, config){
$window.alert("error");
});
};
}
app.component("sample", {
template: '<input type="button" value="button" ng-click="sample.func();" >',
controllerAs: "sample",
controller: ctrlFunc,
bindings: {}
});
</script>
<title>sample</title>
</head>
<body>
<sample></sample>
</body>
</html>
$httpサービスのショートカットメソッド
| HTTPメソッド | メソッド | 備考 |
|---|
| GET | $http.get(url, config) | |
| POST | $http.post(url, config) | |
| PUT | $http.put(url, config) | |
| PATCH | $http.patch(url, config) | |
| DELETE | $http.delete(url, config) | |
| HEAD | $http.head(url, config) | |
| $http.jsonp(url, config) | JSONPでリクエスト |
$http(config)のパラメータ
| パラメータ名 | 備考 |
|---|
| method | メソッド |
| url | URL |
| params | クエリ情報 |
| data | リクエスト本体のデータ |
| headers | リクエストヘッダ |
| timeout | タイムアウト時間 |
| responseType | レスポンスの型 |
| cache | HTTP GETリクエストをキャッシュするか |
| xsrfHeaderName | CSRFトークンで利用するリクエストヘッダ名 |
| xsrfCookieName | CSRFトークンを含んだクッキー名 |
| paramSerializer | クエリ情報のシリアライズ方法 |
| transformRquest | リクエスト変換関数 |
| transformResponse | レスポンス変換関数 |
| withCredentials | クロスドメイン(オリジン)のアクセスを許可するか |
$http(config)のコールバック設定
| メソッド | 備考 |
|---|
| success(成功時のメソッド) | |
| error(失敗時のメソッド) | |
| then(成功時のメソッド, 失敗時のメソッド) | |
$resource(URL, デフォルトパラメータ, 追加情報, 動作オプション) ※第1引数以外全て任意
クライアントがREST(というかCRUDな)設計の場合、$httpを使用せずに$resourceで簡単に記載することができることがある。
以下、サンプルである。
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script>
var app = angular.module("sampleApp", ['ngResource']);
function ctrlFunc($resource, $window) {
function success(){window.confirm("success");}
function fail(){window.alert("fail");}
this.func = function(){
var hoge = $resource('http://localhost:8090/hoge/');
var val = hoge.query({}, success, fail);
};
}
app.component("sample", {
template: '<input type="button" value="button" ng-click="sample.func();" >',
controllerAs: 'sample',
controller: ctrlFunc,
bindings: {}
});
</script>
<title>sample</title>
</head>
<body>
<sample></sample>
</body>
</html>
func(パラメータ, 成功時のメソッド, 失敗時のメソッド) ※引数は全て任意
| HTTPメソッド | メソッド | | 備考 |
|---|
| GET | query | {method:'GET', isArray:true} | 全取得 |
| GET | get | {method:'GET'} | 単一取得 |
| POST | save | {method: 'POST'} | 新規データ登録 |
| DELETE | remove | {method: 'DELETE'} | 既存データ削除 |
| delete |
追加情報
