简单的 AngularJS 控制器演示不工作答案

【问题标题】：Simple AngularJS Controller Demo Not Working简单的 AngularJS 控制器演示不工作
【发布时间】：2023-03-10 22:00:01
【问题描述】：

我使用 AngularJS 已经有一段时间了，这个特定的代码块无论如何都不难，但它不起作用，我在这里肯定缺少一些非常简单的东西：

<!DOCTYPE html>
<html data-ng-app="">
  <head>
    <title>Simple ngRepeat with Data-Binding</title>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name
      <br />
      <input type="text" data-ng-model="name" />
      <br />
      <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
          {{ cust.name }} ({{ cust.city | uppercase }})
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function SimpleController($scope) {
        $scope.customers = [
          {name: 'Bob', city: 'Atlanta'},
          {name: 'James', city: 'Orlando'},
          {name: 'Miles', city: 'Harlem'},
          {name: 'Carter', city: 'San Francisco'}
        ];
      }
    </script>
    <script src="angular.min.js"></script>
  </body>
</html>

截至目前，此代码会生成一个空白页。应该有一个包含四条记录的无序列表，例如，在输入框中键入“Bob”应将记录过滤到唯一包含名称“Bob”的记录。

当 AngularJS 代码是内联的并且没有控制器时，这个演示已经可以工作了。我使用 ngInit 来提供客户数组。当我试图将客户放在他们自己的控制器中时，我开始收到一个空白页。

我确定我只需要第二双眼睛来查看这个非常简单的示例。

感谢您提供的任何帮助。

【问题讨论】：

你能发布你的javascript代码吗？顺便说一句，你应该声明你的ng-app
从data-ng-controller 中删除data。 ng-controller 就足够了。
这是您的实际代码吗？因为它不是控制器的有效角度语法（如果 js 的 sn-p 是您的所有角度代码）
您缺少角度引导功能
@Hardik Vaghani - data-ng-controller 或 ng-controller 是相同的，除了前缀 data- 将允许 HTML 通过验证。

标签： angularjs angularjs-ng-repeat angularjs-controller angular-ngmodel

【解决方案1】：

<!DOCTYPE html>
<html data-ng-app="app">
  <head>
    <title>Simple ngRepeat with Data-Binding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name
      <br />
      <input type="text" data-ng-model="name" />
      <br />
      <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
          {{ cust.name }} ({{ cust.city | uppercase }})
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      angular.module('app', []).controller('SimpleController', SimpleController);
      function SimpleController($scope) {
        $scope.customers = [
          {name: 'Bob', city: 'Atlanta'},
          {name: 'James', city: 'Orlando'},
          {name: 'Miles', city: 'Harlem'},
          {name: 'Carter', city: 'San Francisco'}
        ];
      }
    </script>
  </body>
</html>

您可以在演示中更改多项内容。

你应该创建一个新的角度模块

var module = angular.module(name, [dependencies])
应该使用 ng-app 引导该模块

ng-app="nameOfApp"
控制器应该添加到定义的模块中

module.controller('SimpleController', SimpleController);

编辑：没有指定模块的相同结果

<!DOCTYPE html>
<html data-ng-app="">
  <head>
    <title>Simple ngRepeat with Data-Binding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name
      <br />
      <input type="text" data-ng-model="name" />
      <br />
      <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
          {{ cust.name }} ({{ cust.city | uppercase }})
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function SimpleController($scope) {
        $scope.customers = [
          {name: 'Bob', city: 'Atlanta'},
          {name: 'James', city: 'Orlando'},
          {name: 'Miles', city: 'Harlem'},
          {name: 'Carter', city: 'San Francisco'}
        ];
      }
    </script>
  </body>
</html>

【讨论】：

感谢您的回答。我正在就 Angular 的不同方面进行课程，这只是第 2 步，因为第 3 步将需要创建一个实际模块并将整个代码块封装在其中。不声明模块或使用 data-ng-app="" 作为应用声明就无法运行控制器吗？
@MindsectTeam 是的，这是可能的。事实上，我已经获取了您的源代码，将正确版本的 angular 添加到并且它按预期运行。（也用那个正在运行的版本更新了我的答案）。嗯。不确定为什么它会为您显示空白页。也许你指的angular.min.js不存在？
有趣！我们的开发团队在 Angular 1.3.1 中运行一切。但是，当我使用您在第二个演示中使用的 Angular 版本（1.2.23）时，一切正常！谢谢你的新观点。同时提供信息和令人不安。我会对此进行更多研究。