欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS表单提交实例详解

程序员文章站 2022-06-24 17:29:48
本文实例讲述了angularjs表单提交。分享给大家供大家参考,具体如下: angularjs中的数据绑定 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程序设计有所帮助。