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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
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基础陷阱题(变量赋值)
2012/09/12 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
详解如何让Express支持async/await
2017/10/09 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python实现随机选择元素功能
2017/09/14 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python对XML文件的操作实现代码
2020/03/27 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
百度JavaScript笔试题
2015/01/15 面试题
计算机应用专业推荐信
2013/11/13 职场文书
求职推荐信范文
2013/12/01 职场文书
社区健康教育工作方案
2014/06/03 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技