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

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

具體如下：

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

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

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

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

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

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

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

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

模塊

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

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

控制器

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

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

表達(dá)式

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

本例子采用技術(shù)

① 頁(yè)面使用bootstrap布局，頁(yè)面是bootstrap的模板

② 前端框架AngularJS

③ 后臺(tái)使用SpringMVC

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

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

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

JSP代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>











 
 
 
 

  
認(rèn)證接口：
  
  
     認(rèn)證接口必填
   
   
 

  
數(shù)據(jù)請(qǐng)求接口：
  
  
     數(shù)據(jù)請(qǐng)求接口必填
   
 
 
  連接測(cè)試