详解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 setTimeout opener的用法示例详解
Oct 23 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
实例详解带参数的 npm script
May 28 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
微信小程序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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
python中List的sort方法指南
2014/09/01 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python导入模块交叉引用的方法
2019/01/19 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python time()的实例用法
2020/11/03 Python
UNIX文件名称有什么规定
2013/03/25 面试题
人事部岗位职责范本
2014/03/05 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
坎儿井导游词
2015/02/09 职场文书
校园开放日新闻稿
2015/07/17 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL