Angular.js不起作用
[英]Angular.js doesn't work
问题描述
I'm trying to learn Angular.JS, so I wrote this simple code just to test it: 
我正在尝试学习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>
In the browser I'm supposed to see the following output: The sum of 5+10 is: 15 , but I just see it as it is: The sum of 5+10 is: {{5 + 10}} . 在浏览器中我应该看到以下输出： The sum of 5+10 is: 15 ，但我只是看到它： The sum of 5+10 is: {{5 + 10}} 。 I tried it both in Chrome and FF, I tried to add the angular.js from Google CDN with <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> , I tried to move the script between the <head> tags, but the outcome is always the same. 我在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 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> ，我试图在<head>标签之间移动脚本，但结果总是一样的。
What am I doing wrong? 我究竟做错了什么？ Why don't I have the output correctly? 为什么我没有正确输出？
4 个解决方案
解决方案1
4 2014-11-03 14:14:57
<html ng-app="myapp">
When you specify a name for ng-app, it's expecting to find a user-created module with that name. 为ng-app指定名称时，它希望找到具有该名称的用户创建的模块。 If you're truly just wanting your example to work, you can simply remove the ="myapp" and you'll be all set. 如果你真的只是想让你的例子工作，你可以简单地删除="myapp" ，你就可以全部设置。
<html ng-app>
If you want to keep your "myapp" name, add this script block after you load angular. 如果要保留“myapp”名称，请在加载角度后添加此脚本块。
<script type="text/javascript">
angular.module('myapp', []);
</script>
解决方案2
1 已采纳 2014-11-03 14:31:32
Either remove name initialization in html: 在html中删除名称初始化：
<html ng-app>
Or initialize module in your javascript file: 或者在javascript文件中初始化模块：
var myapp = angular.module("myapp", []);
Second way is better. 第二种方式更好。
解决方案3
0 2014-11-03 14:15:31
Just use "ng-app": 只需使用“ng-app”：
<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>
解决方案4
0 2014-11-03 14:34:42
This should work. 这应该工作。
You need to instanciate the module myapp you are using here 您需要在此处实现您正在使用的模块myapp
<html ng-app="myapp">
with the following: 以下内容：
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
The final html is like this: 最终的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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.