AngularJS表单提交实例详解
本文实例讲述了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")
@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();
}
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
本文给大家介绍AngularJS控制器继承自另一控制器的相关内容，小编认为介绍的非常不错，具有参考借鉴价值，感兴趣的朋友参考下吧2016-05-05
这篇文章主要为大家介绍了Angular6实现拖拽功能指令drag实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
本篇文章主要介绍了Angular4学习笔记之新建项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了AngularJS路由用法,简单分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以参考下2017-05-05
本篇文章主要介绍了angular 基于ng-messages的表单验证实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本篇文章主要介绍了Angularjs中使用layDate日期控件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要给大家介绍了关于Angular4实现图片上传预览路径不安全问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。2017-12-12
Angular.js中$apply()和$digest()的深入理解
相信大家都知道$digest()和$apply()是AngularJS中的两个核心并且有时候容易引人误解的部分。我们需要深入理解这两者是如何运作的，从而才能理解AngularJS本身是如何运作的。本文的目的就是介绍$digest()和$apply()是如何确确实实的对你有用的。下面来一起看看吧。2016-10-10
本文主要介绍AngularJS控制器,这里整理了控制器的相关资料和提供示例代码及实例效果图，有需要的小伙伴可以参考下2016-08-08
本篇文章主要介绍了Angular客户端请求Rest服务跨域问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
最新评论