目次
AngularJSの$httpサービスは、デフォルトの動作でPOSTやGETメソッドの送信データをJSON形式に変換してくれる。
これは、サーバサイドのスクリプトもNode.js等のJavaScriptで書かれている場合は便利な機能だが、PHPで受けるには不便である。
そこで、送信するデータを下記のコードで通常のx-www-form-urlencode形式に変換する。（要jQuery）
$httpProvider.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
$httpProvider.defaults.transformRequest = function (data) {
if (data === undefined)
return data;
return $.param(data);
};
このコードは、app.jsのapp.config()の中に書くことで、起動時に自動的に設定される。
$httpProvider.defaults.transformRequest.push(
function(data) {
var requestStr;
if (data) {
data = JSON.parse(data);
for (var key in data) {
if (requestStr) {
requestStr += '&' + key + '=' + data[key];
} else {
requestStr = key + '=' + data[key];
}
}
}
return requestStr;
});<?php
/* 新規メンバーを登録する
* nm : 氏名
* ge : 性別
* ma : メールアドレス
* bt : 血液型
*/
try{
$pdo=new PDO("mysql:host=mysql514.db.sakura.ne.jp;".
"dbname=forcreate_fuchida;".
"charset=utf8",
"forcreate","junior2015");
$q="insert into member (name,gender,mail,bloodtype)".
" values (:name,:gender,:mail,:bloodtype);";
$s=$pdo->prepare($q);
$sa=array(":name"=>$_POST['nm'],
":gender"=>$_POST['ge'],
":mail"=>$_POST['ma'],
":bloodtype"=>$_POST['bt']);
$s->execute($sa);
print json_encode(array("result"=>$s->rowCount()));
}
catch(PDOException $e){
print json_encode(array("msg"=>$e->getMessage()));
}
?>
(function () {
var app = angular.module("MemberManager", ['ngRoute']);
// ルーティング
app.config(function ($routeProvider,$httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'list.html',
controller: 'ListController'
})
.when('/regist', {
templateUrl: 'regist.html',
controller: 'RegistController'
})
.when('/modify/:num', {
templateUrl: 'modify.html',
controller: 'ModifyController'
})
.otherwise({
redirectTo: '/'
});
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
$httpProvider.defaults.transformRequest = function (data) {
if (data === undefined)
return data;
return $.param(data);
};
});
// 初期化
app.run(function (MemberService) {
MemberService.load();
//MemberService.regist("john", "male", "john@aaaa.jp", "A");
//MemberService.regist("paul", "male", "paul@bbbb.uk", "B");
//MemberService.regist("marry", "female", "marry@cccc.jp", "O");
});
}());
// 新規会員の登録
ms.regist = function (nm, ge, ma, bt) {
$http({
method:'post',
url:'http://seminar-senior.jeez.jp/fuchida/MemberManager/php/registMember.php',
data:{
nm:nm,
ge:ge,
ma:ma,
bt:bt
}
})
.success(function(data,status,headers,config){
console.log(data);
})
.error(function(data,status,headers,config){
alert("Error:"+data.msg);
})
ms.members.push(new ms.Member(++ms.s_max,
nm, ge, ma, bt, new Date()));
};
AngularJSではJasmineとKarmaが標準のテストフレームワークである。
まずは環境を構築しよう。
>npm -h
npm i jasmine jasmine-spec-reporter rewire
jasmine init
{
"spec_dir": "spec",
"spec_files": [
"**/*[sS]pec.js"
],
"helpers": [
"helpers/**/*.js"
]
}npm i karma karma-jasmine karma-chrome-launcher
karma --version
npm i karma-cli
karma init
npm i karma-html2js-preprocessor npm i karma-spec-reporter karma-jasmine-html-reporter