Detaillierte Erklärung eines AngularJS-Formularübergabebeispiels

Dieser Artikel erzählt von der Formularübergabe in AngularJS. Hiermit teilen wir es mit Ihnen und hoffen, dass es Ihnen nützlich ist, wie folgt:

Datenbindung in AngularJS

AngularJS erstellt Echtzeit-Templates, um die Ansicht zu ersetzen, anstatt die Daten in das Template zu integrieren und dann das DOM zu aktualisieren. Jeder Wert in einem unabhängigen Ansichtskomponente wird dynamisch ersetzt.

ng-Das app-Attribut erklärt, dass alle Inhalte, die es enthalten, zu dieser AngularJS-Anwendung gehören. Dies ist der Grund, warum wir AngularJS-Anwendungen in Webanwendungen einbetten können. Nur die Inhalte, die über ng-Nur die DOM-Elemente, die im app-Attribut enthalten sind, werden vom AngularJS beeinflusst.

Wenn AngularJS annimmt, dass ein Wert möglicherweise geändert wird, führt es seinen eigenen Ereigniszyklus aus, um zu überprüfen, ob dieser Wert 'schmutzig' geworden ist. Wenn dieser Wert seit dem letzten Lauf des Ereigniszyklus geändert wurde, wird er als 'schmutzig' angesehen. Dies ist auch der Weg, wie Angular Änderungen im Anwendungsbereich verfolgen und reagieren kann.

Dieser Prozess wird als Schmutzprüfung bezeichnet. Die Schmutzprüfung ist ein effektives Mittel, um Änderungen im Datenmodell zu überprüfen. Wenn potenzielle Änderungen vorhanden sind, führt AngularJS eine Schmutzprüfung im Ereigniszyklus durch, um die Konsistenz der Daten zu gewährleisten.

Mit AngularJS kann man Mechanismen für die automatische Synchronisation in der Ansicht umsetzen, ohne komplexe und neue JavaScript-Funktionen zu erstellen.

Wir verwenden ng-Die model-Instruktion bindet die Eigenschaft name des internen Datenmodellobjekts ($scope) an das Texteingabefeld.

Das Datenmodellobjekt ist das $scope-Objekt. Das $scope-Objekt ist ein einfaches JavaScript-Objekt, deren Eigenschaften von der Ansicht abgerufen und mit dem Controller interagiert werden können.
Doppelt gebundene Daten bedeuten, dass wenn die Ansicht einen Wert ändert, das Datenmodell diese Änderung durch eine Schmutzprüfung wahrnimmt, und wenn das Datenmodell einen Wert ändert, wird die Ansicht ebenfalls neu gerendert.

模块

在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"
  >Verbindungsprüfung</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（请在发邮件时，将#更换为@）进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。

Grund教程

Dir gefällt bestimmt