詳解Angular調(diào)試技巧之報錯404(not found)
序言
放假期間，學(xué)生忙著充電，學(xué)習(xí)“全棧開發(fā)”的不在少數(shù)，我時常收到讀者的反饋，在調(diào)試《全棧開發(fā)之道》一書的實例時，遇到困惑。 盡管會遇到各種各樣的問題，但總體來講，可以歸結(jié)為一個技術(shù)點，那就是—— Angular的調(diào)試。
編寫Angular 代碼并不難，難的是調(diào)試Angular代碼。對于Angular新手來說，調(diào)試Angular需要一個過程，并在這個過程中不斷積累經(jīng)驗，一看到報錯，就能八九不離十猜出問題出在什么地方。
這篇文章，我們先來從常見的Angular調(diào)試技巧講起，如果遇到404 （not found）報錯，將怎么辦？
模擬一個調(diào)試場景
《全棧開發(fā)之道》一書的實例 6.3.3 章節(jié)——單頁面應(yīng)用的實現(xiàn)，要實現(xiàn)這樣的一個效果，如圖所示：
單頁面應(yīng)用效果
當(dāng)點擊 Home、About 、 Contact 時，下方的內(nèi)容會相應(yīng)地發(fā)生變化，而不需要頁面發(fā)送一個新的請求。 單頁面應(yīng)用就是在一個頁面內(nèi)自動發(fā)生變化，也不用來回地跳轉(zhuǎn)到新的頁面，用戶體驗大大提升。
為了實現(xiàn)這樣的單頁面應(yīng)用，書中創(chuàng)建了html文件（index.html、home.html、about.html、contact.html）, 還有一個 myapp.js 用于router 和 controller， 并創(chuàng)建了應(yīng)用程序的入口server.js
按照書上的教程，一步步完成代碼的輸入， 直到最后運行 node server.js 時，發(fā)現(xiàn)點擊 Home、About、Contact 按鈕時，下方的內(nèi)容沒有發(fā)生變化。 代碼是沒有問題的，這又是是怎么回事呢？
調(diào)試技巧
友情提示：
在調(diào)試 Angular時，一定要用 Chrome 瀏覽器。這一點很容易理解，Angular 是Google 家，Chrome 也是Google 家的，毫無疑問，Chrome 對自家的產(chǎn)品是支持的最好的。
在終端窗口運行 node server.js
在Chrome 瀏覽器中，輸入： http://localhost:3000
此時，打開Chrome 瀏覽器的開發(fā)工具, 如果是Wiindows 系統(tǒng)，用F12鍵； 如果是Mac 系統(tǒng)，用 Option+Command+I ，這里的截圖以Mac 系統(tǒng)為例。
Angular 報錯提示
先來看第一行錯誤，很多時候，第二行錯誤是第一行引起的；如果第一個錯誤解決了，下面的報錯會自動消失。
http://localhost:3000/myapp.js 404 (Not Found)
在網(wǎng)絡(luò)術(shù)語中，404 的意思是，你要請求的文件不存在。 這在傳統(tǒng)的開發(fā)環(huán)境中，比如C、Java，即便文件找不見，也不會出現(xiàn) 404 錯誤。 再看接下來的提示 Not Found， 意思是沒找見。
報錯排查方法
遇到這種報錯，排查的方法是，先看這個文件是否存在，再看它的訪問路徑是否正確。
（1）確認(rèn)該文件是否存在。 文件名必須嚴(yán)格一致，文件名本身不用區(qū)分大小寫。 比如： index.html 與 Index.html 是同一個文件， myapp.js 與 myApp.js 也是一回事。
（2）排查文件的路徑。 排查文件名是否正確，這事簡單； 而排查文件的路徑，就是一個技術(shù)活兒了。 為什么這么說呢？ 這是因為，在AngularJS中，有一個靜態(tài)資源的概念。myApp.js文件分明是存在的，為何找不見呢？ 先來看引用myApp.js 的那行代碼。
在index.html 的 <head> 標(biāo)簽中：
<script src="myapp.js"></script>
引用一個文件時，要么給出絕對路徑，要么給出相對路徑，myapp.js 的文件路徑是怎么約定的呢？
這要看 server.js 文件是怎么規(guī)定的路徑約定，代碼如下：
app.use(express.static(path.join(__dirname, 'public')));
__dirname是一個路徑，它是指當(dāng)前文件（server.js）所在的路徑，而public 是__dirname的下一級目錄。 path.join 是一個規(guī)定的表單式，express.static 表示該應(yīng)用程序指定的 靜態(tài)資源存放的位置。
按照這個概念，上面的 home.html 、 about.html、 contact.html、myapp.js 四個文件都是靜態(tài)資源文件，再來審視這行代碼：
<script src="myapp.js"></script>
代碼這么寫時，應(yīng)用程序要在當(dāng)前路徑的 public 目錄遍歷 myapp.js 文件。 讀到這里，你就明白報錯404 的原因所在了吧。
需要把這些靜態(tài)資源文件，統(tǒng)一放在public 文件夾下，如圖所示。
靜態(tài)資源文件路徑
進一步討論
既然是路徑惹的禍，那么能不能換一種思路，改一下靜態(tài)資源路徑的設(shè)置呢？ 比如，修改server.js 文件的代碼，如下：
app.use(express.static(path.join(__dirname, '/')));
這樣一來，上面那四個文件就不用放到public了, 這種方法，雖然沒有報錯，問題是，這不是規(guī)范的做法。但凡稍微復(fù)雜一點的應(yīng)用，都會用到大量的靜態(tài)資源文件，如果不分配路徑，將難以維護！
小結(jié)
掌握一門編程技術(shù)， 僅僅會編寫代碼是不夠的。 評價一個人的編程水平，就看他的調(diào)試技能是否駕輕就熟。 后續(xù)，我要借助一些 Angular專用的調(diào)試工具，模擬一些出現(xiàn)bug的場景，看看如果快速發(fā)現(xiàn)root cause，并給出解決方案。
總之，掌握Angular的調(diào)試技能，是通往高級全棧工程師的階梯！以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要和大家一起學(xué)習(xí)Angular路由，介紹angular的$route的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本文主要講解AngularJS 過濾器,這里整理了過濾器的相關(guān)資料并附示例代碼，幫助大家學(xué)習(xí)AngularJS的知識，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Angular中的Promise對象($q介紹),本文講解了Promise模式、Q Promise的基本用法、AngularJs中的$q.defferd等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了如何利用CSS3在Angular中實現(xiàn)動畫效果，對angular動畫相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
本文主要講解了Angular的路由動畫和高階動畫函數(shù)，對此感興趣的同學(xué)，可以把代碼親自實驗一下，理解其原理。2021-05-05
AngularJS實現(xiàn)的2048小游戲功能【附源碼下載】
這篇文章主要介紹了AngularJS實現(xiàn)的2048小游戲,可實現(xiàn)通過鍵盤W、S、A、D鍵控制上下左右移動進行游戲的功能,涉及AngularJS頁面元素動態(tài)操作及數(shù)值運算等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了AngularJS入門示例之Hello World,較為詳細(xì)的分析了AngularJS程序的原理及Hello World程序的創(chuàng)建步驟,需要的朋友可以參考下2017-01-01
AngularJS誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。這篇文章主要帶著大家理解Angular數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了ng-alain的sf如何自定義部件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06