AngularJSフォームのサブミットの例と詳細解説

この記事では、AngularJSのフォームのサブミットについて説明します。皆さんに参考にしていただければ幸いです。以下の通りです：

AngularJSのデータバインディング

AngularJSは、データをテンプレートにマージしてDOMを更新するのではなく、リアルタイムテンプレートを作成してビューを置き換えます。独立したビューコンポーネントの値はすべて動的に置き換わります。

ng-app属性は、その内容がAngularJSアプリケーションに属していることを宣言しており、これがWebアプリケーションでAngularJSアプリケーションをネストできる理由です。ngを持つ要素のみが-app属性のDOM要素に含まれる要素のみがAngularJSの影響を受けます。

AngularJSが値が変更される可能性があると考えている場合、自分自身のイベントループを実行し、その値が「汚れ」であるかどうかを確認します。その値が前回のイベントループの実行以降に変更された場合、その値は「汚れ」値とされます。これがAngularがアプリケーションの変更を追跡し、応答する方法です。

このプロセスは「汚れチェック」と呼ばれます。汚れチェックはデータモデルの変更を確認する効果的な手段です。潜在的な変更がある場合、AngularJSはイベントループで汚れチェックを実行し、データの一致性を保証します。

AngularJSを使用することで、複雑で新しいJavaScript機能を構築する必要なく、ビューでクラスの自動同期メカニズムを実現できます。

私たちはngを使用しています-model指令は、内部データモデルオブジェクト（$scope）のname属性をテキスト入力フィールドにバインドします。

データモデルオブジェクトとは、$scopeオブジェクトです。$scopeオブジェクトはシンプルなJavaScriptオブジェクトであり、その属性はビューからアクセスでき、コントローラーとインタラクションできます。
ビデオデータバインディングとは、ビューが値を変更した場合、データモデルが汚れチェックを通じてその変更を観察し、データモデルが値を変更した場合、ビューも一斉に変更して再レンダリングするという意味です。

模块

在AngularJS中，模块是定义应用的最主要的方式。模块包含了主要的应用代码，它允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。

angular.module('myApp',[]);

控制器

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。
当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的$scope给这个控制器。

AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

表达式

用{{}}符号将一个变量绑定到$scope上的写法本质上就是一个表达式：{{expression}}。对表达式进行的任何操作，都会在其所属的作用域内部执行，因此可以在表达式内部调用那些限制在此作用域内的bianl，并进行循环、函数调用、将变量应用到数学表达式中等操作。

本例子采用技术

① 页面使用bootstrap布局，页面是bootstrap的模板

② 前端框架AngularJS

③ 后台使用SpringMVC

整个代码的功能是在输入内容后，提交给后台，后台再返回数据显示到页面，提交时有验证提示。

我在这里列举了三种方式来做这次应用

1.全局作用域的控制器
2.模块划分的控制器
3.将后台请求做成服务抽离出来的控制器

JSP代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
!DOCTYPE html
<html lang="zh-cn" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>インターフェーステスト</title>
!-- Bootstrap -->
<link href="css/bootstrap/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
 <div ng-controller="keepController">
 <form name="testForm" novalidate>
 <div id="responseMsg" class="testMode" >
 <div>
  <h3>認証インターフェース：</h3>
  <textarea required class="form-control" rows="3" id="authData" name="authData" ng-model="authData"></textarea>
  <span style="color:red" ng-show="testForm.authData.$dirty && testForm.authData.$invalid">
     <span ng-show="testForm.authData.$error.required">認証インターフェース必須</span>
   </span>
   </div>
 <div>
  <h3>データリクエストインターフェース：</h3>
  <textarea required class="form-control" rows="3" id="reqData" name="reqData" ng-model="reqData"></textarea>
  <span style="color:red" ng-show="testForm.reqData.$dirty && testForm.reqData.$invalid">
     <span ng-show="testForm.reqData.$error.required">データリクエストインターフェース必須</span>
   </span>
 </div>
 <div style="text-align: right;margin-right: 20px;margin-top:10px;">
  <button class="btn btn-default" role="button" ng-click="keepTest()"
  ng-disabled="testForm.authData.$invalid ||
  testForm.reqData.$invalid"
  >接続テスト</button>
 </div>
 <div>{{ansInfo}}</div>
 </div>
 </form>
 </div>
 <script src="js/angularJS/angular.min.js"></script>
 <script type="text/javascript">
//1。グローバルスコープの例
 /* function keepController($scope,$http) {
  $scope.keepTest= function(){
  var pData = {authData:$scope.authData,reqData:$scope.reqData};
    $http({method:'POST',url:'testKeep',params:pData}).
    success(function(response) {
     $scope.ansInfo = response.a;});
  };
 } */
//2。モジュール化されたコントローラー
 /*var app = angular.module('MyApp',[]);
  app.controller('keepController',function($scope,$http){
  $scope.keepTest= function(){
  var pData = {authData:$scope.authData,reqData:$scope.reqData};
    $http({method:'POST',url:'testKeep',params:pData}).
    success(function(response) {
     $scope.ansInfo=response.a;});
  }
 }); */
 //3。リクエストサービスから抽出されたコントローラー
 angular.module('myapp.services',[]).factory('testService',function($http){
  var runRequest = function(pData){
  return $http({method:'POST',url:'testKeep',params:pData});
  };
  return {
  events:function(pData){
   return runRequest(pData);
  }
  };
 });
 angular.module('MyApp',['myapp.services']).
  controller('keepController',function($scope,testService){
  $scope.keepTest= function(){
   var pData = {authData:$scope.authData,reqData:$scope.reqData};
   testService.events(pData).success(function(response){
   $scope.ansInfo=response.a;
   });
  };
 });
 </script>
 <script src="js/jquery.js"></script>
 <script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>

JAVAコード：

@RequestMapping(value = "testKeep", produces = "text/plain;charset=UTF-8")
@ResponseBody
public String testKeep(HttpServletRequest request,
  HttpServletResponse response) {
 System.out.println(request.getParameter("authData"));
 System.out.println(request.getParameter("reqData"));
 JSONObject ja = new JSONObject();
 ja.put("a", "aaa");
 ja.put("b", "bbb");
 ja.put("c", "ccc");
 System.out.println("test:")+ja.toString());
 return ja.toString();
}

AngularJSに関するさらに詳しい内容に興味を持たれた読者は、以下のサイトの特集をチェックしてください：《AngularJSコマンド操作技術のまとめ》、《AngularJS入門と上級チュートリアル》および《AngularJS MVCアーキテクチャのまとめ》

この記事で述べたことが、皆さんのAngularJSプログラムデザインに役立つことを願っています。

声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーによって自発的に貢献し、自己でアップロードされた内容であり、このサイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害が疑われる場合は、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メール送信時、#を@に変更してください）で報告し、関連する証拠を提供してください。一旦確認がとりついたら、このサイトは侵害された内容をすぐに削除します。

基礎教程