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

【问题标题】：Angular JS - This program is not running at allAngular JS - 这个程序根本没有运行
【发布时间】：2015-08-10 17:57:20
【问题描述】：

我是 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}}

【问题讨论】：

标签： javascript angularjs routes

【解决方案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>

【讨论】：

应该真正解释一下你做了什么不同的事情......像this works 或here's working code 这样的陈述不是很丰富。也省略了重要的依赖
首先，你已经在 HTML 中声明了 data-ng-app="demoApp" 并且在控制器中你试图通过名称 'app'你的第二个错误是{id:1, name='John Doe', place:'San Fransisco'} ....这里应该是{id:1, name:'John Doe', place:'San Fransisco'}....这里我删除了依赖ngRout来执行代码截图，因为我没有在线插件跨度>
我的意思是在答案中给出解释

【解决方案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=。

【讨论】：