Detalhamento do exemplo de envio de formulário do AngularJS

Este exemplo ilustra o envio de formulários AngularJS. Compartilho com vocês para referência, conforme abaixo:

O vínculo de dados no AngularJS

O AngularJS cria templates em tempo real para substituir a vista, em vez de mesclar os dados no template e atualizar o DOM. Qualquer valor em um componente de vista independente é substituído dinamicamente.

ng-O atributo app declara que todo o conteúdo contido nele pertence a essa aplicação AngularJS, isso é a razão pela qual podemos aninhar aplicações AngularJS em aplicações web. Apenas o conteúdo que possui ng-Os elementos contidos no elemento do atributo DOM de app são os que serão afetados pelo AngularJS.

Quando o AngularJS acha que algum valor pode mudar, ele executa seu próprio ciclo de eventos para verificar se esse valor se tornou 'sujo'. Se esse valor mudar desde a última execução do ciclo de eventos, ele é considerado um valor 'sujo'. Isso é também a maneira como o Angular pode rastrear e responder às mudanças da aplicação.

Este processo é conhecido como verificação suja. A verificação suja é um meio eficaz de verificar a mudança do modelo de dados. Quando há mudanças potenciais, o AngularJS executa a verificação suja no ciclo de eventos para garantir a consistência dos dados.

Com AngularJS, não é necessário construir novas funcionalidades JavaScript complexas para implementar o mecanismo de sincronização automática de classes na vista.

Usamos ng-A diretiva model vincula a propriedade name do objeto de modelo de dados interno ($scope) ao campo de entrada de texto.

O objeto do modelo de dados é o objeto $scope. O objeto $scope é um objeto JavaScript simples, cujas propriedades podem ser acessadas pela vista e interagir com o controlador.
O vínculo de dados bidirecional significa que se a vista mudar algum valor, o modelo de dados observará essa mudança através da verificação suja, e se o modelo de dados mudar algum valor, a vista também será recarregada uma vez.

Módulo

No AngularJS, o módulo é a maneira principal de definir a aplicação. O módulo contém o código principal da aplicação e permite que usemos o método angular.module() para declarar o módulo, que pode aceitar dois parâmetros: o nome do módulo e a lista de dependências, ou seja, os objetos que podem ser injetados no módulo.

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

Controlador

Um controlador no AngularJS é uma função usada para adicionar funcionalidades adicionais ao escopo da view. Usamos ele para definir o estado inicial do objeto de escopo e adicionar comportamento personalizado.
Quando criamos um novo controlador na página, o AngularJS gera e passa um novo $scope para esse controlador.

A principal diferença entre o AngularJS e outros frameworks JavaScript é que os controladores não são apropriados para operações DOM, formatação ou operações de dados, além de operações de manutenção de estado além do armazenamento do modelo de dados. Ele é apenas uma ponte entre a view e o $scope.

Expressão

Usar o símbolo {{}} para vincular uma variável ao $scope é essencialmente uma expressão: {{expression}}. Qualquer operação feita na expressão será executada dentro do escopo correspondente, permitindo chamar variáveis limitadas neste escopo, realizar loopings, chamadas de funções, aplicação de variáveis em expressões matemáticas, etc.

Este exemplo utiliza tecnologia

① Usando layout bootstrap na página, a página é um template do bootstrap

② Framework de frontend AngularJS

③ Usando SpringMVC no backend

A função do código é, após a entrada do conteúdo, submetê-lo ao backend, que retorna os dados para exibição na página, com mensagens de validação durante a submissão.

Aqui estou listando três maneiras de fazer essa aplicação

1.Controladores de escopo global
2.Controladores de divisão de módulo
3.Transformar a solicitação de backend em um controlador extraído como serviço

Código 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-Compatível" content="IE=edge">
<meta name="viewport" content="largura=device-largura, inicial-scale=1">
<title>Teste de Interface</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>Interface de autenticação：</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">O campo de interface de autenticação é obrigatório</span>
   </span>
   </div>
 <div>
  <h3>Interface de solicitação de dados：</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">O campo de dados de solicitação é obrigatório</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"
  >Conexão de teste</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>

Código 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();
}

Leitores interessados em mais conteúdo sobre AngularJS podem consultar as seções especiais deste site: 'Resumo de Técnicas de Manipulação de Diretivas AngularJS', 'Tutorial de Entrada e Avançamento AngularJS' e 'Resumo da Arquitetura MVC AngularJS'

Espero que o que é descrito neste artigo ajude os desenvolvedores AngularJS.

Declaração: O conteúdo deste artigo é extraído da internet, pertencendo ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da internet. Este site não possui direitos de propriedade, não realiza edição humana e não assume responsabilidade legal relevante. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Apenas após a verificação, o site deletará o conteúdo suspeito de violação de direitos autorais.

Manual básico