如果大家對(duì)AngularJS還不熟悉，那么可能會(huì)在初步創(chuàng)建Web應(yīng)用時(shí)對(duì)很多問題感到擔(dān)心。而且盡管這可能已經(jīng)是我們所能用到的上手難度***的Web開發(fā)框架之一，但大家仍然需要了解一部分重要技巧，從而更為輕松地搞定適應(yīng)過程。另外，即使是技術(shù)水平***的Web開發(fā)人員也都擁有相當(dāng)長的AngularJS使用經(jīng)驗(yàn)。然而，只要我們順利掌握了這些技巧與技能，大家完全能夠以盡可能簡單的方式打造出自己***實(shí)用性與卓越性的Web應(yīng)用。

創(chuàng)新互聯(lián)建站主營寧國網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App定制開發(fā),寧國h5成都微信小程序搭建,寧國網(wǎng)站營銷推廣歡迎寧國等地區(qū)企業(yè)咨詢

我們首先要做的就是投入時(shí)間來學(xué)習(xí)這些技能與技巧，并最終將其無縫化接入我們的實(shí)際使用。下面就一起來了解該如何踏出***步：

學(xué)習(xí)并理解與scope相關(guān)的一切

這一點(diǎn)之所以如此重要，是因?yàn)锳ngular.js當(dāng)中的一切都是圍繞著scope所展開。在使用指令與控制器時(shí)，Angular.js會(huì)創(chuàng)建一套scope結(jié)構(gòu)。我們需要學(xué)習(xí)如何隔離scope以及特定位置的scope值。大家可以利用.scope方法來訪問Angular.js當(dāng)中每個(gè)元素的scope。Angular.js scope其實(shí)非常有趣，但前提是大家已經(jīng)透徹理解了關(guān)于它的一切。

下面來看一些非常實(shí)用的scope技巧：

•  $($0).scope() 這段代碼可以幫助大家輕松查看與特定元素相關(guān)聯(lián)的scope及其全部屬性。
• 繼承自父scope的屬性將不會(huì)顯示，但如果大家需要查看，則可以隨時(shí)輸入其名稱。
• 要搜索父scope的各屬性，使用$($0).scope().$parent代碼。
• $($0).scope().$root這段代碼旨在查看root代碼的各屬性。
• 如果大家已經(jīng)以隔離scope的方式高亮一條指令，則可以利用$($0).isolateScope()查看其屬性。
• 如果我們?cè)谀掣綦xscope內(nèi)高亮某項(xiàng)元素，則可利用$($0).scope()代碼顯示哪些可用。

關(guān)于scope的一切表面上看似乎都不容易理解，不過其實(shí)際難度并不高。大家只需要深入掌握其中的幾項(xiàng)要點(diǎn)。而且如果大家在面對(duì)特定需求時(shí)不知道該怎么做，那么多加嘗試絕對(duì)沒有壞處。通過這種方式，我們能夠輕松了解何時(shí)該進(jìn)行怎樣的操作，那么整個(gè)開發(fā)過程也將變得更加簡單。

輕松使用Breakpoint

console.log或者調(diào)試器可以算是使用說明，其能夠幫助我們對(duì)JavaScript代碼進(jìn)行隨時(shí)調(diào)試。它們非常實(shí)用，但并不是必須使用。在這類場景下，大家必須了解關(guān)于breakpoint的一切——目前每一款主流瀏覽器的檢查工具中都有提供。

 在breakpoint的幫助下，大家將無需查閱整個(gè)循環(huán)即可找到自己需要的位置。

檢查變量來自何處

創(chuàng)建并使用一款利用Angular.js編寫而成的Web應(yīng)用非常簡單，但該應(yīng)用可能隨著時(shí)間推移而需要持續(xù)演進(jìn)。在這種情況下，我們可能很難明確了解模板中的某些變量到底來自何處。如果僅僅是某隔離scope當(dāng)中的一條指令，那么大家肯定能夠輕松找到答案。但在面對(duì)著復(fù)雜的指令與控制器結(jié)構(gòu)時(shí)，我們無疑需要更聰明的方式來追蹤變量來源。

下面是具體實(shí)際方式：

• 找到使用該變量的元素，而后檢查其scope。
• 檢查其值，例如利用$($0).scope().foo代碼，其中屬性被稱為“foo”。
• 如果其值已經(jīng)被定義，大家即可據(jù)此得出答案，因?yàn)樵搶傩钥隙ㄊ莵碜远x層的控制器或者指令。而如果該值尚未被定義，則可以嘗試DOM中的其它層。只需重復(fù)這一過程，答案最終必能顯現(xiàn)。

弄清某些元素為何不會(huì)顯示出來

有時(shí)候，大家會(huì)發(fā)現(xiàn)自己的使用ng-if、ng-switch或者ng-views進(jìn)行搜索或者檢查時(shí)，某些元素不會(huì)被顯示出來。這是因?yàn)榇祟愔噶顣?huì)以狀態(tài)或者自身所使用路徑為基礎(chǔ)從DOM處整體添加或者移除其內(nèi)容。只要使用ng-show即可解決問題，其能夠通過隱藏是否可見的方式對(duì)這些元素進(jìn)行顯示與隱藏。

在Angular.js當(dāng)中，注釋將與元素保持在同一位置。

找尋控制器以處理頁面中的特定部分

很多朋友肯定絕對(duì)這項(xiàng)任務(wù)無甚難度，但必須強(qiáng)調(diào)的是，相當(dāng)一部分開發(fā)人員早已將其忘在腦后。要想找到負(fù)責(zé)處理頁面內(nèi)特定部分的控制器，DOM當(dāng)中的ng-controller屬性將能夠幫上大忙。

對(duì)很多人來說，從一套規(guī)模龐大的HTML頁面當(dāng)中找尋屬性絕非易事。不過這其中是有簡便方法的; 點(diǎn)擊對(duì)象元素，而后運(yùn)行$($0).attr(‘ng-controller’)。如果沒有返回任何結(jié)果，那么我們需要點(diǎn)擊父scope并再試一次。

jQuery在這方面也有著重要作用，要想找到與當(dāng)前位置距離很近的某控制器，大家可以使用以下代碼：

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

理解digest周期

$digest在Angular.js當(dāng)中負(fù)責(zé)觸發(fā)變更。如果沒有特定代理或者對(duì)象制定程序，Angular.js將不會(huì)在各對(duì)象的屬性發(fā)生變更時(shí)接收由其發(fā)出的通知內(nèi)容。有鑒于此，digest周期的作用是檢查各觀察程序并表達(dá)其任何變更。也就是說，在運(yùn)行digest的條件下，Angular.js將隨時(shí)了解當(dāng)前發(fā)生的事件。

而一旦發(fā)生了某些Angular.js未能識(shí)別到的事件，例如一條控制臺(tái)指令，那么接下來什么都不會(huì)發(fā)生，Angular也不會(huì)自動(dòng)啟動(dòng)digest。在這時(shí)，大家必須手動(dòng)執(zhí)行digest，從而獲得相關(guān)更新。

與任何其它編程語言一樣，Angular.js在使用過程中還有有點(diǎn)難度的。但只要能夠掌握其中的技巧與竅門，那么這種難題絕不會(huì)持續(xù)太久，而這一點(diǎn)對(duì)于每一位下定決心打算學(xué)習(xí)Angular.js并利用其進(jìn)行應(yīng)用程序開發(fā)的朋友而言都非常重要。

網(wǎng)頁題目：如何對(duì)自己尚不熟悉AngularJS的情況下對(duì)代碼進(jìn)行調(diào)試
本文路徑：http://uogjgqi.cn/article/cojdocp.html