HTML 无法识别 angular 中的控制器

Question

我正在关注 Angular JS 的视频教程视频并开始使用控制器作为语法的主题。然而，我正在处理的示例产生了与教程中的不同的结果。我的代码（下方）输出以下错误：

angular.js:13550 Error: [ng:areq] Argument 'ParentController' is not a function, got undefined

我很困惑为什么会发生这种情况，因为我从教程中逐字复制了代码，但在教程的代码输出看起来不错的情况下仍然出现错误。

HTML

<body>
    <div ng-controller="ParentController">
        <p>This is the parent: {{ parentMessage }}</p>
        <div ng-controller="FirstChild">
            <p>My parent is: {{ parentMessage }}</p>
            <p>The first child is: {{ firstMessage }}</p>
        </div>
        <div ng-controller="SecondChild">
            <p>My parent is: {{ parentMessage }}</p>
            <p>The second child is: {{ secondMessage }}</p>
        </div>
    </div>
</body>

JS

angular.model('myApp').controller('ParentController', ['$scope', function($scope) {
$scope.parentMessage = 'What she said.';}]);

angular.model('myApp').controller('FirstChild', ['$scope', function($scope) {
$scope.firstMessage = 'I want my mother.';}]);

angular.model('myApp').controller('SecondChild', ['$scope', function($scope) {
$scope.secondMessage = 'I want my father.';}]);

出现错误的原因是HTML代码无法在JS代码中找到ParentController、FirstChild和SecondChild函数作为函数。这困扰我的原因是因为当我尝试类似的 parent/child JS/HTML 代码对时，错误没有出现。

HTML

<body>
    <div ng-controller="First">
        <input type="text" ng-model="model.name">
        <p>This is the first controller: {{model.name}}</p>
    </div>
    <div ng-controller="Second">
        <input type="text" ng-model="model.name">
        <p>This is the second controller: {{model.name}}</p>
    </div>  
</body>

JS

angular.module('myApp').service('SharedService',function(){
    return {name: 'Uncle Alvin'};});

angular.module('myApp').controller('First',['$scope', 'SharedService', function($scope, SharedService){
        $scope.model = SharedService;}]);

angular.module('myApp').controller('Second',['$scope', 'SharedService', function($scope, SharedService){
        $scope.model = SharedService;}]);

我不相信使用共享服务是后一对代码工作而前者不工作的原因。我想知道是什么导致 HTML 首先无法识别 ng-controller 以及我应该如何修改这对控制器以使其可识别。

如果这个 post 对于我自己找不到的另一个主题来说是多余的，我深表歉意。如果是，请随意 link 最 original/helpful post 这个问题。

Answer 1

控制器在第一个模块中不工作的原因是，

(i) 不是 model 而是 module

angular.module('myApp')

如果你不声明它三次就很容易，声明一次并添加控制器。

var myApp= angular.module('myApp', []);

myApp.controller('ParentController', ['$scope', function($scope) {
$scope.parentMessage = 'What she said.';}]);

myApp.controller('FirstChild', ['$scope', function($scope) {
$scope.firstMessage = 'I want my mother.';}]);

myApp.controller('SecondChild', ['$scope', function($scope) {
$scope.secondMessage = 'I want my father.';}]);

Answer 2

这是一个简单的例子，说明如何操作。

这个例子来自 w3schools

名字：
姓氏：

全名：{{firstName + " " + lastName}}

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

HTML 无法识别 angular 中的控制器

HTML not recognizing a controller in angular

html

javascript

angularjs

ng-controller