AngularJS如何知晓模块加载位置？模块名与目录映射是内置功能吗？

首先明确一点：AngularJS 本身完全没有内置模块名称到文件目录的自动映射特性。你在phonecat教程里看到的“注册phoneList模块后就能用”的现象，本质是因为教程里已经提前通过HTML的script标签加载了对应的文件，让AngularJS的内部模块注册表中存在这个模块。

下面具体拆解这个过程：

1. AngularJS模块的本质是内存中的注册表项 #

当你执行angular.module('phoneList', [])（在phone-list.module.js里），这段代码会在AngularJS的内部模块注册表中创建一个名为phoneList的模块。之后不管你在哪个文件里引用这个模块名称（比如app.module.js里的依赖声明），AngularJS只是去这个内存注册表中查找是否存在该名称的模块，完全不关心它来自哪个文件或目录。

2. 教程中的文件加载顺序是关键 #

在phonecat教程的入口HTML文件（比如index.html）里，肯定包含了类似这样的script标签：

<!-- 先加载phoneList模块的定义文件 -->
<script src="app/phone-list/phone-list.module.js"></script>
<!-- 再加载该模块的组件文件 -->
<script src="app/phone-list/phone-list.component.js"></script>
<!-- 最后加载依赖phoneList的主应用模块 -->
<script src="app/app.module.js"></script>

这种加载顺序保证了：当app.module.js中的代码执行、声明依赖phoneList时，phoneList模块已经被定义并存在于内存中了。

3. 如果没加载对应文件会发生什么？ #

要是你漏掉了加载phone-list/phone-list.module.js的script标签，直接加载app.module.js，浏览器会立刻抛出[$injector:modulerr]错误，提示找不到phoneList模块——这也侧面证明了AngularJS本身不会自动去目录里找模块文件。

额外补充：构建工具的映射功能 #

有些前端构建工具（比如RequireJS、Webpack）可以实现“模块名称对应文件路径”的映射，让你不用手动写所有script标签，但这是构建工具的能力，和AngularJS本身无关。phonecat教程作为基础入门教程，用的是最原始的手动加载script标签的方式。

内容的提问来源于stack exchange，提问作者TMOTTM