AngularJS如何實現(xiàn)表單提交

這篇文章將為大家詳細(xì)講解有關(guān)AngularJS如何實現(xiàn)表單提交，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)主營高青網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),高青h5小程序制作搭建,高青網(wǎng)站營銷推廣歡迎高青等地區(qū)企業(yè)咨詢

具體如下：

AngularJS中的數(shù)據(jù)綁定

AngularJS創(chuàng)建實時模板來代替視圖，而不是將數(shù)據(jù)合并進(jìn)模板之后更新DOM。任何一個獨立視圖組件中的值都是動態(tài)替換的。

ng-app屬性聲明所有被其包含的內(nèi)容都屬于這個AngularJS應(yīng)用，這也是我們可以在Web應(yīng)用中嵌套AngularJS應(yīng)用的原因。只有被具有ng-app屬性的DOM元素包含的元素才會受AngularJS影響。

當(dāng)AngularJS認(rèn)為某個值可能發(fā)生變化時，它會運行自己的事件循環(huán)來檢查這個值是否變“臟”。如果該值從上次事件循環(huán)運行之后發(fā)生了變化，則該值被認(rèn)為是“臟”值。這也是Angular可以跟蹤和響應(yīng)應(yīng)用變化的方式。

這個過程被稱作臟檢查。臟檢查是檢查數(shù)據(jù)模型變化的有效手段。當(dāng)有潛在的變化存在時，AngularJS會在事件循環(huán)時執(zhí)行臟檢查來保證數(shù)據(jù)的一致性。

借助AngularJS，不需要構(gòu)建復(fù)雜和新的JavaScript功能，就可以在視圖中實現(xiàn)類自動同步的機制。

我們使用ng-model指令將內(nèi)部數(shù)據(jù)模型對象($scope)中的name屬性綁定到了文本輸入字段上。

數(shù)據(jù)模型對象是指$scope對象。$scope對象是一個簡單的JavaScript對象，其中的屬性可以被視圖訪問，也可以同控制器進(jìn)行交互。
雙向數(shù)據(jù)綁定意味著如果視圖改變了某個值，數(shù)據(jù)模型會通過臟檢查觀察到這個變化，而如果數(shù)據(jù)模型改變了某個值，視圖也會一句變化重新渲染。

模塊

在AngularJS中，模塊是定義應(yīng)用的最主要的方式。模塊包含了主要的應(yīng)用代碼，它允許我們使用angular.module()方法來聲明模塊，這個方法能夠接受兩個參數(shù)，第一個是模塊的名稱，第二個是依賴列表，也就是可以被注入到模塊中的對象列表。

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

控制器

AngularJS中的控制器是一個函數(shù)，用來向視圖的作用域中添加額外的功能。我們用它來給作用域?qū)ο笤O(shè)置初始狀態(tài)，并添加自定義行為。
當(dāng)我們在頁面上創(chuàng)建一個新的控制器時，AngularJS會生成并傳遞一個新的$scope給這個控制器。

AngularJS同其他JavaScript框架最主要的一個區(qū)別就是，控制器并不適合用來執(zhí)行DOM操作、格式化或數(shù)據(jù)操作，以及除存儲數(shù)據(jù)模型之外的狀態(tài)維護(hù)操作。它只是視圖和$scope之間的橋梁。

表達(dá)式

用{{}}符號將一個變量綁定到$scope上的寫法本質(zhì)上就是一個表達(dá)式：{{expression}}。對表達(dá)式進(jìn)行的任何操作，都會在其所屬的作用域內(nèi)部執(zhí)行，因此可以在表達(dá)式內(nèi)部調(diào)用那些限制在此作用域內(nèi)的bianl，并進(jìn)行循環(huán)、函數(shù)調(diào)用、將變量應(yīng)用到數(shù)學(xué)表達(dá)式中等操作。

本例子采用技術(shù)

① 頁面使用bootstrap布局，頁面是bootstrap的模板

② 前端框架AngularJS

③ 后臺使用SpringMVC

整個代碼的功能是在輸入內(nèi)容后，提交給后臺，后臺再返回數(shù)據(jù)顯示到頁面，提交時有驗證提示。

我在這里列舉了三種方式來做這次應(yīng)用

1.全局作用域的控制器
2.模塊劃分的控制器
3.將后臺請求做成服務(wù)抽離出來的控制器

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>
  <h4>認(rèn)證接口：</h4>
  <textarea required class="form-control" rows="3" id="authData" name="authData" ng-model="authData"></textarea>
  <span  ng-show="testForm.authData.$dirty && testForm.authData.$invalid">
     <span ng-show="testForm.authData.$error.required">認(rèn)證接口必填</span>
   </span>
   </div>
 <div>
  <h4>數(shù)據(jù)請求接口：</h4>
  <textarea required class="form-control" rows="3" id="reqData" name="reqData" ng-model="reqData"></textarea>
  <span  ng-show="testForm.reqData.$dirty && testForm.reqData.$invalid">
     <span ng-show="testForm.reqData.$error.required">數(shù)據(jù)請求接口必填</span>
   </span>
 </div>
 <div >
  <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.請求服務(wù)抽出來的控制器
 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();
}

關(guān)于“AngularJS如何實現(xiàn)表單提交”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當(dāng)前題目：AngularJS如何實現(xiàn)表單提交
轉(zhuǎn)載來源：http://muchs.cn/article40/gesieo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、品牌網(wǎng)站制作、App設(shè)計、網(wǎng)站導(dǎo)航、做網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)