Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular.js doesn't work

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

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

like image 713
Igal Avatar asked Feb 21 '26 18:02

Igal


1 Answers

<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>
like image 162
Joe Avatar answered Feb 23 '26 07:02

Joe



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!