Question

我正在尝试学习Angular.JS，所以我编写了这个简单的代码来测试它：

<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>

<body>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/myapp.js"></script>
    <p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>

在浏览器中，我应该看到以下输出：The sum of 5+10 is: 15，但我只是看到它：The sum of 5+10 is: {{5 + 10}}。我在Chrome和FF中尝试过这种方法，我尝试使用<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>从Google CDN添加angular.js，我尝试在<head>标记之间移动脚本，但结果始终相同。

我做错了什么？为什么我没有正确输出？

Answer 1

<html ng-app="myapp">

为ng-app指定名称时，它希望找到具有该名称的用户创建的模块。如果你真的只是想让你的例子工作，你可以简单地删除="myapp"，然后你就可以了。

<html ng-app>

如果要保留“myapp”名称，请在加载角度后添加此脚本块。

<script type="text/javascript">
  angular.module('myapp', []);
</script>

Answer 2

删除html中的名称初始化：

<html ng-app>

或者在javascript文件中初始化模块：

  var myapp = angular.module("myapp", []);

第二种方式更好。

Answer 3

只需使用＆＃34; ng-app＆＃34;：

<html>
 <head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
 </head>
 <body ng-app>
  {{ 5 + 10 }}
 </body>
</html>

Fiddle here

Answer 4

这应该有用。

您需要实现此处使用的模块myapp

<html ng-app="myapp">

以下内容：

<script type="text/javascript">
    var app = angular.module('myapp', []);
</script>

最终的HTML是这样的：

<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('myapp', []);
</script>

</head>

<body>
    <script type="text/javascript" src="js/myapp.js"></script>
    <p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>

Angular.js不起作用

4 个答案: