angularJS开发注意事项有哪些

这篇文章主要为大家展示了“angularJS开发注意事项有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“angularJS开发注意事项有哪些”这篇文章吧。

创新互联建站成都网站建设定制设计，是成都网站营销推广公司,为混凝土搅拌罐提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站制作热线：028-86922220

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元素失去焦点改变后调用监听,从而显示校验的提示. , , ,这些元素支持该指令</p><pre><input ng-model="name" ng-model-options="{updateOn: 'blur'}"> //使用示例</pre><p>//可配置参数</p><blockquote><p>{updateOn: 'event'}规则指定事件发生后绑定数据<br/>{debounce : 1000} 规定等待多少毫秒后绑定数据<br/>{allowInvalid : true|false} 规定是否需要验证后绑定数据<br/>{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型<br/>{timezone : '0100'} 规则是否使用时区</p></blockquote><p>3. 告别令人尴尬的 {{}}</p><p>我们都知道,当页面还未加载完毕的时候会出现{{ xxx }}这种尴尬的情况,通过使用ng-bind-template指令,就可以避免尴尬情况的出现.</p><pre><p ng-bind-template="{{name}}"></p>   //使用示例</pre><p>4.解决ng-if,ng-show,ng-hide偶然出现的闪现的问题</p><p>(1) 将html片段抽出,通过指令引入ng-include,ng-bind-html</p><p>(2) 通过ng-cloak指令</p><p>5.控制器之间的通讯问题</p><p>(1)路由传参</p><pre>//传递 $state.go(path, {name:"dfdd"}) ui-sref="path({name:"dfdd"})" //获取 $scope.$stateParams.name</pre><p>(2)通过广播</p><p>通过子元素传递给父元素,然后父元素再广播给其他子元素,注意这个广播是很快就完成的,所以很有可能出现子页面还未加载完父元素的广播就已经完成了,为了避免这种情况,需要父元素的广播延迟执行.<br/>(这种情况有一个弊端,当进入子页面后再次刷新页面,这次的广播已经没有了,就会导致这个子页面的数据获取失败了.)</p><p>(3)定义全局变量(window)</p><p>将多个控制器都需要通讯的变量定义为全局的.这样每个控制器都可以访问到和改写.</p><p>(4) 缓存</p><p>sessionStorage, localStorage, cookie,浏览器的各种数据库</p><p>以上方法个人比较推荐路由传参的方式</p><p>6.$destroy的使用是必要的</p><ul><li><p>(1)页面离开时清除页面的定时器</p></li><li><p>(2)页面离开时清除页面的监听器</p></li><li><p>(3)页面离开时清除页面的modal,popover之类的遮罩层.</p></li></ul><pre>var destroyWatcher = $scope.$watch(...); //示例代码 //$watch方法会返回一个函数,这个函数用来销毁监听器,我们用一个变量承接这个函数,然后再destory的时候调用这个函数就可以销毁不必要的监听器了. $scope.$on("$destroy", function() {   if (timer) {      $timeout.cancel(timer);    }    $scope.popover.remove();   destroyWatcher(); }</pre><p>以上是“angularJS开发注意事项有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！</p> <br> 网页名称：angularJS开发注意事项有哪些 <br> 网站路径：<a href="http://bjjierui.cn/article/jhched.html">http://bjjierui.cn/article/jhched.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/gihjed.html">Windows系统下如何安装Python以及对应pygame、matplotlib</a> </li><li> <a href="/article/gihpso.html">JavaScript中reduce()方法如何使用</a> </li><li> <a href="/article/gihpdc.html">swoole是不是由c语言写的</a> </li><li> <a href="/article/gihpcd.html">RHEL7如何配置静态IP</a> </li><li> <a href="/article/gihjps.html">【MySQL】5.7版本SemisyncReplication增强</a> </li> </ul> </div> </div> <ul class="kf"> <li class="kf1"><span class="tela">建站热线：<a href="tel:13518219792" target="_blank">13518219792</a></span></li> <li class="kf11"><span class="weixin"><img src="/Public/Home/images/weixin.jpg" alt="网站建设微信咨询"><br> 微信扫一扫在线咨询</span> </li> <li class="kf5">QQ客服： <a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" class="on2" target="_blank" rel="nofollow"><img src="/Public/Home/images/qq.gif" alt="建站业务咨询" title="建站业务咨询"></a> <a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" class="on2" target="_blank" rel="nofollow"><img src="/Public/Home/images/qq.gif" alt="网站设计咨询" title="网站设计咨询"></a></li> <li class="kf2"><a href="http://www.bjjierui.cn/cases/" target="_blank">案 例</a></li> <li class="kf4"><a href="http://www.bjjierui.cn/" target="_blank">价 格</a></li> <li class="kf6" title="返回顶部"></li> </ul> <div class="footer"> <div class="footer_2"> <p>Copyright © 2012-2020 <strong>网创优客信息咨询</strong> 版权所有 蜀ICP备2023009085号-7<br /> 手机:13518219792 QQ:631063699 地址：成都市青羊区锣锅巷31号 邮编:610000 Email:wh@cdxwcx.com<br/> 成都网络公司-网创优客建站品牌专注<a href="http://www.bjjierui.cn/">成都网站建设</a>、<a href="http://www.bjjierui.cn/">成都网站设计</a>服务，为成都公司建设高品质的网站</p> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".kf6").click(function() { $('body,html').animate({ scrollTop : 0 }, 500); return false; }); }) var bodyhe=$("body").height(); var winhe=330; var bodyf=bodyhe-winhe; var bodyft=bodyhe-365; window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; if(t>200){ $(".kf .kf6").stop().animate({opacity:'1'},200); }else{$(".kf .kf6").stop().animate({opacity:'0'},200);} if(t>1 && t<winhe){ $(".header").addClass('no'); $(".header").removeClass('notwo'); }else if(t>winhe){ $(".header").removeClass('no'); $(".header").addClass('notwo'); }else{ $(".header").removeClass('no'); } } </script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>