这个特定的 AngularJS 代码有什么问题？ [关闭]答案

【问题标题】：What is wrong with this particular AngularJS code? [closed]这个特定的 AngularJS 代码有什么问题？ [关闭]
【发布时间】：2015-07-02 03:21:49
【问题描述】：

所以我只是在熟悉并学习了基本的 JS、HTML 和 CSS 之后通过几个在线网站学习了 AngularJS。我发现这 3 个相当容易学习，但是 AngularJS 有点问题。我真的才刚刚开始，但有一个问题，为什么我输入的代码没有返回所需的结果。我有两个窗口（或文件......我不确定这里的正确词汇是什么）打开。一个名为 main.js 的 js 文件和一个名为 index.html 的索引文件。在 main.js 我有：

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

    app.controller('MyController', function($scope) {
      $scope.person = {
        name: "Papa Bear"
      };
    });

在我的索引文件中：

<!doctype html>
<html ng-app='myApp'>
  <head>
    <script src='js/main.js'></script>
    </head>
  <body> 
  <h2> Hi there </h2>
<div ng-controller='MyController'>
  {{ person.name }}
</div>
  </body>
  <html>

“您好”显示得很好。但是（我相当肯定）应该返回的 {{ person.name }}：Papa Bear 只是按字面意思显示为“{{ person.name }}”。我的代码中没有将 person.name 连接到 Papa Bear 的错误在哪里？

【问题讨论】：

不清楚您的索引文件中是否包含angular 脚本？从发布的内容来看，您似乎没有。
检查浏览器的 JS / 错误控制台。您的module 行中有错字，应该是angular.module('myApp', [])（模块名称后有一个额外的)）

标签： javascript html angularjs

【解决方案1】：

是的，就像 kaveman 指出的那样，您必须包含 angular 脚本才能使其工作。尝试将其添加到头部：

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

看看这是否有效。

编辑另外，我刚刚注意到（感谢 Bhojendra Nepal）：

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

应该是：

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

angular.module 将应用程序名称作为第一个参数，将依赖项数组作为第二个参数，以创建一个新的 Angular 模块。如果没有依赖数组的第二个参数，它会返回该名称的现有角度模块。

因此，您可以选择将模块分配给变量，而不是：

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

angular.module('myApp').controller('MyController',function($scope){
    $scope.person = {
        name: "Papa Bear"
    };
});

https://docs.angularjs.org/api/ng/function/angular.module

【讨论】：

同时删除额外的)
所以我总是需要添加一个来连接到 AngularJS 程序？我怎么知道每次具体使用哪个？或者有什么我可以一直使用的吗？
您始终需要通过 CDN 链接或通过服务器上的库副本包含 angular 库。如果您缩小/连接您的角度文件，提供您自己的副本可能会有所帮助，但使用 CDN 的好处是用户可能也访问过使用 CDN 的站点，因此库可能已经被缓存。因此，他们根本不需要下载它，他们可以直接使用缓存中的版本，从而加快页面加载时间。

【解决方案2】：

http://jsfiddle.net/y17Lehqg/

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

app.controller('MyController', function($scope) { $scope.person = { 名称：《熊爸爸》 }; });

【讨论】：