AngularJS Failed to Load Resourse - javascript

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

Related

Angular Leaflet Directive simple map example

I'm trying to get the basic map to show on my page and all I get is a blank page.
This is my html:
<!DOCTYPE html>
<html ng-app="example">
<head>
<meta charset="utf-8">
<title>example</title>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-leaflet-directive.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/frontend.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="SimpleMapController">
hello there
<leaflet></leaflet>
</body>
</html>
My javascript code:
var app = angular.module('example', ['leaflet-directive']);
app.controller("SimpleMapController", [ '$scope', function($scope) {
angular.extend($scope, {
defaults: {
scrollWheelZoom: false
}
});
}]);
This is pretty much exactly as it is explained in the (poorly explained) example. Yet, instead of a map (like in their example), I have a blank screen. On the dev console of the browser I get the following error as well:
GET file://b.tile.openstreetmap.org/1/0/1.png net::ERR_FILE_NOT_FOUND
It looks like it's looking for the map pngs on my end when it should be getting them from leaflet. Am I missing something in my html or the js?

Why is this easier-than-hello-world angularjs application not working?

I'm following a pluralsight tutorial to learn angularjs, and I'm already stuck on the first video.
The tutorial uses plunker, here is the link to my code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 843 / 42 }}
</body>
</html>
I followed the instructions, clicked the button to add angularjs to my html doc (i.e. it just adds the link in the header and the ng-app to the body tag) but it is not working.
In the video, he types {{ 843 / 42 }} and it prints to the page 20.07.... whereas mine is just printing {{ 843 / 42 }}.
I can't start learning about angularjs until I figure out why my code is not working, but I can't figure out why my code is not working until I learn more about angularjs...
I was listening to the same video and I had the same issue. I started by using the latest angular js file.
I then tried to use the same Angular JS file he was using and then it worked fine.
Just wanted to add the whole program for someone's help.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.0" data-semver="1.3.0"
src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
{{ 8/4 }}
</body>
</html>

Angular - Uncaught Error: [$injector:modulerr]

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.

AngularJS: "Hello Word" not working

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.

Why i am getting 404 error on js included in html?

I am building a webapp using Maven, Spring 4, Angularjs and Thymeleaf. I create some Thymeleaf template ( in directoty templates/fragments ). I have attached a screenshot of my eclipse web project.
The problem i am facing is about referencing libraries and css file, i am getting 404 not found on firebug.
HTML (index.html)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" href="/js/lib/angular.js" th:src="#{/js/lib/angular.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/ui-bootstrap-tpls-0.11.0.js}"></script>
<title>Jobly - login page</title>
</head>
<body>
<div th:include="templates/fragments/header::header"></div>
<h1>Hello on a second page!</h1>
<p>Click <a th:href="#{/hello}">here</a> to go back.</p>
<div th:include="templates/fragments/footer::footer"></div>
</body>
</html>
Here is the snippet code of header template :
<link th:href="#{/css/bootstrap.min.css}" rel="stylesheet" media="screen"/>
<script type="text/javascript" th:src="#{/js/lib/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/bootstrap.min.js}"></script>
Below the screenshot of 404 error
I've resolved my problem. It was a problem of specifing resources location and mapping in Spring configuration file. I add in app-servlet.xml
<mvc:resources mapping="/**" location="/"/>

Categories