详解Angular调试技巧之报错404(not found)


Posted in Javascript onJanuary 31, 2018

序言

放假期间,学生忙着充电,学习“全栈开发”的不在少数,我时常收到读者的反馈,在调试《全栈开发之道》一书的实例时,遇到困惑。 尽管会遇到各种各样的问题,但总体来讲,可以归结为一个技术点,那就是—— Angular的调试。

编写Angular 代码并不难,难的是调试Angular代码。对于Angular新手来说,调试Angular需要一个过程,并在这个过程中不断积累经验,一看到报错,就能八九不离十猜出问题出在什么地方。

这篇文章,我们先来从常见的Angular调试技巧讲起,如果遇到404 (not found)报错,将怎么办?

模拟一个调试场景

《全栈开发之道》一书的实例 6.3.3 章节——单页面应用的实现,要实现这样的一个效果,如图所示:

详解Angular调试技巧之报错404(not found)

单页面应用效果

当点击 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调试技巧之报错404(not found)

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 文件夹下,如图所示。

详解Angular调试技巧之报错404(not found)

静态资源文件路径

进一步讨论

既然是路径惹的祸,那么能不能换一种思路,改一下静态资源路径的设置呢? 比如,修改server.js 文件的代码,如下:

app.use(express.static(path.join(__dirname, '/')));

这样一来,上面那四个文件就不用放到public了, 这种方法,虽然没有报错,问题是,这不是规范的做法。但凡稍微复杂一点的应用,都会用到大量的静态资源文件,如果不分配路径,将难以维护!

小结

掌握一门编程技术, 仅仅会编写代码是不够的。 评价一个人的编程水平,就看他的调试技能是否驾轻就熟。 后续,我要借助一些 Angular专用的调试工具,模拟一些出现bug的场景,看看如果快速发现root cause,并给出解决方案。

总之,掌握Angular的调试技能,是通往高级全栈工程师的阶梯!以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 进度条效果实现代码整理
May 21 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
详解jQuery事件
Jan 13 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
Vue响应式原理详解
Apr 18 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
微信小程序slider组件使用详解
Jan 31 #Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 #Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 #Javascript
微信小程序progress组件使用详解
Jan 31 #Javascript
微信小程序button组件使用详解
Jan 31 #Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 #Javascript
微信小程序模板(template)使用详解
Jan 31 #Javascript
You might like
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python使用socket连接远程服务器的方法
2015/04/29 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Series和DataFrame使用简单入门
2019/11/13 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
python Cartopy的基础使用详解
2020/11/01 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
怎样写留学自荐信
2013/11/11 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
物业管理专业求职信
2014/06/11 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
创卫工作总结2015
2015/04/22 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python