...">
Clever Geek Handbook

Angular.js not working

I am trying to learn Angular.JS, so I wrote this simple code 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 see the following output: The sum of 5+10 is: 15

but I just see it like this: The sum of 5+10 is: {{5 + 10}}

. I tried this in both Chrome and FF, I tried to add 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 tags <head>

, but the result is always the same.

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

+3


source to share


4 answers


Or remove the initialization of the name in the html:

<html ng-app>

Or initialize the module in a javascript file:



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

The second way is better.

+2


source 


<html ng-app="myapp">

When you provide a name for ng-app, it expects to find a user-created module with that name. If you really want your example to work, you can simply uninstall ="myapp"

and everything will be installed.

<html ng-app>


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

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


source


Just use "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>

The spell is here .

0


source


This should work.

You need to create 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 last html looks 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.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>
Run code


0


source






More articles:


All Articles