AngularJS 1.8.3出现[$controller:ctrlreg]报错如何解决

两个核心问题导致运行失败，修正后即可正常运行：

• HTML结构嵌套错误：现有代码将<body>标签写在了<head>内部，不符合HTML规范，浏览器解析时会打乱脚本执行顺序。需要将<body>移动到</head>闭合标签之后，保证<head>、<body>为<html>下的同级节点。
• 控制器注册方式不符合AngularJS 1.8.x规范：你参考的书籍是基于AngularJS 1.2及更早版本编写的，这类旧版本支持直接将全局函数作为控制器使用，但1.3及以上版本默认禁用了该特性，直接使用全局函数会触发[$controller:ctrlreg]（控制器未注册）错误。需要先创建Angular模块，将控制器注册到模块上，同时给ng-app指令绑定对应模块名称。

修正后的可直接运行代码如下：

<html>
<head>
    <title>page 29</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <script 
            type="text/javascript" 
            src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js">
    </script>
    <script> 
        // 定义Angular模块
        var myApp = angular.module('myApp', []);
        // 注册控制器到模块，采用数组形式做显式依赖注入，避免代码压缩后注入失效
        myApp.controller('Ctrl', ['$scope', function ($scope) {
            // 初始化name默认值，避免输入为空时展示undefined
            $scope.name = '';
            $scope.getName = function() {
                return $scope.name;
            }
        }]);
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="Ctrl">
        Напиши свои мысли о ангуляре
        <input type="text" ng-model="name">
        <h1> angularjs - {{getName()}} </h1> 
        <p></p>
    </div>
</body>
</html>

• 精简冗余逻辑：当前示例中getName()函数仅返回name变量值，和直接在模板中写{{name}}效果完全一致，可删除该函数减少不必要的脏检查开销。
• 补充交互提示：空的<p>标签可以增加输入提示、字数统计、非法输入拦截等功能，比如输入为空时提示“请输入内容”。
• 增加基础样式：调整输入框、标题的间距、字体大小，提升页面可读性。
• 增加异常处理：比如监听输入内容长度，超出限制时给出提示。
• 模块化拆分：如果后续功能扩展，可将控制器、服务、指令拆分到单独的JS文件中，避免所有逻辑堆在一个script标签里难以维护。

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