怎样对本身尚不认识AngularJS的环境下对代码举办调试大数据应用

来源:互联网 / 作者:SKY / 2016-11-07 07:04 / 点击:
与任何其余编程说话一样,Angular.js在行使进程中尚有有点难度的。但只要可以或许把握个中的能力与秘诀,那么这种困难毫不会一连太久,而这一点对付每一位下定刻意打

【51CTO.com快译】假如各人对AngularJS还不认识,那么也许会在起源建设Web应用时对许多题目感想担忧。并且尽量这也许已经是我们所能用到的上手难度最低的Web开拓框架之一,但各人如故必要相识一部门重要能力,从而更为轻松地搞定顺应进程。其它,纵然是技能程度最高的Web开拓职员也都拥有相等长的AngularJS行使履历。然而,只要我们顺遂把握了这些能力与手艺,各人完全可以或许以尽也许简朴的方法打造出本身极具适用性与卓越性的Web应用。

How to Debug Unfamiliar Angular_785

我们起主要做的就是投入时刻来进修这些手艺与能力,并最终将其无缝化接入我们的现实行使。下面就一路来相识该怎样踏出第一步:

进修并领略与scope相干的统统

这一点之以是云云重要,是由于Angular.js傍边的统统都是环绕着scope所睁开。在行使指令与节制器时,Angular.js会建设一套scope布局。我们必要进修怎样断绝scope以及特定位置的scope值。各人可以操作.scope要领来会见Angular.js傍边每个元素的scope。Angular.js scope着实很是风趣,但条件是各人已经透彻领略了关于它的统统。

下面来看一些很是适用的scope能力:

 $($0).scope() 这段代码可以辅佐各人轻松查察与特定元素相干联的scope及其全下属性。

担任自父scope的属性将不会表现,但假如各人必要查察,则可以随时输入其名称。

要搜刮父scope的各属性,行使$($0).scope().$parent代码

$($0).scope().$root这段代码旨在查察root代码的各属性。

假如各人已经以断绝scope的方法高亮一条指令,则可以操作$($0).isolateScope()查察其属性。

假如我们在某断绝scope内高亮某项元素,则可操作$($0).scope()代码表现哪些可用。

关于scope的统统外貌上看好像都不轻易领略,不外着实际难度并不高。各人只必要深入把握个中的几项要点。并且假如各人在面临特定需求时不知道该怎么做,那么多加实行绝对没有弊端。通过这种方法,我们可以或许轻松相识何时该举办奈何的操纵,那么整个开拓进程也将变得越发简朴。

轻松行使Breakpoint

console.log可能调试器可以算是行使声名,其可以或许辅佐我们对JavaScript代码举办随时调试。它们很是适用,但并不是必需行使。在这类场景下,各人必需相识关于breakpoint的统统——今朝每一款主流赏识器的搜查器材中都有提供。

1

在breakpoint的辅佐下,各人将无需查阅整个轮回即可找到本身必要的位置。

搜查变量来自那里

建设并行使一款操作Angular.js编写而成的Web应用很是简朴,但该应用也许跟着时刻推移而必要一连演进。在这种环境下,时代站长网,我们也许很难懂晰相识模板中的某些变量到底来自那里。假如仅仅是某断绝scope傍边的一条指令,那么各人必定可以或许轻松找到谜底。但在面临着伟大的指令与节制器布局时,我们无疑必要更智慧的方法来追踪变量来历。

下面是详细现实方法:

找到行使该变量的元素,尔后搜查其scope。

搜查其值,譬喻操作$($0).scope().foo代码,个中属性被称为“foo”。

假如其值已经被界说,各人即可据此得出谜底,由于该属性必定是来自界说层的节制器可能指令。而假如该值尚未被界说,则可以实行DOM中的其余层。只需一再这一进程,谜底最终必能展现。

弄清某些元素为何不会表现出来

偶然辰,各人会发明本身的行使ng-if、ng-switch可能ng-views举办搜刮可能搜查时,某些元素不会被表现出来。这是由于此类指令会以状态可能自身所行使路径为基本从DOM处整体添加可能移除其内容。只要行使ng-show即可办理题目,其可以或许通过潜匿是否可见的方法对这些元素举办表现与潜匿。

在Angular.js傍边,注释将与元素保持在统一位置。

找寻节制器以处理赏罚页面中的特定部门

许多伴侣必定绝对这项使命无甚难度,但必需夸大的是,相等一部门开拓职员早已将其忘在脑后。要想找到认真处理赏罚页面内特定部门的节制器,DOM傍边的ng-controller属性将可以或许帮上大忙。

对许多人来说,从一套局限复杂的HTML页面傍边找寻属性绝非易事。不外这个中是有轻盈要领的; 点击工具元素,尔后运行$($0).attr(‘ng-controller’)。假如没有返回任何功效,那么我们必要点击父scope并再试一次。

jQuery在这方面也有着重要浸染,要想找到与当前位置间隔很近的某节制器,各人可以行使以下代码:

$($0).closest(‘[ng-controller]’).attr(‘ng-controller’)

领略digest周期

$digest在Angular.js傍边认真触发改观。假如没有特定署理可能工具拟定措施,Angular.js将不会在各工具的属性产生改观时吸取由其发出的关照内容。有鉴于此,digest周期的浸染是搜查各调查措施并表达其任何改观。也就是说,在运行digest的前提下,Angular.js将随时相识当前产生的变乱。

而一旦产生了某些Angular.js未能辨认到的变乱,譬喻一条节制台指令,那么接下来什么都不会产生,Angular也不会自动启动digest。在这时,各人必需手动执行digest,从而得到相干更新。

与任何其余编程说话一样,Angular.js在行使进程中尚有有点难度的。但只要可以或许把握个中的能力与秘诀,那么这种困难毫不会一连太久,而这一点对付每一位下定刻意规划进修Angular.js并操作其举办应用措施开拓的伴侣而言都很是重要。

原文问题:How to Debug Unfamiliar AngularJS Code

阅读延展

1
3