Détails de l'exemple de soumission de formulaire AngularJS

L'exemple de cet article décrit le soumission de formulaire AngularJS. Partageons-le avec tous pour la référence, voici les détails :

La liaison de données dans AngularJS

AngularJS crée des modèles de vue en temps réel pour les remplacer, au lieu de fusionner les données dans le modèle et mettre à jour le DOM. Les valeurs de tout composant de vue indépendant sont remplacées dynamiquement.

ng-La propriété app déclare que tout le contenu qu'elle contient appartient à cette application AngularJS, ce qui explique pourquoi nous pouvons imbriquer des applications AngularJS dans une application Web. Seuls les contenus qui ont ng-Les éléments contenus dans l'élément DOM de la propriété app sont les seuls qui sont affectés par AngularJS.

Lorsque AngularJS pense qu'une valeur pourrait changer, il exécute son propre cycle d'événements pour vérifier si cette valeur est devenue 'sale'. Si cette valeur a changé depuis la dernière exécution du cycle d'événements, cette valeur est considérée comme 'sale'. C'est aussi la manière dont Angular peut suivre et répondre aux changements de l'application.

Ce processus est appelé vérification sale. La vérification sale est un moyen efficace de vérifier les changements du modèle de données. Lorsqu'il y a des changements potentiels, AngularJS exécute la vérification sale lors du cycle d'événements pour garantir l'uniformité des données.

Grâce à AngularJS, il n'est pas nécessaire de construire des fonctionnalités JavaScript complexes et nouvelles pour réaliser un mécanisme de synchronisation automatique des classes dans la vue.

Nous utilisons ng-L'instruction model lie l'attribut name de l'objet modèle de données interne ($scope) au champ d'entrée de texte.

L'objet modèle de données est un objet $scope. L'objet $scope est un objet JavaScript simple, dont les propriétés peuvent être accédées par la vue et interagir avec le contrôleur.
Le liendement de liaison de données bidirectionnelle signifie que si la vue change une valeur, le modèle de données observe ce changement par le biais de la vérification sale, et si le modèle de données change une valeur, la vue sera redessinée en un seul changement.

模块

在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"
  >Test de connexion</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 code :

@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();
}

Les lecteurs intéressés par plus de contenu sur AngularJS peuvent consulter les sujets spéciaux de ce site : 'Résumé des techniques d'exploitation des directives AngularJS', 'Tutoriel d'initiation et d'approfondissement AngularJS' et 'Résumé de l'architecture MVC AngularJS'.

J'espère que les informations de cet article vous seront utiles pour la conception de programmes AngularJS.

Déclaration : le contenu de cet article est issu du réseau, et appartient aux auteurs originaux. Le contenu est contribué et téléversé par les utilisateurs d'Internet de manière spontanée. Ce site ne détient pas de propriété intellectuelle, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé violer les droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.

Tutoriel de base