admin管理员组

文章数量:1395730

I'm trying to learn Angular.JS, so I wrote this simple code just to test it:

<!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}}. I tried it both in Chrome and FF, I tried to add the angular.js from Google CDN with <script type="text/javascript" src=".2.26/angular.min.js"></script>, I tried to move the script between the <head> tags, but the oute is always the same.

What am I doing wrong? Why don't I have the output correctly?

I'm trying to learn Angular.JS, so I wrote this simple code just to test it:

<!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}}. 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./ajax/libs/angularjs/1.2.26/angular.min.js"></script>, I tried to move the script between the <head> tags, but the oute is always the same.

What am I doing wrong? Why don't I have the output correctly?

  • javascript
  • angularjs
Share Improve this question asked Nov 3, 2014 at 14:00 IgalIgal 6,10321 gold badges84 silver badges139 bronze badges 7
  • @IgorSemin It's currently an empty file, no code there. – Igal Commented Nov 3, 2014 at 14:06
  • <html ng-app> or look your code in myapp.js – Igor Semin Commented Nov 3, 2014 at 14:06
  • 1 I suggest you change the title of your question. Your question has nothing to do with whether Angular.js works. It has to do with you not understanding how Angular works. – Randy Minder Commented Nov 3, 2014 at 14:06
  • @Igal then remove ng-app name, just <html ng-app> because angular wait initialization module. Or you can add to your myapp.js below code var app = angular.module("myapp", []); – Igor Semin Commented Nov 3, 2014 at 14:10
  • Did you initialize the app in myapp.js? var app = angular.module('myapp', []); – Blazemonger Commented Nov 3, 2014 at 14:11
 |  Show 2 more ments

4 Answers 4

Reset to default 4 
<html ng-app="myapp">

When you specify a name for ng-app, it's expecting to find a user-created module with that name. If you're truly just wanting your example to work, you can simply remove the ="myapp" and you'll be all set.

<html ng-app>

If you want to keep your "myapp" name, add this script block after you load angular.

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

Either remove name initialization in html:

<html ng-app>

Or initialize module in your javascript file:

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

Second way is better.

Just use "ng-app":

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

Fiddle here.

This should work.

You need to instanciate the module myapp you are using here

<html ng-app="myapp">

with the following:

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

The final html is like this:

<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./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>

本文标签： javascriptAngularjs doesn39t workStack Overflow

版权声明：本文标题：javascript - Angular.js doesn&#39;t work - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744117720a2591591.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。