Of Stack

Detailed Explanation of AngularJS Form Submission Example

  • 2021-07-22 08:25:08
  • OfStack

This article illustrates an example of AngularJS form submission. Share it for your reference, as follows:

Data binding in AngularJS

Instead of updating DOM after merging data into a template, AngularJS creates a real-time template instead of a view. Values in any 1 independent view component are dynamically replaced.

The ng-app attribute states that everything it contains belongs to the AngularJS application, which is why we can nest the AngularJS application within the Web application. Only elements contained by DOM elements with ng-app attributes are affected by AngularJS.

When AngularJS thinks that a value may change, it runs its own event loop to check whether the value becomes "dirty". If the value has changed since the last event loop run, the value is considered a "dirty" value. This is also how Angular can track and respond to application changes.

This process is called dirty inspection. Dirty checking is an effective means to check the changes of data model. When there are potential changes, AngularJS performs dirty checks during the event loop to ensure the uniformity of the data.

With AngularJS, you can implement a mechanism for automatic class synchronization in a view without building complex and new JavaScript functionality.

We use the ng-model directive to bind the name property in the internal data model object ($scope) to the text input field.

The data model object refers to the $scope object. The $scope object is a simple JavaScript object whose properties can be accessed by the view or interact with the controller.
Bidirectional data binding means that if the view changes a value, the data model will observe the change through dirty checking, and if the data model changes a value, the view will be rendered again with a change.

Module

In AngularJS, modules are the most important way to define applications. The module contains the main application code, which allows us to declare the module using the angular. module () method, which accepts two parameters, the first is the name of the module, and the second is the dependency list, that is, the list of objects that can be injected into the module. 


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

Controller

The controller in AngularJS is a function that adds additional functionality to the scope of the view. We use it to set the initial state of the scoped object and add custom behavior.
When we create a new controller on the page, AngularJS generates and passes a new $scope to the controller.

One of the main differences between AngularJS and other JavaScript frameworks is that the controller is not suitable for performing DOM operations, formatting or data operations, and state maintenance operations other than storing data models. It is just a bridge between the view and $scope.

Expression

Binding a variable to $scope with the {{}} symbol is essentially an expression: {{expression}}. Any operation on an expression is performed inside the scope it belongs to, so you can call those bianl that are limited to this scope inside the expression, and perform loops, function calls, applying variables to mathematical expressions, and so on.

This example employs technology

① The layout of the page is bootstrap, and the page is the template of bootstrap

② Front-end frame AngularJS

③ Use SpringMVC in the background

The function of the whole code is to input the content and submit it to the background, and the background will return the data to the page, and there will be verification prompts when submitting it.

I have listed three ways to do this application here

1. Global-scoped controllers
2. Modular partition controller
3. A controller that pulls back-end requests out of service

JSP code: 


<%@ 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> Interface test </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> Authentication interface: </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"> Required for authentication interface </span>
   </span>
   </div>
 <div>
  <h3> Data request interface: </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"> Required for data request interface </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"
  > Connection test </button>
 </div>
 <div>{{ansInfo}}</div>
 </div>
 </form>
 </div>
 <script src="js/angularJS/angular.min.js"></script>
 <script type="text/javascript">
//1. Example of global scope 
 /* 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. Modular controller 
 /*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. Request the extracted controller of service 
 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();
}

For more readers interested in AngularJS related content, please check the topics of this site: "Summary of AngularJS Instruction Operation Skills", "Introduction and Advanced Tutorial of AngularJS" and "Summary of AngularJS MVC Architecture"

I hope this article is helpful to everyone's AngularJS programming.

Related articles: