Angular.js不起作用

我努力学习Angular.JS，所以我写了这个简单的代码只是为了测试它：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上都尝试过，我尝试从Google CDN中添加angular.js，并且尝试将<head>标签之间的脚本移动到<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>，但结果始终如此。

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

来源

2014-11-03 Igal

@IgorSemin它目前是一个空文件，没有代码。 – Igal 2014-11-03 14:06:06

或在myapp.js中查看您的代码 – 2014-11-03 14:06:37

我建议您更改问题的标题。你的问题与Angular.js是否工作无关。这与你不知道Angular如何工作有关。 – 2014-11-03 14:06:40

要么删除名称初始化在HTML：

<html ng-app>

或者在你的JavaScript文件初始化模块：

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

第二种方式是更好的。

来源

2014-11-03 14:31:32

再次，非常感谢！ :) – Igal 2014-11-03 14:35:11

<html ng-app="myapp">

当您为ng-app指定一个名称时，它希望找到具有该名称的用户创建的模块。如果你真的只是想让你的例子工作，你可以简单地删除="myapp"，你会全部设置。

<html ng-app>

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

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

来源

2014-11-03 14:14:57 theJoeBiz

非常感谢您的详细解释！ – Igal 2014-11-03 14:35:53

只要使用 “NG-应用”：

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

来源

2014-11-03 14:15:31 MarcoS

这应该起作用。

你需要实例化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>

来源

2014-11-03 14:34:42 blfuentes

Angular.js不起作用

回答

相关问题