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父窗口控制只弹出一个子窗口
Apr 10 Javascript
jQuery 研究心得 取得属性的值
Nov 30 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
微信小程序实现弹出菜单动画
Jun 21 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python查找第k小元素代码分享
2013/12/18 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
通过实例解析python and和or使用方法
2020/11/14 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
Java程序员常见面试题
2015/07/16 面试题
安全生产演讲稿
2014/05/09 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
企业2014年度工作总结
2014/12/10 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书