I am having a problem with Angular JS receiving an error
Uncaught Error: [$injector:modulerr]....
this my javascript and html code..
what's wrong there?
(function(){
var app = angular.module('store', []);
app.controller('tes', function($scope) {
});
})();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular</title>
</head>
<link rel="stylesheet" type="text/css" href="../bootstrap.css">
<script type="text/javascript" src="../angular.min.js"></script>
<body ng-app = 'store'>
<div ng-controller="tes">
<h1>{{ 4 + 4 }}</h1>
</div>
</body>
</html>
Well you have your script tag hanging outside head tag and before body tag.
Fixed it as follows;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular</title>
</head>
<body ng-app = 'store'>
<div ng-controller="tes">
<h1>{{ 4 + 4 }}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
working link : http://plnkr.co/edit/tLt22vN1mkGDWTNabq3J?p=preview
I just tested your code by copy paste in a new project and added correct reference to the angular js file and it worked fine for me. Do you have any other module which is trying to load? click on the error link and you might be able to figure out the issue. I think you are missing the correct reference to the angular.min.js file
Most likely explanations
You haven't loaded the file where you define the module 'store', the first code block, in the html
There's an error in your module code so that angular doesn't interpret it correctly
Also fix the ng-app attribute:
<body ng-app="store">
Please remove (function(){ from top and remove })(); from bottom.
it's not a jquery, so please remove it.
And please check ../angular.min.js is on proper place or not.
Related
why is document.getElementById() not working in VS Code?? I keep getting this error: "Uncaught ReferenceError ReferenceError: document is not defined". I'm new to VS Code but I'm assuming the reason It's not working is that I need to install some extension to make it work. The same code is working on Replit but not VS code. I installed JS(ES6) Snippets, Open-in browser, Live Preview and Live Server. It's very simple 2-line code just to experiment but it's not working. It's driving me crazy!
let head = document.getElementById('change')
head.innerText = 'hello'
I bet that you are not running this in an index.html file in the browser, so this is not VS Code problem, you are probably running this in a node console or something, there is no html or document in what you are trying to test and that is why you are getting this error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h1>HELLO</h1>
<hr />
<h2 id="change"></h2>
<script>
let head = document.getElementById('change')
head.innerText = "why isn't this working?";
</script>
</body>
</html>
Definitely has nothing to do with VS Code.
Make sure your html file is referencing your javascript file.
<!DOCTYPE html>
<html>
<body>
<h1>This is my HTML file</h1>
<script src="script.js"></script>
</body>
</html>
The script element should be in your html with the name of your js file
<script src="script.js"></script>
This not the vscode issue please check you are running the right file
I'm following along with an AngularJS class, specifically the AngularJS Fundamentals class, on PluralSight and am creating a demo app using AngularJS. I've followed along perfectly and believe that I've done everything right, but for some reason, my variable isn't being printed to the screen using my controller. I'm getting an error in my console that says "failed to load resource EventController.js 404." How do I fix this?
Here's my EventDetails.html:
<!doctype html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.date}}
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/underscore-1.4.4.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/angular/angular.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers/EventController.js"></script>
</body>
</html>
and then here's my EventController.js:
eventsApp.controller('EventController',
function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
date: '5/17/2018',
time: '11:02 am'
}
}
);
There are the only two things that we've created so far and I'm really confused as to where I messed up. Thanks!
EDIT: Here's my file structure:
I've figured out that removing the '/' at the beginning of all of my script source files allows them to load correctly
I have been receiving the following error since I started learning AngularJS:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.5/$injector/modulerr?p0=ToDo&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.5%2Fangular.min.js%3A17%3A315)
In my efforts to debug this error, I started stripping down my HTML script by script until I was left with an empty HTML that only contained ng-app declaration and <script> to import the angular.min.js via CDN.
Please Help !!
Here's what my html looks like::
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
</html>
Made a silly mistake,
the <script> has to go within the <body> tags. Here is what solved the problem.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Obligatory</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
</html>
</body>
I guess I was more more dumb that I had anticipated :)
I've had a look at similar answers but haven't seen an answer to this.
My directory structure is simply:
Test
|---index.html
|---bootstrap.min.css
|---angular.min.js
|---app.js
My code:
<!doctype HTML>
<html ng-app="store">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<p>I am {{4 + 6}}</p>
<p>{{"Hello" + " you"}}</p>
</body>
</html>
Sadly, running this in the browser (file:///Users/Will/Projects/angular/demo/index.html), it doesn't work. Is this because it's local?
Consider that the following works when loaded directly from the filesystem (and not a webserver):
<!doctype HTML>
<html ng-app>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<p>I am {{4 + 6}}</p>
<p>{{"Hello" + " you"}}</p>
</body>
</html>
Note that I have changed "ng-app='store'" to "ng-app", so that angular is not trying to load the 'store' module.
This shows that angular, on its own, is doing its thing correctly. So the issue is somewhere within the store module. As suggested in the comments, check your browser console for error messages, and troubleshoot those.
This is my html file. The angular.js file is under java/main/webapp/js folder and Intellij can see it when I click on it, yet the code does not work! I get a print on screen {{helloMessage}} and not "hello world"
What am I missing here?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular test </title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
Angular test
<script src="js/angular.js"> </script>
<script type="text/javascript">
function HelloWorldCtrl($scope){
$scope.helloMessage="Hello World";
}
</script >
</body>
</html>
You forgot ng-app , put it in the body tag:
<body ng-app>
Have a look at working example.