Question

我是Angular JS的初学者，这是我坚持的最基本的程序。我试图运行的以下程序根本没有响应。我包括angular-route.js函数，但我仍然卡住了。

<html data-ng-app="demoApp">
<body data-ng-controller = "SimpleController">

    <label>Name:</label>
    <input type="text" data-ng-model="name"/> {{name}}

    <ul>
        <li data-ng-repeat="cust in customers"> {{cust.id}} - {{cust.name}} -    {{cust.place}}</li>
    </ul>

    <script src="angular.min.js"></script>
    <script src="angular-route.js"> </script>
</body>

<script>
    var demoApp = angular.module('app', ['ngRoute']);
    demoApp.controller('SimpleController', function ($scope){
        $scope.customers=[
            {id:1, name='John Doe', place:'San Fransisco'},
            {id:2, name:'Jane Doe', place:'Seattle'},
            {id:3, name:'John Mikael', place:'Las Vegas'}
        ];
    });
</script>

这是输出

Name:   {{name}}
{{cust.id}} - {{cust.name}} - {{cust.place}}

Answer 1

这是工作代码......

var demoApp = angular.module('myApp', []); 
demoApp.controller('myController', function ($scope){ 
  $scope.customers=[ 
    {
      id:1, 
      name:'John Doe', 
      place:'San Fransisco'
    }, 
    {
      id:2, 
      name:'Jane Doe', 
      place:'Seattle'
    }, 
    {
      id:3, 
      name:'John Mikael', 
      place:'Las Vegas'
    } 
  ]; 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<label>Name:</label>
<input type="text" data-ng-model="name"/> {{name}}

<ul>
    <li data-ng-repeat="cust in customers"> {{cust.id}} - {{cust.name}} -    {{cust.place}}</li>
</ul>

<script src="angular.min.js"></script>
<script src="angular-route.js"> </script>
  </div>

Answer 2

您的问题在于您声明模块名称的方式。

var demoApp = angular.module('app', ['ngRoute']);

<html data-ng-app="demoApp">

在这种情况下，var demoApp 不是模块的名称，它只是一个可以在JavaScript的其他地方使用的变量。实际的模块名称为'app'，因此您应该使用<html data-ng-app="app">。我强烈建议尽可能使模块名称和变量名称相同，以避免这种混淆。

此外，正如其他人所述，您的数据中存在拼写错误：{id:1, name='John Doe', place:'San Fransisco'},应为name:而不是name=。

Angular JS - 这个程序根本没有运行

2 个答案: