已在HTML标签中引入Angular 仍提示angular变量未定义怎么解决

常见原因及修复方法 #

• 引入顺序错误 #

AngularJS脚本的引入位置必须在所有依赖它的自定义脚本之前，如果你自己的业务代码写在Angular引入标签的前面，浏览器加载时会先执行你的业务代码，此时Angular还没完成加载，自然会报变量未定义。
正确引入顺序示例：

<!-- 第一步先引入AngularJS脚本 -->
<script src="./lib/angular.min.js"></script>
<!-- 第二步再引入自定义业务代码 -->
<script src="./app.js"></script>

• 引入路径错误 #

如果使用CDN地址引入，确认CDN地址可正常访问不会出现404；如果使用本地文件，确认相对路径、文件名大小写没有拼写错误，避免Angular脚本实际加载失败的问题。

• 版本不匹配 #

只有AngularJS 1.x版本会在全局环境挂载angular变量供调用，如果你使用的是Angular 2+的重写版本，全局不会暴露angular变量，这类版本基于TypeScript和模块导入开发，不能直接按1.x的写法调用全局angular对象。

注：如果你是Angular 2+项目，请按照官方文档的模块导入规则开发，不要尝试调用全局angular变量。

• 异步加载导致加载时序问题 #

如果给Angular的script标签添加了async或defer属性，会使脚本异步加载，可能出现你的同步业务代码执行时，Angular还未加载完成的情况。如果是依赖全局angular变量的AngularJS 1.x项目，建议去掉Angular引入标签上的async/defer属性，保证脚本按顺序同步加载。

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