本文實例講述了AngularJS表單提交。分享給大家供大家參考，具體如下：
AngularJS中的數據綁定
AngularJS創建實時模板來代替視圖，而不是將數據合并進模板之后更新DOM。任何一個獨立視圖組件中的值都是動態替換的。
ng-app屬性聲明所有被其包含的內容都屬于這個AngularJS應用，這也是我們可以在Web應用中嵌套AngularJS應用的原因。只有被具有ng-app屬性的DOM元素包含的元素才會受AngularJS影響。
當AngularJS認為某個值可能發生變化時，它會運行自己的事件循環來檢查這個值是否變“臟”。如果該值從上次事件循環運行之后發生了變化，則該值被認為是“臟”值。這也是Angular可以跟蹤和響應應用變化的方式。
這個過程被稱作臟檢查。臟檢查是檢查數據模型變化的有效手段。當有潛在的變化存在時，AngularJS會在事件循環時執行臟檢查來保證數據的一致性。
借助AngularJS，不需要構建復雜和新的JavaScript功能，就可以在視圖中實現類自動同步的機制。
我們使用ng-model指令將內部數據模型對象($scope)中的name屬性綁定到了文本輸入字段上。
數據模型對象是指$scope對象。$scope對象是一個簡單的JavaScript對象，其中的屬性可以被視圖訪問，也可以同控制器進行交互。
雙向數據綁定意味著如果視圖改變了某個值，數據模型會通過臟檢查觀察到這個變化，而如果數據模型改變了某個值，視圖也會一句變化重新渲染。
模塊
在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" >連接測試</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")@ResponseBodypublic 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程序設計有所幫助。
新聞熱點
疑難解答
