使用AngularJS创建简易待办应用时遇$controller:ctrlreg错误求助

我帮你排查了下代码，你遇到的Error: $controller:ctrlreg错误，根源是脚本加载顺序不对！

浏览器是从上到下解析代码的，你现在把自定义控制器的代码写在了AngularJS库脚本的前面——当浏览器执行到angular.module('todoApp', []).controller(...)这部分时，AngularJS的核心库还没加载完成，angular这个全局对象都不存在，自然没法注册你的todoController，所以AngularJS运行时找不到对应的控制器，就抛出了这个错误。

修正后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('todoApp', [])
  .controller('todoController', function($scope) {
    $scope.tasks = [];
    $scope.add = function() {
      // 可选优化：避免添加空任务，添加后清空输入框
      if ($scope.title) {
        $scope.tasks.push($scope.title);
        $scope.title = '';
      }
    }
  })
</script>

<div ng-app="todoApp" ng-controller="todoController">
  <input ng-model="title" placeholder="输入待办事项">
  <button ng-click="add()">Add</button>
  <ul>
    <li ng-repeat="t in tasks">{{t}}</li>
  </ul>
</div>

关键修改点 #

• 调整脚本顺序：先加载AngularJS核心库，再编写/加载你的自定义控制器代码，确保AngularJS的API已经可以被调用。
• （可选优化）完善了HTML结构：把ng-repeat生成的<li>放在<ul>标签内，符合HTML语义规范；同时给输入框加了占位提示，添加任务后清空输入框，提升用户体验。

下次使用依赖库的时候，一定要记住先加载依赖库，再写依赖于它的自定义代码哦！

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