一、开端

真的是忙完这一阵子就可以忙下一阵子了啊。。。

最近在做一个angularJS+Ionic的移动端项目。。。记录一些技巧,方便自己以后查阅,也方便需要的人可以看一看...^_^

二、基础原则了解

①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进行视图之间的路由。

三、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>
</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>
//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) {            
var deferred = $q.defer();
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。

  

暂时就总结到这里吧。。。6_6

如果你觉得我的总结帮助到你,请扫描下面这个二维码,给我一点鼓励吧9_9

angularJS实用的开发技巧的更多相关文章

  1. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  2. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  3. AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  4. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  5. ES6 Javascript 实用开发技巧

    ES6 实用开发技巧 定义变量/常量 ES6 中新增加了 let 和 const 两个命令,let 用于定义变量,const 用于定义常量 两个命令与原有的 var 命令所不同的地方在于,let, c ...

  6. 20个免费的 AngularJS 资源和开发教程

    曾经,jQuery 无疑是最受欢迎的开源的 JavaScript 库,如今它有了很多的竞争对手,像 AngularJS.React.KnockoutJS 等等.在这里,我想重点关注一下 Angular ...

  7. 移动 Web 开发技巧之(后续)

    昨天的<移动 Web 开发技巧>的这篇文章,大家反响不错,因为这些问题在大家日常写移动端的页面时经常遇到的.所以那个文章还是超级实用的,那么我们今天继续来分享一下移动端的web开发技巧吧, ...

  8. 【转】几点 iOS 开发技巧

    [译] 几点 iOS 开发技巧 原文:iOS Programming Architecture and Design Guidelines 原文来自破船的分享 原文作者是开发界中知晓度相当高的 Mug ...

  9. Android开发技巧——自定义控件之增加状态

    Android开发技巧--自定义控件之增加状态 题外话 这篇本该是上周四或上周五写的,无奈太久没写博客,前几段把我的兴头都用完了,就一拖再拖,直到今天.不想把这篇拖到下个月,所以还是先硬着头皮写了. ...

随机推荐

  1. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  2. ASP.NET MVC5+EF6+EasyUI 后台管理系统(74)-微信公众平台开发-自定义菜单

    系列目录 引言 1.如果不借用Senparc.Weixin SDK自定义菜单,编码起来,工作量是非常之大 2.但是借助SDK似乎一切都是简单得不要不要的 3.自定义菜单无需要建立数据库表 4.自定义菜 ...

  3. 11、Struts2 的文件上传和下载

    文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...

  4. Paypal开发中遇到请求被中止: 未能创建 SSL/TLS 安全通道及解决方案

    最近在基于ASP.NET上开发了Paypal支付平台,在ASP.NET开发的过程中没有遇到这个问题,但是引用到MVC开发模式中的时候就出现了"未能创建 SSL/TLS 安全通道及解决方案&q ...

  5. [C#] 简单的 Helper 封装 -- SecurityHelper 安全助手:封装加密算法(MD5、SHA、HMAC、DES、RSA)

    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Wen. ...

  6. [笔记]HAproxy reload config file with uninterrupt session

    HAProxy is a high performance load balancer. It is very light-weight, and free, making it a great op ...

  7. .NET应用和AEAI CAS集成详解

    1 概述 数通畅联某综合SOA集成项目的统一身份认证工作,需要第三方系统配合进行单点登录的配置改造,在项目中有需要进行单点登录配置的.NET应用系统,本文专门记录.NET应用和AEAI CAS的集成过 ...

  8. 常用 meta 整理

    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...

  9. Create a bridge using a tagged vlan (8021.q) interface

    SOLUTION VERIFIED April 27 2013 KB26727 Environment Red Hat Enterprise Linux 5 Red Hat Enterprise Li ...

  10. 对一致性Hash算法,Java代码实现的深入研究

    一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读一文中"一致性Hash算法"部分,对于为什么要使用一致性Hash算法.一致性 ...