CMSでよくあるデータ登録処理をAngularJSを用いて作りました。
名前と電話番号を入力し、確認、完了へ遷移します。
user.html
画面ベースとなるHTMLファイルです。
ここに入力画面、確認画面、完了画面のそれぞれの内容を記載します。
表示の出しわけはng-showタグを用いて、show_input、show_conf、show_compの各値がtureかfalseかで行います。
html(入力)
<div id="show" ng-show="show_input">
<span ng-repeat="error_message in error_messages" style="color:red">{{error_message}}<br></span>
<form name="myForm" novalidate>
<label for="name">名前:</label>
<input id="name" name="name" type="text" ng-model="name" /><br/><br/>
<label for="tel">電話番号:</label>
<input id="tel" name="tel" type="text" ng-model="tel" /><br/><br/>
<button ng-click="conf()">確認</button>
</form>
</div>
html(確認)
<div id="show" ng-show="show_conf">
名前:{{name_conf}}<br>
電話番号:{{tel_conf}}<br>
<button ng-click="comp()">登録</button>
</div>
html(完了)
<div id="show" ng-show="show_comp">
{{result}}<br>
</div>
controller.js
controllerに、確認ボタン、登録ボタンをクリック時のservice呼び出しを記述します。
javascript
angular.module('myApp')
.controller('MyController', ['$scope', 'UserRegisterService',
function($scope, UserRegisterService) {
$scope.show_input=true;
$scope.conf = function() {
UserRegisterService.conf($scope);
}
$scope.comp = function() {
UserRegisterService.comp($scope);
$scope.show_conf=false;
$scope.show_comp=true;
}
}
]);
service.js
serviceの処理を記述します。
今回は、確認ボタンクリック時に入力チェックを実施、
完了ボタンクリック時、サーバーと通信しデータを登録します。
javascript
angular.module('myApp', []);
angular.module('myApp')
.service('UserRegisterService', ['$log', '$http',
function($log, $http) {
this.conf = function($scope){
// 入力チェック
var error = new Array();
if ($scope.name === undefined) {
$scope.name = "";
}
if ($scope.tel === undefined) {
$scope.tel = "";
}
error = check_name($scope.name, error);
error = check_tel($scope.tel, error);
if(error.length == 0){
$scope.name_conf = $scope.name;
$scope.tel_conf = $scope.tel;
$scope.show_conf=true;
$scope.show_input=false;
} else {
$scope.error_messages = error;
}
}
this.comp = function($scope){
$result = $http({
method: 'POST',
url: 'user.php',
data: { name: $scope.name, tel: $scope.tel }
})
.success(function(data, status, headers, config){
$scope.result = "登録完了";
})
.error(function(data, status, headers, config){
$scope.result = '!!通信に失敗しました!!';
});
}
}
]);
全ソースファイルはここにあります。
https://github.com/murapon/sample-angularjs-register