詳解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）確認該文件是否存在。 文件名必須嚴格一致，文件名本身不用區(qū)分大小寫。 比如： index.html 與 Index.html 是同一個文件， myapp.js 與 myApp.js 也是一回事。
（2）排查文件的路徑。 排查文件名是否正確，這事簡單； 而排查文件的路徑，就是一個技術(shù)活兒了。 為什么這么說呢？ 這是因為，在AngularJS中，有一個靜態(tài)資源的概念。myApp.js文件分明是存在的，為何找不見呢？ 先來看引用myApp.js 的那行代碼。
在index.html 的 <head> 標簽中：
<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)文章
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡單嘗試,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要為大家介紹了angular雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要為大家介紹了angular父子組件通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了AngularJS中的過濾器filter用法,包括Angular中一些常用的自帶的過濾器的列舉以及自定義filter的方法,需要的朋友可以參考下2016-04-04
Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Angularjs Ng_repeat中實現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實現(xiàn)復(fù)選框選中并顯示不同的樣式方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
v-bind與{{}}都可以對數(shù)據(jù)進行綁定，接下來通過本文給大家介紹AngularJs模版與v-bind的相關(guān)知識，感興趣的朋友一起看看吧2018-07-07
AngularJS整合Springmvc、Spring、Mybatis搭建開發(fā)環(huán)境
這篇文章主要介紹了AngularJS整合Springmvc、Spring、Mybatis搭建開發(fā)環(huán)境的相關(guān)資料，為學(xué)習(xí)使用AngularJS做好基礎(chǔ)準備，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了angular中如何綁定iframe中src的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Angular刷新當(dāng)前頁面的實現(xiàn)方法
這篇文章主要介紹了Angular刷新當(dāng)前頁面的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11