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?
Related
I am following a tutorial and I am trying to create an svg element using d3. however when I run it and inspect the page on chrome, the svg element isnt showing up in the body. I'm sure that the .html file is referencing the correct js file, but I cant figure out why the element isn't appending
this is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="/text/javascript" src="d3.v3.min.js">
</script>
</head>
<body>
<script type="/text/javascript" src="shapes.js"></script>
</body>
</html>
and this is my js code
var dataArray = [2,13,15];
d3.select("body").append("svg");
It's your type attributes on your script tags:
/text/javascript
is not valid, it's:
<script type="text/javascript" src="shapes.js"></script>
With no leading slash...
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'm working with libgdx 1.9.2 and gwt 2.6.1.
After the GWT-compilation of my java app, I get a JS script (html.nocache.js) that I can include in my html page, and visualisate in a web browser (inside a div, here it's "embed-html"). That part is working nicely.
Here's the code:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="html/html.nocache.js"></script>
</head>
<body>
<div id="embed-html"></div>
</body>
</html>
My next goal is to use web components, and more precisely custom elements, to have a simple tag <my-app></my-app> in any web page to get my application.
my index.html:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="webcomponents.js/webcomponents.js"></script>
<link rel="import" href="component.html">
</head>
<body>
<my-app></my-app>
</body>
</html>
my component.html:
<template id="template">
<div id="embed-html"></div>
<link href="styles.css" rel="stylesheet" type="text/css">
</template>
<script>
var helloDoc = document._currentScript.ownerDocument;
var myApp = document.registerElement('my-app', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = helloDoc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>
<script type="text/javascript" src="html/html.nocache.js"></script>
But the JS script generated by GWT-compilation has some document.write(...) inside; so all that is included is my empty div, my style sheet correctly loaded, and warnings: "Warning: A call to document.write() from an asynchronously-loaded external script was ignored". Since it is generated, I don't think I can avoid using these document.write().
If I put the <script type="text/javascript" src="html/html.nocache.js"></script> in the head of index.html (where it was before I tried using webcomponents), the app is not added inside the div, as it should, but under (the div and style sheet are included as expected).
And if I put the script inside the template, nothing happens.
So I am wondering if there is a way to have a GWT application working with web components, or if I should search for another way to easily include my application into external websites.
(If you wonder the reasons why I want to do so, it's because I want clients to be able to add my app easily on their own website, with only an import and a tag, the same way I could import a YouTube video or a Google map.)
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.
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?
<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.com/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.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>