简单 AngularJS 控制器演示不工作

Question

我已经使用 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 来提供客户数组。当我尝试将客户置于他们自己的控制器中时，我开始收到一个空白页面。

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

感谢您提供的任何帮助。

Answer 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>

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

您应该创建一个新的 angular 模块

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>

简单 AngularJS 控制器演示不工作

Simple AngularJS Controller Demo Not Working

angularjs

angularjs-ng-repeat

angularjs-controller

angular-ngmodel