angularJS开发注意事项

2024-09-30 14:05:01

作为一个coder,应该具有经常总结反思的习惯,如果不能及时总结,可能就会忘记自己踩过的很多坑,然后会导致同一个坑踩很多次,所以我打算把这些都记录下来,以方便是对自己的重复记忆,避免无效的coding,另一方面可以希望可以给遇到相似问题的同僚们一些收获.

1.手动触发脏检查

在开发过程中,我们可能经常会通过js来手动更改绑定的相关数据,而不是通过dom操作来改变绑定的相关数据,这样也很多情况下会导致绑定数据的视图不能够及时更新,这个时候就需要我们手动触发一下脏检查,下面我就介绍一下三种手动触发脏检查的方法.

(1) apply()方法在需要手动触发的地方调用scope.apply(),使用该方法会触发angular从rootScope的作用域下开始进行绑定变量值的轮询,相比较digest()方法比较费时.

但是这个有时这个方法会报错.

(2) digest()方法在需要手动触发的地方调用scope.digest(),使用该方法会触发angular从scope的作用域下开始进行绑定变量值的轮询,相比较aplly()更合理.

(3) timeout()方法将操作绑定数据的逻辑写在timeout()方法中.

找到一种更完美的解决动态添加数据导致页面不能及时渲染的方法,迫不及待地来分享给大家~~~

可以定义一个全局的方法.这个方法就是经过处理过的apply函数,大家都叫它safeApply.上代码了:

$rootScope.safeApply = function(fn) {
  var phase = this.$root.$$phase;
  if(phase == '$apply' || phase == '$digest') {
    if(fn && (typeof(fn) === 'function')) {
      fn();
    } else {
      this.$apply(fn);
    }
  }
}

然后在需要动态添加吧的地方调用rootScope.safeApply()即可,或者把需要动态添加的代码作为写进rootScope.safeApply方法的fn参数里.

2.ng-model-options 指令

这个指令在表单校验的时候非常有用,我们可以设置什么时候出发试图更新,这样你就可以设置dom元素失去焦点改变后调用监听,从而显示校验的提示. <input>, <select>, <textarea>,这些元素支持该指令

<input ng-model="name" ng-model-options="{updateOn: 'blur'}"> //使用示例

//可配置参数

{updateOn: 'event'}规则指定事件发生后绑定数据
{debounce : 1000} 规定等待多少毫秒后绑定数据
{allowInvalid : true|false} 规定是否需要验证后绑定数据
{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型
{timezone : '0100'} 规则是否使用时区

3. 告别令人尴尬的 {{}}

我们都知道,当页面还未加载完毕的时候会出现{{ xxx }}这种尴尬的情况,通过使用ng-bind-template指令,就可以避免尴尬情况的出现.

<p ng-bind-template="{{name}}"></p>   //使用示例

4.解决ng-if,ng-show,ng-hide偶然出现的闪现的问题

(1) 将html片段抽出,通过指令引入ng-include,ng-bind-html

(2) 通过ng-cloak指令

5.控制器之间的通讯问题

(1)路由传参

//传递
$state.go(path, {name:"dfdd"})
ui-sref="path({name:"dfdd"})"
//获取
$scope.$stateParams.name

(2)通过广播

通过子元素传递给父元素,然后父元素再广播给其他子元素,注意这个广播是很快就完成的,所以很有可能出现子页面还未加载完父元素的广播就已经完成了,为了避免这种情况,需要父元素的广播延迟执行.
(这种情况有一个弊端,当进入子页面后再次刷新页面,这次的广播已经没有了,就会导致这个子页面的数据获取失败了.)

(3)定义全局变量(window)

将多个控制器都需要通讯的变量定义为全局的.这样每个控制器都可以访问到和改写.

(4) 缓存

sessionStorage, localStorage, cookie,浏览器的各种数据库

以上方法个人比较推荐路由传参的方式

6.$destroy的使用是必要的

(1)页面离开时清除页面的定时器
(2)页面离开时清除页面的监听器
(3)页面离开时清除页面的modal,popover之类的遮罩层.

var destroyWatcher = $scope.$watch(...);
//示例代码
//$watch方法会返回一个函数,这个函数用来销毁监听器,我们用一个变量承接这个函数,然后再destory的时候调用这个函数就可以销毁不必要的监听器了.
$scope.$on("$destroy", function() {
  if (timer) {
    $timeout.cancel(timer);
  }
  $scope.popover.remove();
  destroyWatcher();
}

AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

本文实例讲述了AngularJS框架双向数据绑定机制.分享给大家供大家参考,具体如下: 之前写的一篇<AngularJS入门示例之Hello World详解> ,介绍ng-model的时候提到:使用AngularJS的双向数据绑定机制,不需要我们编写繁琐的代码来实现同样的功能.现在我们看一个比较震撼的例子,看看angularJS是如何减少我们在前端开发中的繁琐劳动的.越是感受到框架功能的强大,越是能够激发学习的兴趣和动力. 假如我们有一个学生信息列表,包含学生的姓名.地址和年龄信息.假如这个数
利用VS Code开发你的第一个AngularJS 2应用程序

前言之前已经给大家介绍了Angular2开发环境搭建教程之VS Code,本文将详细介绍利用VS Code如何开发AngularJS2应用程序的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 运行环境: 1.Windows 10 2.Node 6.7.0 3.npm 3.10.8 4.TypeScript 2.0.3 创建项目 1.创建文件夹:angular2-quickstart,启动VS Code,打开刚创建的文件夹:angular2-quickstart. 2
Ubuntu系统下Angularjs开发环境安装

一．win7环境下安装ubuntu系统 http://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html 注意:在安装的第四步选择"安装ubuntu系统,与win7系统共存"这一项,这样可以免去后面的分区,安装更方便二．安装jdk8 http://hi.baidu.com/270460591/item/5a6a9bcf8f352e4dbdef69cd 注意:配置文件改为在~/.bashrc里面加入 export JAVA_H
利用Angularjs和Bootstrap前端开发案例实战

我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点: 1.MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用. 2.构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识. 3.初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller. 4.初步了解Angula
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析

这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店功能:完成前后端分离的图书管理功能,总结前端学习过的内容. 技术:NodeJS.Express.Monk.MongoDB.AngularJS.BootStrap.跨域效果: 一.Bootstrap Bootstrap是一个UI框架,它支持响应式布局,在PC端与移动端都表现不错. Bootstrap是Twitter推出的一款简洁.直
总结AngularJS开发者最常犯的十个错误

前言 AngularJS易于开发.较多的特征及较好的效果导致了较多的应用,伴随而来的是一些陷阱.本文列举了AngularJS的一些共同的易于出问题的地方,下面来一起看看吧. 一.MVC目录结构 AngularJS,直白地说,就是一个MVC框架.它的模型并没有像backbone.js框架那样定义的如此明确,但它的体系结构却恰如其分.当你工作于一个MVC框架时,普遍的做法是根据文件类型对其进行归类: templates/ _login.html _feed.html app/ app.js cont
AngularJS开发教程之控制器之间的通信方法分析

本文实例讲述了AngularJS开发教程之控制器之间的通信方法.分享给大家供大家参考,具体如下: 一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法是通过scope的继承.假设有两个控制器Parent.Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope.这样,C
AngularJS应用开发思维之依赖注入3

找不到的API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去访问这些功能时,却发现与以往遇到的库大不相同. $http 比如,在jQuery中,我们知道它的API通过一个全局对象:$ 暴露出来,当你需要进行ajax调用时,使用$.ajax()就可以了.这样的API很符合思维的预期. AngularJS也暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,但是,当你试图沿用旧经验访问angular.$http时,发
Angularjs单选改为多选的开发过程及问题解析

很简单的需求:之前下拉框是单选,现在想改为多选. 开发过程: 问题一:自己首先想到的是网上找个example,发现貌似AngularJS有相应的js包来实现,其中最多的就是isteven-multi-select和angularjs-dropdown-multiselect等. 我下载了,但是套到自己项目里面,是在是难看的很.而且貌似这些js包耦合性很高,不是我想要的那种,所以还是打算用简单的md-select.md-option.md-checkbox 来实现我想要的效果,又不想写的太人工,所
angularJS开发注意事项

作为一个coder,应该具有经常总结反思的习惯,如果不能及时总结,可能就会忘记自己踩过的很多坑,然后会导致同一个坑踩很多次,所以我打算把这些都记录下来,以方便是对自己的重复记忆,避免无效的coding,另一方面可以希望可以给遇到相似问题的同僚们一些收获. 1.手动触发脏检查在开发过程中,我们可能经常会通过js来手动更改绑定的相关数据,而不是通过dom操作来改变绑定的相关数据,这样也很多情况下会导致绑定数据的视图不能够及时更新,这个时候就需要我们手动触发一下脏检查,下面我就介绍一下三种手动触发脏
微信小程序页面开发注意事项整理

小程序的开发注意事项: 1.js文件每个页面对应的js文件可以定义页面onReady,onLoad,onShow,onHide,onUnload,还有页面的数据,自定义的函数要写到一块,内部约定是都写到默认函数的后面.既"页面中先data,再默认函数,再自定义函数"方便review code,提高协作效率. 2.json文件默认不能为空,即使没有内容也要为空数据{},原先定义在app.json中的内容,如果需要在当前页面中重新定义,那么只要把内容复制过来,直接赋新值即可,用于设置小
oralce和db2兼容开发注意事项

数据库兼容,在开发项目过程中,难免会遇到更改数据库,或者后期项目升级,也可能会遇到这种情况,这里就说明下oralce和db2兼容开发注意事项. 兼容oralce.db2开发注意事项(前提是db2版本是9.7,且是开启PLSQL编译选项之后创建的数据库): 1. 在like 之后若使用了表字段,应统一改成使用locate函数如: oralce写法: select * from fw_right a where '03' like a.rightid||'%'; 兼容写法:
60条Android开发注意事项与经验总结

1. 全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 2.数据库表段字段常量和SQL逻辑分离,更清晰,建议使用Lite系列框架LiteOrm库,超级清晰且重心可以放在业务上不用关心数据库细节. 3. 全局变量放全局类中,模块私有放自己的管理类中,让常量清晰且集中. 4. 不要相信庞大的管理类的东西会带来什么好处,可能是一场灾难,而要时刻注意单一职责原则,一个类专心做好一件事情更为清晰. 5. 如果
前端SVG样式颜色等开发注意事项

SVG Scalable Vector Graphics 可缩放的矢量图形起源在 2003 年一月,SVG 1.1 被确立为 W3C 标准,在过去很长一段时间,网页注重文字和图片的展示,SVG就被遗忘了,随着网页对图形的要求越来越高,SVG又出现在人们的视野中. 关注点可以从SVG这个名字就能瞄到我们第一个关注点在哪里,没错,就是可缩放的矢量图形,这个还是得从位图和矢量图说起,可以直白来说,位图缩放容易模糊,而矢量图一般不会,因为矢量图记录了位置信息,每次按照大小重新计算图形,而位图只能对
PHP开发注意事项总结

1.使用内嵌的HTML代码,而不是PHP的echo语句. 因为PHP是一门嵌入式Web编程语言,可以将HTML代码和PHP代码相互嵌入.但是很多程序员担心在HTML代码中过多的使用""嵌入PHP代码会多次调用PHP解释器,从而降低了PHP代码的运行速度,所以宁愿使用PHP的echo语句来输出HTML代码,而不直接使用HTML代码.但事实却恰恰相反.每一个PHP页面只调用一次PHP解释器来解释所有的PHP代码,所以,只在需要时才嵌入PHP代码,而大多数的时候直接使用HTML代码输入结果,
ORACLE数据库应用开发的三十个注意事项

引言笔者及所在团队从2000年开始的CRM等系统开发,一直主要使用ORACLE数据库作为应用数据库,开发方式包括使用PLSQL编写存储过程/数据库函数/触发器.使用ODBC或OCI和ProC开发C++应用.使用JDBC开发Java应用.使用tuxdeo开发中间件应用等.这些应用开发笔者所在团队自己做过,也委托华为.亚信.思特奇等国内厂商合作做过,整体来说ORACLE数据库功能强大.性能出众.系统健壮,确实是OLTP联机事务处理的最受欢迎的数据库. 因ORACLE服务费居高不下.加上最近几年美国

angularJS开发注意事项

相关推荐

随机推荐