AngularJS表单提交实例详解


Posted in Javascript onFebruary 18, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 #Javascript
JS实现数组去重复值的方法示例
Feb 18 #Javascript
bootstarp modal框居中显示的实现代码
Feb 18 #Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 #Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 #Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 #Javascript
JS设置时间无效问题的解决办法
Feb 18 #Javascript
You might like
PHP SQLite类
2009/05/07 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python装饰器用法实例总结
2018/05/26 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
小学新学期教师寄语
2014/01/18 职场文书
2014升学宴答谢词
2014/01/26 职场文书
门诊手术室工作制度
2014/01/30 职场文书
我的长征观后感
2015/06/09 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Matlab如何实现矩阵复制扩充
2021/06/02 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
python游戏开发Pygame框架
2022/04/22 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android