AngularJS使用控制器时报错angular is not defined的问题求助

问题成因 #

• 引入AngularJS的<script>标签添加了async属性，该属性会让浏览器异步加载AngularJS脚本，无需等待脚本加载完成就会继续解析后续HTML内容。你编写业务逻辑的内联脚本执行时，AngularJS还未加载完毕，全局angular对象尚未初始化，因此触发angular is not defined错误。
• 代码还存在两处待修复的隐含问题：
  • 控制器中没有定义selectLanguage方法，点击按钮后会触发功能报错
  • 低版本AngularJS不支持箭头函数写法，会额外触发兼容性错误

解决方法 #

1. 移除引入AngularJS脚本标签内的async属性，让脚本同步加载，确保执行业务脚本前angular对象已经完成初始化：
   修改前的引入代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous" referrerpolicy="no-referrer" async></script>

修改后的引入代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. 补充selectLanguage方法，将箭头函数替换为普通函数保证兼容性，修改后的业务脚本如下：

var app = angular.module('myLangApp', []);
app.controller('language', function($scope) {
    $scope.myFavLang = 'None';
    $scope.selectLanguage = function(lang) {
        $scope.myFavLang = lang;
    };
});

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