AngularJS表单提交实例详解

Questo esempio descrive la presentazione di AngularJS per il submit del modulo. Condivido questo con tutti voi per riferimento, come segue:

Il binding dati in AngularJS

AngularJS crea template in tempo reale per sostituire la vista, invece di combinare i dati nel template e aggiornare il DOM. Qualsiasi valore in un componente di vista indipendente viene sostituito dinamicamente.

L'attributo ng-app dichiara che tutto il contenuto incluso al suo interno appartiene a questa applicazione AngularJS, è per questo che possiamo嵌套 AngularJS applicazioni Web. Solo gli elementi contenuti in elementi DOM con l'attributo ng-app sono influenzati da AngularJS.

Quando AngularJS ritiene che un valore potrebbe cambiare, esegue il proprio ciclo di eventi per verificare se il valore è diventato 'sporco'. Se il valore è cambiato dal ciclo di eventi precedente, allora il valore è considerato 'sporco'. Questo è anche il modo in cui Angular può tracciare e rispondere alle variazioni dell'applicazione.

Questo processo viene chiamato controllo sporco. Il controllo sporco è uno strumento efficace per verificare le variazioni del modello dati. Quando ci sono potenziali variazioni, AngularJS esegue il ciclo di eventi per verificare se il valore è diventato 'sporco'. Se il valore è cambiato dal ciclo di eventi precedente, allora il valore è considerato 'sporco'. Questo è anche il modo in cui Angular può tracciare e rispondere alle variazioni dell'applicazione.

Grazie a AngularJS, possiamo implementare un meccanismo di sincronizzazione automatica delle classi nella vista senza costruire funzionalità JavaScript complesse e nuove.

Usiamo l'instruzione ng-model per binare la proprietà name dell'oggetto modello dati interno ($scope) al campo di input di testo.

L'oggetto modello dati è l'oggetto $scope. L'oggetto $scope è un semplice oggetto JavaScript, le cui proprietà possono essere accedute dalla vista e interagire con il controller.
Il binding dati bidirezionale significa che se la vista cambia un valore, il modello dati osserva questa variazione attraverso il controllo sporco, e se il modello dati cambia un valore, la vista viene rielaborata e aggiornata di conseguenza.

Modulo

In AngularJS, il modulo è il modo principale per definire un'applicazione. Il modulo contiene il codice principale dell'applicazione e ci permette di dichiarare il modulo utilizzando il metodo angular.module(), che accetta due parametri: il nome del modulo e la lista delle dipendenze, ossia l'elenco degli oggetti che possono essere iniettati nel modulo.

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

Controller

Un controller in AngularJS è una funzione utilizzata per aggiungere funzionalità aggiuntive all'ambito della vista. Lo usiamo per impostare lo stato iniziale dell'oggetto di ambito e aggiungere comportamenti personalizzati.
Quando creiamo un nuovo controller nella pagina, AngularJS genera e passing un nuovo $scope a questo controller.

La principale differenza tra AngularJS e altri framework JavaScript è che i controller non sono adatti per operazioni DOM, formattazione o operazioni di dati, nonché per operazioni di mantenimento dello stato oltre alla memorizzazione del modello di dati. È solo un ponte tra la vista e $scope.

Espressione

L'uso del simbolo {{}} per associare una variabile a $scope è sostanzialmente un'espressione: {{expression}}. Qualsiasi operazione eseguita sull'espressione avviene all'interno dello scope di appartenenza, pertanto è possibile chiamare variabili limitate a questo scope, eseguire cicli, chiamare funzioni, applicare variabili a espressioni matematiche e operazioni simili.

Questa esempio utilizza tecnologie

① Utilizzo di layout bootstrap per la pagina, che è un template di bootstrap

② Utilizzo del framework front-end AngularJS

③ Utilizzo di SpringMVC per il back-end

La funzione del codice è quella di inviare il contenuto inserito al back-end, che poi restituisce i dati visualizzati nella pagina, con avvisi di validazione durante la submission.

Ecco elencate tre modalità per fare questa applicazione

1. Controller con ambito globale
2. Controller per la divisione dei moduli
3. Creare un controller estratto come servizio per le richieste di back-end

Codice 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>Test di interfaccia</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>Interfaccia di autenticazione:</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">L'interfaccia di autenticazione obbligatoria</span>
   </span>
   </div>
 <div>
  <h3>Interfaccia di richiesta dati:</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">L'interfaccia di richiesta dati obbligatoria</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 di connessione</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 codice:

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

Chi è interessato a ulteriori contenuti su AngularJS può consultare le sezioni speciali di questo sito: 'Concetti di utilizzo delle direttive AngularJS', 'Guida di base e avanzata AngularJS' e 'Concetti di architettura MVC AngularJS'.

Spero che questo articolo possa essere utile per la progettazione di applicazioni AngularJS.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.