CMSの登録処理（基本、入力、確認）を実装する簡単なサンプル

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