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()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。

控制器

AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态,并添加自定义行为。 当我们在页面上创建一个新的控制器时,AngularJS会生成并传递一个新的$scope给这个控制器。

AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

表达式

用{{}}符号将一个变量绑定到$scope上的写法本质上就是一个表达式:{{expression}}。对表达式进行的任何操作,都会在其所属的作用域内部执行,因此可以在表达式内部调用那些限制在此作用域内的bianl,并进行循环、函数调用、将变量应用到数学表达式中等操作。

本例子采用技术

页面使用bootstrap布局,页面是bootstrap的模板

② 前端框架AngularJS

后台使用SpringMVC

整个代码功能是在输入内容后,提交给后台后台再返回数据显示页面,提交时有验证提示

我在这里列举了三种方式来做这次应用

1.全局作用域的控制器 2.模块划分的控制器 3.将后台请求做成服务抽离出来的控制器

JSP代码

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> 接口测试 nofollow" rel="stylesheet">

认证接口:

required">认证接口必填

数据请求接口:

required">数据请求接口必填
连接测试
{{ansInfo}}

JAVA代码

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《

希望本文所述对大家AngularJS程序设计有所帮助。

原文链接:/js/41530.html

猜你在找的JavaScript相关文章