序言
放假期間，學生忙著充電，學習“全棧開發”的不在少數，我時常收到讀者的反饋，在調試《全棧開發之道》一書的實例時，遇到困惑。 盡管會遇到各種各樣的問題，但總體來講，可以歸結為一個技術點，那就是―― Angular的調試。
編寫Angular 代碼并不難，難的是調試Angular代碼。對于Angular新手來說，調試Angular需要一個過程，并在這個過程中不斷積累經驗，一看到報錯，就能八九不離十猜出問題出在什么地方。
這篇文章，我們先來從常見的Angular調試技巧講起，如果遇到404 （not found）報錯，將怎么辦？
模擬一個調試場景
《全棧開發之道》一書的實例 6.3.3 章節――單頁面應用的實現，要實現這樣的一個效果，如圖所示：
單頁面應用效果
當點擊 Home、About 、 Contact 時，下方的內容會相應地發生變化，而不需要頁面發送一個新的請求。 單頁面應用就是在一個頁面內自動發生變化，也不用來回地跳轉到新的頁面，用戶體驗大大提升。
為了實現這樣的單頁面應用，書中創建了html文件（index.html、home.html、about.html、contact.html）, 還有一個 myapp.js 用于router 和 controller， 并創建了應用程序的入口server.js
按照書上的教程，一步步完成代碼的輸入， 直到最后運行 node server.js 時，發現點擊 Home、About、Contact 按鈕時，下方的內容沒有發生變化。 代碼是沒有問題的，這又是是怎么回事呢？
調試技巧
友情提示：
在調試 Angular時，一定要用 Chrome 瀏覽器。這一點很容易理解，Angular 是Google 家，Chrome 也是Google 家的，毫無疑問，Chrome 對自家的產品是支持的最好的。
在終端窗口運行 node server.js
在Chrome 瀏覽器中，輸入： http://localhost:3000
此時，打開Chrome 瀏覽器的開發工具, 如果是Wiindows 系統，用F12鍵； 如果是Mac 系統，用 Option+Command+I ，這里的截圖以Mac 系統為例。
Angular 報錯提示
先來看第一行錯誤，很多時候，第二行錯誤是第一行引起的；如果第一個錯誤解決了，下面的報錯會自動消失。
http://localhost:3000/myapp.js 404 (Not Found)
在網絡術語中，404 的意思是，你要請求的文件不存在。 這在傳統的開發環境中，比如C、Java，即便文件找不見，也不會出現 404 錯誤。 再看接下來的提示 Not Found， 意思是沒找見。
報錯排查方法
遇到這種報錯，排查的方法是，先看這個文件是否存在，再看它的訪問路徑是否正確。
（1）確認該文件是否存在。 文件名必須嚴格一致，文件名本身不用區分大小寫。 比如： index.html 與 Index.html 是同一個文件， myapp.js 與 myApp.js 也是一回事。
（2）排查文件的路徑。 排查文件名是否正確，這事簡單； 而排查文件的路徑，就是一個技術活兒了。 為什么這么說呢？ 這是因為，在AngularJS中，有一個靜態資源的概念。myApp.js文件分明是存在的，為何找不見呢？ 先來看引用myApp.js 的那行代碼。
在index.html 的 <head> 標簽中：
<script src="myapp.js"></script>
引用一個文件時，要么給出絕對路徑，要么給出相對路徑，myapp.js 的文件路徑是怎么約定的呢？
這要看 server.js 文件是怎么規定的路徑約定，代碼如下：
app.use(express.static(path.join(__dirname, 'public')));
__dirname是一個路徑，它是指當前文件（server.js）所在的路徑，而public 是__dirname的下一級目錄。 path.join 是一個規定的表單式，express.static 表示該應用程序指定的 靜態資源存放的位置。
按照這個概念，上面的 home.html 、 about.html、 contact.html、myapp.js 四個文件都是靜態資源文件，再來審視這行代碼：
<script src="myapp.js"></script>
代碼這么寫時，應用程序要在當前路徑的 public 目錄遍歷 myapp.js 文件。 讀到這里，你就明白報錯404 的原因所在了吧。
需要把這些靜態資源文件，統一放在public 文件夾下，如圖所示。
靜態資源文件路徑
進一步討論
既然是路徑惹的禍，那么能不能換一種思路，改一下靜態資源路徑的設置呢？ 比如，修改server.js 文件的代碼，如下：
app.use(express.static(path.join(__dirname, '/')));
這樣一來，上面那四個文件就不用放到public了, 這種方法，雖然沒有報錯，問題是，這不是規范的做法。但凡稍微復雜一點的應用，都會用到大量的靜態資源文件，如果不分配路徑，將難以維護！
小結
掌握一門編程技術， 僅僅會編寫代碼是不夠的。 評價一個人的編程水平，就看他的調試技能是否駕輕就熟。 后續，我要借助一些 Angular專用的調試工具，模擬一些出現bug的場景，看看如果快速發現root cause，并給出解決方案。
總之，掌握Angular的調試技能，是通往高級全棧工程師的階梯！以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
