AngularJS----服务,表单,模块
AngularJS中的服务
服务是一个函数或对象,AngularJS中可以创建自己的服务或使用内建服务。$http是AngularJS中最常见的服务,服务向服务器发送请求,应用响应服务器传送过来的数据。
- $http服务
它是AngularJS中的一个核心服务,用于读取远程服务器(Web)的数据。$http.get(utl)用于读取数据的函数。也就是get请求服务器。
app.controller("outController",function($scope,ahui_out,$http){$scope.hex=ahui_out.myFunc(255);$http.get("welcome.html").then(function(response){$scope.myWelcome=response.data;});
});
我们通过$http.get()得到的是数组数据,之后需要在页面上进行遍历输出。
app.controller("getController",function($scope,$http){$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php").success(function(response){$scope.names=response.records //这里到时候返回的是一个数组names[]});
});
- timeout服务
相当于JS中的window.setTimeout函数。
- interval服务
相当于JS中的window.setInterval函数。
app.controller("myController",function($scope,$location,$timeout,$interval){$scope.myUrl=$location.absUrl(); //找到url$scope.myHeader="zhanghui";//延迟显示---相当于js中的setTimeout();$timeout(function(){$scope.myHeader="zheng de shi ni ma ?";},2000);$scope.theTime=new Date().toLocaleTimeString();//相当于js中的setInterval();$interval(function(){$scope.theTime=new Date().toLocaleTimeString(); },1000);
});
之前以为这里的参数只能写几个,没想到基本的都可以写,它里面是个parametr性质的。
- 创建自定义服务
我们可以自己创建服务给其设置功能,就相当于前面的两个一样。
app.controller("outController",function($scope,ahui_out){$scope.hex=ahui_out.myFunc(255);
});
//自定义模板,这里就相当于我们之前的timeout,interval,location等。
app.service("ahui_out",function(){this.myFunc=function(x){return x.toString(16);}
});
利用service函数可以参加自定义的服务,服务名为ahui_out。在控制器中就可以使用它。
AngularJS中的select选择框
可以利用AngularJS往选择框中输入值,进行选择。
<div ng-controller="xuanController"><select ng-model="selectedName" ng-options="x for x in names"></select></div>
//选择框app.controller("xuanController",function($scope){$scope.names=['1','2','3'];});
现在把选择的数据都放在了ng-model=”selectedSite”中。可以使用ng-repeat,但是二者是有区别的,ng-repeat指令时通过数组来循环HTML代码来创建下拉列表,但是ng-options指令更适合创建下拉列表,ng-repeat是一个字符串,ng-options的选项是一个对象。
AngularJS HTML DOM
提供HTML DOM元素的属性提供绑定应用数据的指令。
- ng-disabled指令
直接绑定应用程序数据到html的disabled属性。其实就和HTML中的disable属性一样。
- ng-show指令
隐藏或显示一个html元素,主要是根据value的值来显示和隐藏元素的。ng-hide刚好和它相反,true隐藏,false不隐藏。
AngularJS模块
模块定义了一个应用程序,是应用程序中的不同部分的容器,是应用控制器的容器,控制器通常属于一个模块。
var app=angular.module("myApp",[]);
在模块定义中[ ]参数用于定义模块的依赖关系,要是模块之间有关系,那么会在中括号写上依赖的模块名字。
注意:对于我们的js脚本,通常是要放在<body>元素的最底部。这回提高网页的加载速度。
AngularJS表单与验证
终于到表单了,其实这次的项目主要是学习表单和验证,因为项目中使用的就是这个。
app.controller("FormController",function($scope){$scope.master={username:'ahui',pwd:'123321'};//方法$scope.reset=function(){$scope.user=angular.copy($scope.master);};$scope.reset();
});
<div ng-controller="FormController"><form novalidate>登录名:<input type="text" ng-model="user.username"/><br/>密码:<input type="text" ng-model="user.pwd"/><button ng-click="reset()">RESET</button></form><hr/><p>{{user}}</p><p>{{master}}</p></div>
里面其余的东西应该可以看懂,主要是novalidate,这个是你在需要使用表单时使用,用于重写标准的HMLT5验证。是新增的,禁用了浏览器的默认验证。
AngularJS表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。在里的验证只是前提,减少服务器端的压力,服务器端的验证是必不可少的。
使用了ng-show属性,显示一些错误信息到表单外面。
<div ng-controller="form"> <form name="myForm" novalidate><p>用户名:<br/><input type="text" ng-model="user" required name="user"/><span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"><span ng-show="myForm.user.$error.required">用户名是必须的</span></span> </p><p>密码:<br/><input type="text" ng-model="pwd" name="pwd" required/><span style="color:red" ng-show="myForm.pwd.$dirty&&myForm.pwd.$invalid"><span ng-show="myForm.pwd.$error.required">密码是必须的</span> </span> </p> <p>邮箱:<br/><input type="email" name="email" ng-model="email" required/><span style="color:red" ng-show="myForm.email.$dirty&&myForm.email.$invalid"><span ng-show="myForm.email.$dirty&&myForm.email.$invalid">邮箱不能为空</span><span ng-show="myForm.email.$error.email">非法邮箱</span></span></p><p><input type="submit"ng-disabled="myForm.user.$dirty&&myForm.user.$invalid||myForm.email.$dirty&&myForm.email.$invalid||myForm.pwd.$dirty&&myForm.pwd.$invalid"/></p> </form> </div>
上面图中是代码中验证输入的内容的做法。感觉这个很不爽,需要写很多的小代码在这里面。
转载于:https://www.cnblogs.com/netxiaohui/p/5773850.html
AngularJS----服务,表单,模块相关推荐
- angularjs的表单验证
angularjs的表单验证 废话:angular的热度在减小,但是老项目依旧是angular的,就是不能丢,得会 干活直接上代码 <!DOCTYPE html> <html> ...
- java OA 系统 - 自定表单 模块设计方案
1.模型管理 :web在线流程设计器.预览流程xml.导出xml.部署流程 2.流程管理 :导入导出流程资源文件.查看流程图.根据流程实例反射出流程模型.激活挂起 .自由跳转 3.运行中流 ...
- 知乎首页实战之表单模块
知乎首页编写之表单模块 知乎首页表单模块大致分为三个模块:logo,标语,输入界面,如下图: 将底色改为白色,对三个div块样式表进行修饰,给不同的颜色便于区分 .rectBrand{backgrou ...
- AngularJS自定义表单验证
Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required ...
- layui---form表单模块
虽然对layui比较熟悉了,但是今天有时间还是将layui的form表单模块重新看一下. https://www.layui.com/doc/modules/form.html 一.更新渲染 layu ...
- 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
- angular 表单
angular 表单 一.angular表单简介 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单. 两者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修 ...
- 项目管理:可视化表单界面设计器
需求: 目前正在开发一个可视化表单界面设计器,支持拖放,建表建库都可视化,基本需求如下: 1.建数据库表,和表中的字段,支持可视化界面操作 2.自定义表单:可以找个在线html编辑的js控件,有点类似 ...
- 一篇文学会商用可编辑问卷表单制作【iVX 十二】
公共表单 在 iVX 快速教程中,我们使用一个公共表单项目作为 WebApp 应用的演示说明.公共表单项目可以用于企业内部或一个问卷公共平台做问卷调查,用户可以自由的设置表单元素以及样式,并且可以手动 ...
- java 多表格处理工具,表单工具十一大标准
现在市场上的表单工具百家争鸣,鱼目混杂.到底什么时候能解决客户问题表单,今天我们主要从客户角度来真正表单工具的十大标准: 1) 零编码制作表单 业务人员通过高效灵活的设计器,可以自由定制符合自己业务逻 ...
最新文章
- 八天学会MongoDB:第五天 主从复制
- Windows8 Metro开发 (04) : 保存/读取本地应用程序设置
- 使用 Azure WAF 羞辱黑客的智商
- 微信推送封面尺寸_连封面图都搞不明白,做什么新时代的新媒体人?
- python中的pymysql_(转)Python中操作mysql的pymysql模块详解
- feign直接走熔断_SpringCloud微服务(03):Hystrix组件,实现服务熔断
- 开源网店系统_做仿货国外网店系统被谷歌禁掉该怎么办?
- 演示unity内存管理机制的缺陷
- 翻译:iOS Swift单元测试 从入门到精通 Unit Test和UI测试 UITest
- Redis 管理工具 TreeNMS
- c语言入门自学课件ppt,C语言从初学到精通中文ppt版
- 软件测试管理工具——禅道(安装、讲解)
- 记录:MI 10 反复重启的原因之一
- cad怎么选择一个对象打散vba_CADVBA中的选择集过滤.doc
- empyrical 模块的学习与分析 note4
- 88---Python 以符号的方式给出积分表达式,类似Mathematics
- iOS高仿微信完整源码,网易爱玩APP源码等
- 利用python实现软考成绩实时监控+查询提醒
- web页面之弹出窗口
- VSCode入门(一)怎样新建项目
热门文章
- 创建多个虚拟环境 windows python Anacoda tensorflow
- android字符串显示textview,Android编程:TextView不显示完整字符串
- pythonista ios_Pythonista 3 ios版下载_Pythonista 3苹果版
- 矩阵的特征向量和特征值
- Matlab--colorbar的各项细节操作
- CentOs基础操作指令(网络配置,RPM包管理)
- 21南阳理工oj新生赛Round#5--这是一道防ak题
- java imap 乱码_php imap/pop3 接收邮件类,解决中文乱码
- python性能测试模块_技巧python模块性能测试-阿里云开发者社区
- html5双波浪线怎么添加,在WPS中如何给段落添加双波浪线边框