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 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
js字符串转成JSON
Nov 07 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
javascript打开word文档的方法
Apr 16 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
JavaScript实现密码强度实时验证
Mar 18 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
留言板翻页的实现详解
2006/10/09 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python线性回归实战分析
2018/02/01 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python__new__内置静态方法使用解析
2020/01/07 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
数学教育专业求职信
2014/07/22 职场文书
投资入股合作协议书
2014/10/28 职场文书
通知格式
2015/04/27 职场文书
javaScript Array api梳理
2021/03/31 Javascript
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python