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

序言

放假期间，学生忙着充电，学习“全栈开发”的不在少数，我时常收到读者的反馈，在调试《全栈开发之道》一书的实例时，遇到困惑。 尽管会遇到各种各样的问题，但总体来讲，可以归结为一个技术点，那就是—— 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的调试技能，是通往高级全栈工程师的阶梯！以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • AngularJS报错$apply already in progress的解决方法分析
  • AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
  • AngularJS iframe跨域打开内容时报错误的解决办法
赞 (0)

相关推荐

  • AngularJS报错$apply already in progress的解决方法分析

    本文实例分析了AngularJS报错$apply already in progress的解决方法.分享给大家供大家参考,具体如下: 如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中记录的异常或者错误,就应该是需要关注和解决的问题,否则就没有必要出现在日志中了. Error: [$rootScope:inprog] $apply already

  • AngularJS iframe跨域打开内容时报错误的解决办法

    <iframe id="myFrame" ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe> 打开不同域的内容时报下面的错误: Blocked loading resource from url not allowed by $sceDelegate policy 解决方案:

  • AngularJS 使用ng-repeat报错 [ngRepeat:dupes]

    AngularJS 使用ng-repeat报错 [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq ng-repeat报错 <div ng-init="words = ['高校','高校','高校']" ng-repeat="word in words"> {{word}} </div> [ng

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

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

    序言 放假期间,学生忙着充电,学习"全栈开发"的不在少数,我时常收到读者的反馈,在调试<全栈开发之道>一书的实例时,遇到困惑. 尽管会遇到各种各样的问题,但总体来讲,可以归结为一个技术点,那就是-- Angular的调试. 编写Angular 代码并不难,难的是调试Angular代码.对于Angular新手来说,调试Angular需要一个过程,并在这个过程中不断积累经验,一看到报错,就能八九不离十猜出问题出在什么地方. 这篇文章,我们先来从常见的Angular调试技巧讲起,

  • 详解webpack的clean-webpack-plugin插件报错

    1.出错代码 const path = require('path') const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './input.js', output: { path: path.resolve(__dirname, 'dist'),

  • 详解VS2019使用scanf()函数报错的解决方法

    详解VS2019使用scanf()函数报错的解决方法

    目录 scanf_s()函数 scanf_s()函数与scanf()函数的区别 VS2019使用scanf()函数报错的解决方法 解决方法一 解决方法二 解决方法三 解决方法四 首先来看一段很简单的C语言代码 #include<stdio.h> int main(void) { char s[10]; scanf("%s",s); printf("%s",s); return 0; } 这段代码的作用就是输入一个字符串,再把这个字符串输出.在其他IDE(

  • 详解Androidstudio3.0 关于Gradle报错的问题(小结)

    前言 升级Android Studio to 3.0 canary 1版本后,之前一个正常的Project,一直报错,报错内容如下 Error:Failed to complete Gradle execution. Cause: The version of Gradle you are using (3.3) does not support the forTasks() method on BuildActionExecuter. Support for this is available

  • 详解Vue.js搭建路由报错 router.map is not a function

    详解Vue.js搭建路由报错 router.map is not a function

    错误: 出现问题原因:2.0已经没有map这个方法了,只有1.0兼容该方法. 解决方法: (1)方法1:使用命令npm install vue-router@0.7.13兼容1.0版本vue. 在代码中的使用方法: (2)解决方法2:基于vue2.0,写对应的方法. 具体用法如下图: 注:1.0和2.0在一些用法上有比较大的差别,用的时候需要注意. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 详解Angular组件之生命周期(二)

    详解Angular组件之生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child

  • 详解Flask开发技巧之异常处理

    目录 一.Flask内置异常处理 二.HTTPException类分析 三.自定义异常处理类 四.方便的定义自己的错误类 五.注意事项 一.Flask内置异常处理 要想在Flask中处理好异常,有一套自己的异常处理机制,首先,我们必须先知道Flask自己是如何处理异常的.去flask的源码里找一找会发现,在flask源码的app.py文件下,有很多会抛出异常的方法,其中拿一个举例: def handle_exception(self, e): """Default excep

  • 详解Maven项目Dependencies常见报错及解决方案

    个人最近项目中所遇到的问题,记录下便自己和同样遇到问题的小伙伴提供一个参考. 通常Maven里报红波浪线的常见问题 ①可能是子工程没有继承父工程 注意父工程中有中对应的module: <groupId>com.fred.parent</groupId> <artifactId>mall</artifactId> <version>1.0-SNAPSHOT</version> <modules> <module>

  • 详解Angular组件数据不能实时更新到视图上的问题

    目录 问题起源 OnPush策略 当前组件或子组件之一触发了事件 总结 问题起源 MainComponent: @Component({ selector: 'main', template: ` <MenuComponent [isReport]="isReport"> </MenuComponent> `, changeDetection:ChangeDetectionStrategy.OnPush }) export class MainComponent

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

随机推荐