angularJS开发的注意事项汇总

做为一个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();
}

就先写到这儿了,后面会持续更新...