AngularJS表單提交實(shí)例詳解
本文實(shí)例講述了AngularJS表單提交。分享給大家供大家參考,具體如下:
AngularJS中的數(shù)據(jù)綁定
AngularJS創(chuàng)建實(shí)時(shí)模板來代替視圖,而不是將數(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)來檢查這個(gè)值是否變“臟”。如果該值從上次事件循環(huán)運(yùn)行之后發(fā)生了變化,則該值被認(rèn)為是“臟”值。這也是Angular可以跟蹤和響應(yīng)應(yīng)用變化的方式。
這個(gè)過程被稱作臟檢查。臟檢查是檢查數(shù)據(jù)模型變化的有效手段。當(dāng)有潛在的變化存在時(shí),AngularJS會(huì)在事件循環(huán)時(shí)執(zhí)行臟檢查來保證數(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ì)象,其中的屬性可以被視圖訪問,也可以同控制器進(jìn)行交互。
雙向數(shù)據(jù)綁定意味著如果視圖改變了某個(gè)值,數(shù)據(jù)模型會(huì)通過臟檢查觀察到這個(gè)變化,而如果數(shù)據(jù)模型改變了某個(gè)值,視圖也會(huì)一句變化重新渲染。
模塊
在AngularJS中,模塊是定義應(yīng)用的最主要的方式。模塊包含了主要的應(yīng)用代碼,它允許我們使用angular.module()方法來聲明模塊,這個(gè)方法能夠接受兩個(gè)參數(shù),第一個(gè)是模塊的名稱,第二個(gè)是依賴列表,也就是可以被注入到模塊中的對(duì)象列表。
angular.module('myApp',[]);
控制器
AngularJS中的控制器是一個(gè)函數(shù),用來向視圖的作用域中添加額外的功能。我們用它來給作用域?qū)ο笤O(shè)置初始狀態(tài),并添加自定義行為。
當(dāng)我們?cè)陧撁嫔蟿?chuàng)建一個(gè)新的控制器時(shí),AngularJS會(huì)生成并傳遞一個(gè)新的$scope給這個(gè)控制器。
AngularJS同其他JavaScript框架最主要的一個(gè)區(qū)別就是,控制器并不適合用來執(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ù)
① 頁面使用bootstrap布局,頁面是bootstrap的模板
② 前端框架AngularJS
③ 后臺(tái)使用SpringMVC
整個(gè)代碼的功能是在輸入內(nèi)容后,提交給后臺(tái),后臺(tái)再返回?cái)?shù)據(jù)顯示到頁面,提交時(shí)有驗(yàn)證提示。
我在這里列舉了三種方式來做這次應(yīng)用
1.全局作用域的控制器
2.模塊劃分的控制器
3.將后臺(tái)請(qǐng)求做成服務(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>接口測(cè)試</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>認(rèn)證接口:</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">認(rèn)證接口必填</span> </span> </div> <div> <h3>數(shù)據(jù)請(qǐng)求接口:</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">數(shù)據(jù)請(qǐng)求接口必填</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" >連接測(cè)試</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.請(qǐng)求服務(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相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- angularjs $http實(shí)現(xiàn)form表單提交示例
- AngularJS模仿Form表單提交的實(shí)現(xiàn)代碼
- AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證和表單驗(yàn)證功能
- AngularJS使用angular-formly進(jìn)行表單驗(yàn)證
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- 詳解AngularJS實(shí)現(xiàn)表單驗(yàn)證
- AngularJS實(shí)現(xiàn)表單手動(dòng)驗(yàn)證和表單自動(dòng)驗(yàn)證
- 使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
相關(guān)文章
Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解
這篇文章主要為大家介紹了Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Angular4學(xué)習(xí)筆記之新建項(xiàng)目的方法
本篇文章主要介紹了Angular4學(xué)習(xí)筆記之新建項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07angular 基于ng-messages的表單驗(yàn)證實(shí)例
本篇文章主要介紹了angular 基于ng-messages的表單驗(yàn)證實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問題解決
這篇文章主要給大家介紹了關(guān)于Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12Angular.js中$apply()和$digest()的深入理解
相信大家都知道$digest()和$apply()是AngularJS中的兩個(gè)核心并且有時(shí)候容易引人誤解的部分。我們需要深入理解這兩者是如何運(yùn)作的,從而才能理解AngularJS本身是如何運(yùn)作的。本文的目的就是介紹$digest()和$apply()是如何確確實(shí)實(shí)的對(duì)你有用的。下面來一起看看吧。2016-10-10Angular客戶端請(qǐng)求Rest服務(wù)跨域問題的解決方法
本篇文章主要介紹了Angular客戶端請(qǐng)求Rest服務(wù)跨域問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09