AngularJS 最常用的功能汇总


Posted in Javascript onFebruary 17, 2016

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。

如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

第一 迭代输出之ng-repeat标签

ng-repeat让table ul ol等标签和js里的数组完美结合

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

你甚至可以指定输出的顺序:

<li ng-repeat="person in persons | orderBy:'name'">

第二 动态绑定之ng-model标签

任何有用户输入,只要是有值的html标签,都可以动态绑定js中的变量,而且是动态绑定。

<input type="text" ng-model='password'>

对于绑定的变量,你可以使用{{}} 直接引用

<span>you input password is {{password}}</span>

如果你熟悉fiter,你可以很容易的按你的需要格式输出

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

第三 绑定点击事件之ng-click事件

使用ng-click你可以很容易的为一个标签绑定点击事件。

<button ng-click="pressMe()"/>

当然前提是你要在$scope域中定义的自己的pressMe方法。

和传统的onclick方法不同,你甚至可以为ng-click方法传递一个对象,就像这样:

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

当然还有ng-dblclick标签

第四 分支语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签

分支语句让你在界面上都可以写逻辑判断。

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

第五 校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern 等标签

表单中的输入框,你可以使用上面的标签来实现对用户输入的校验。
从字面意思上你已经知道了它们的意思。

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

你可以通过 $scope.yourForm.inputText.$error.required 来判断输入框是否为空

你可以通过 $scope.yourForm.inputText.$invalid 来判断输入的内容是否满足ng-pattern,ng-maxlength,maxlength

你通过$scope.userNum获得的输入内容是去掉前后空白的,因为ng-trim的存在。

第六 下拉框之ng-options标签

ng-options是为下拉框专门打造的标签。

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

下拉框中显示的是person.name,当你选中其中一个的时候,你可以通过yourSelected得到你选中的person.id.

第七 控制css之ng-style标签

ng-style帮你轻松控制你的css属性

<span ng-style="myColor">your color</span>

你可以通过给myColor赋值的形式来改变你想要的效果,就像这样:

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

第八 异步请求之$http对象。

AngularJS 提供了一个类似jquery的$.ajax的对象,用于异步请求。
在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

如果你是POST请求,params里的数据会帮你拼到url后面,data里的数据会放到请求体中。

以上给大家分享了八种AngularJS 最常用的功能,希望对大家有所帮助!

Javascript 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
javascript之解决IE下不渲染的bug
Jun 29 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
AngularJS身份验证的方法
Feb 17 #Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 #Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 #Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 #Javascript
Bootstrap中CSS的使用方法
Feb 17 #Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 #Javascript
基于javascript简单实现对身份证校验
Jan 25 #Javascript
You might like
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
保安自我鉴定范文
2013/12/08 职场文书
爱护公物演讲稿
2014/09/09 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
八年级数学教学反思
2016/02/17 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫