AngularJS实用开发技巧(推荐)


Posted in Javascript onJuly 13, 2016

一、开端

Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏览器,与jQuery 配合良好。

二、基础原则了解

①angular的一些入门了解

一、基础知识

1.angular放弃了IE8

2.四大核心分别是mvc、模块化、指令系统、双向数据绑定

二、一些原则

1.不要复用controller,一个控制器一般只负责一小块视图。

2.不要在controller里面操作dom。

3.不要在contorller里面做数据格式化,ng有很好的表单控件。

4.不要在controller里面做数据过滤操作,有$filter服务。

5.一般情况下,controller是不会互相调用的,控制器之间的交互会通过事件进行。

6.angular利用指令来复用view。

7.$scope是一个树型结构,与DOM标签平行。

8.子$scope对象会继承父$scope上的属性和方法。

9.每一个angular应用只有一个$rootScope对象。(一般位于ng-app上)。

10.可以用angular.element($0).scope()进行调试。

11.使用ngRoute进行视图之间的路由。

AngularJS实用开发技巧(推荐)

三、HTML页面最常用且实用的angular内置指令

①.ng-class(适用于类似点赞、关注等某个样式会因为某个操作改变的情况)

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串,对象,或一个数组。

如果是字符串,多个类名使用空格分隔。

如果是对象,需要使用 key-value 对,key 是一个布尔值,value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。

如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。

建议的两种使用方式:

一、字符串形式,代码如下:

<i class="icon" ng-class="{true:'ion-ios-heart',false:'ion-ios-heart-outline'}[AccountInfo.isFocus]" ng-click='wetherFocus()'>
</i>

这样的意思就是,i标签有一个基础类为icon,ng-class则绑定了一个动态的类,而这个类要取哪一个值则由AccountInfo.isFocus的值是true或者false来决定,若其值为true则i标签会添加ion-ios-heart这个类,若其值为false则i标签会添加ion-ios-heart-outline

这个类。i标签还绑定了一个ng-click的事件,在这个事件里面除了处理相应的逻辑之外,还决定AccountInfo.isFocus的值。这样的话,当发生点击操作的时候,自然就改变i标签相应的类,继而表现出不同的样式了。

二、key-value的样式,代码如下:

<i class="icon" ng-class="{'ion-ios-heart':isIos,'ion-android-heart':isAndroid}"> </i>

显然,由代码则可以看出,这样的含义就是当isIos为true的时候就会取ion-ios-heart这个类,当isAndroid的值为true的时候,就会取ion-android-heart这个类。

②.ng-show和ng-hide(适用于对于不同的情况显示两种不同的内容时) 

ng-show 指令在表达式为 true 时显示指定的 HTML 元素,否则隐藏指定的 HTML 元素。

ng-hide 指令在表达式为 true 时隐藏指定的 HTML 元素,否则显示指定的 HTML 元素。

哈哈,看着就是水火不容的兄弟。。。。

例子如下:

<div class="keyboard">
<span class="keyboardIcon" ng-click="toggleMenu()"></span>
</div>
<div class="footer-menu">
<ul class="menu-list" ng-show="menuState">
...
</ul>
<div class="footer-send" ng-hide="menuState">
...
</div>

设置一个布尔变量menuState(实际开发中你可以用表达式,三目运算式等等),当其为true的时候,ng-show的内容会显示,ng-hide的内容会隐藏。反之则反之。。。

③.ng-switch(适用于在多种情况下显示不同的内容时)

ng-switch 指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令,如果匹配选中选择显示,其他为匹配的则移除。

通过使用 ng-switch-default 指令设置默认选项,如果都没有匹配的情况,默认选项会显示。

例子:

<div ng-switch="essayType">
<div class="list-cart" ng-switch-when="4">
....
</div>
<div class="list-cart left-pic" ng-switch-when="3">
....
</div>
<div class="single-pic" ng-switch-when="1">
...
</div>
<div class="single-pic" ng-switch-when="2">
...
</div>
<div class="single-pic" ng-switch-default>
...
</div>
</div>

④.ng-model(这里主要说一下ng-model神奇的小坑坑)

ng-model 指令绑定了 HTML 表单元素到 scope 变量中。

如果 scope 中不存在变量, 将会创建它。ng-model常用于<input>, <select>, <textarea>等元素。

如下代码:

<div class="WhatISay">
<textarea name="my-massage-detail" ng-model="content" class="my-massage-detail" placeholder="请输入留言">
</textarea>
<a class="button btn"ng-click="submitMes()">提交</a><br></div>

按照定义,理论上来说我们提交的时候,直接在controller里面获取在页面定义了的ng-model的值,是可以的。但是实际上这样是不可行的。亲测发现输出了一个undefined,而且,如果在controller里面定义ng-model的初始值的话,获取到的就是初始值而不是改变后的最新值。

查找了一些资料,大概意思就是说。angular限制了我们的一些定义。我们只能使用一个非原始的对象来传递参数。

什么意思呢。稍微改一下上面的例子,如下:

html代码:

<div class="WhatISay">
<textarea name="my-massage-detail" ng-model="model.content" class="my-massage-detail" placeholder="请输入留言">
</textarea>
<a class="button btn"ng-click="submitMes()">提交</a>
</div>

controller代码:

$scope.model = {};
$scope.model.content = '';
$scope.submitMes=function(){
console.log($scope.model.content);
}

就是我们是定义了一个对象,然后把ng-model定义为这个对象里面的一个属性这样来处理的。这样子,我们就得到了ng-model的最新值了。

还有一种比较简单的方式就是直接把ng-model作为参数传进去就好了。

例子如下:

//HTML代码
<input type="text" ng-model="code">
<button ng-click="setCode(code)">Login</button><br>
//controller代码
$scope.setCode = function(code){
alert(code);
}

四、数据交互实用技巧

①Promise的利用

ES6定义了Promise对象。这个对象挺好用的,特别是用在与后台交互的时候。既预防回调过深,又可以针对一些情况做统一处理,还提高了代码的可读性。在angularJs里面也封装了这样一个服务,就是$q。

$q是做为angularjs的一个服务而存在的,只是对promise异步编程模式的一个简化实现版。defer对象(延迟对象)可以通$q.defer()获取,该对象有三个方法:

resolve(value):向promise对象异步执行体发送消息告诉他我已经成功完成任务,value即为发送的消息。

reject(value): 向promise对象异步执行体发送消息告诉他我已经不可能完成这个任务了,value即为发送的消息。

notify(value): 向promise对象异步执行体发送消息告诉他我现在任务完成的情况,value即为发送的消息。

这些消息发送完promise会调用现有的回调函数。

promise即与这个defer对象的承诺对象。promise对象可以通过defer.promise获取,promise对象的一些方法:

then(successCallback,errorCallback,notifyCallback):参数为不同消息下的不同回调函数,defer发送不同的消息执行不同的回调函数,消息作为这些回调函数的参数传递。返回值为回一个promise对象为支持链式调用而存在。当第一个defer对象发送消 息后,后面的promise对应的defer对象也会发送消息,但是发送的消息不一样,不管第一个defer对象发送的是reject还是resolve,第二个及其以后的都是发送的resolve,消息是可传递的。

catch(errorCallback):then(null,errorCallback)的缩写。

finally(callback):相当于then(callback,callback)的缩写,这个finally中的方法不接受参数,却可以将defer发送的消息和消息类型成功传递到下一个then中。

defer():用来生成一个延迟对象 var defer =$q.defer();

reject():参数接收错误消息,相当于在回调函数中抛出一个异常,然后在下一个then中调用错误的回调函数。

  all():参数接收为一个promise数组,返回一个新的单一promise对象,当这些promise对象对应defer对象全部解决这个单一promise对象才会解决,当这些promise对象中有一个被reject了,这个单一promise同样的被reject了。

  when():接收第一个参数为一个任意值或者是一个promise对象,其他3个同promise的then方法,返回值为一个promise对象。第一个参数若不是promise对象则直接运行success回调且消息为这个对象,若为promise那么返回的promise其实就是对这个promise 类型的参数的一个包装而已,被传入的这个promise对应的defer发送的消息,会被我们when函数返回的promise对象所接收到。

具体用法如下:

在angular中,定义一个专门用来交互的服务。

get: function (url, options) { <br> var deferred = $q.defer(); <br> showTip();
$http.get(url, options).success(function (data) {
hideTip();
if (data.Success) {
deferred.resolve(data);
} else {
deferred.reject(data.Message);
}
}).error(function (data) {
hideTip();
deferred.reject(data);
});
return deferred.promise;
}
//controller里面的调用
get('url',params)
.then(function (data) {
//这里是successCallback
},function (data) {
//这里是errorCallback
});

这样,我们就可以在每个请求发出时统一定义一些提示,然后请求结束之后隐藏这些提示。这段代码中,大概意思就是,当请求成功的时候,就会调用deferred.resolve(data),把状态设置为成功,这样就会自动执行then里面的第一个函数即successCallback,并把请求到的数据data传递进去。而当请求失败的时候,则会调用第二个函数,即errorCallback。

以上所述是小编给大家介绍的AngularJS实用的开发技巧,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
javascript知识点收藏
Feb 22 Javascript
prototype Element学习笔记(篇一)
Oct 26 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
玩转方法:call和apply
May 08 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
JavaScript实现星级评分
Jan 12 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 #Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 #Javascript
原生js仿jquery animate动画效果
Jul 13 #Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 #Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 #Javascript
Javascript类型系统之undefined和null浅析
Jul 13 #Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 #Javascript
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
编写自己的php扩展函数
2006/10/09 PHP
PHP中的extract的作用分析
2008/04/09 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
js获取select选中的option的text示例代码
2013/12/19 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
美国时尚在线:Showpo
2017/09/08 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
护士自荐信
2013/10/25 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers