There is probably a simple answer to my question although any help will be appreciated.
I use ExtJs with my GE plugin. To get the plugin working I need to include the following in my main HTML page.
<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDS</title>
<script src="https://www.google.com/jsapi" id="GoogleEarth"></script>
<script src="/static/googleearth/Ext.ux.GEarthPanel-1.3.js" id="GoogleEarth"> </script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
</script>
</head>
<body></body>
</html>
Now when I want to remove the following code and try to run it as javascript alone the page seems to keep on loading.
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
</script>
Even if I remove the code and paste it inside it's own .js file the problem persist.
For example use
<script type="text/javascript" src="/static/GoogleEarthStartup.js" id="Test"></script>
with content like
google.load("earth", "1");
google.load("maps", "2.xx");
It seems to want to stay in the main page with the script tags.
Is there anyway I can get around this problem?
My main reason for asking is I am using a package that overides my main html everytime I save the project.
The package allows me to add scripts via a link as seen above, although it does not make a difference with the outcome.
I get an error saying TypeError: google.earth is undefined
Please advice.
It is probably simply the order of your script elements.
The scripts are executed in the order they are in the document so your error is because something in app.js or Ext.ux.GEarthPanel-1.3.js is referencing google.earth before the file GoogleEarthStartup.js has been executed - hence google.earth is undefined because google.load("earth", "1"); has not yet been called.
Try fix try simply reordering the script elements like so...
<script type="text/javascript" src="//www.google.com/jsapi" id="GoogleEarth"></script>
<script type="text/javascript" src="/static/GoogleEarthStartup.js" id="Test"></script>
<script type="text/javascript" src="/static/googleearth/Ext.ux.GEarthPanel-1.3.js" id="GoogleEarth"></script>
<script type="text/javascript" src="app.js"></script>
Related
I try to use "ngroute" to load html templates.
Everything works fine, but when I try to show words in Hebrew in the "ng-view", I get only question marks instead of the Hebrew chars (???????????).
in the <head> tag I added <meta charset="utf-8">
and if the Hebrew is static in the page it works fine.
but when I use "ngroute" to load it it doesn't.
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<title></title>
<!-- end: Meta -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- end: CSS --></head>
Any idea? Is there anything I should add to the html view page?
I added the <meta meta charset=utf-8> tag to the all the templates html and not just to the <head> and it fixed the problem.
I've solved by resaving the html template file with utf-8 encoding. In Visual Studio, Save As > Save with Encoding... button.
I ran into this issue as well for Danish characters and symbols.
I was missing the charset = utf-8 in /.editorconfig under the angular project!
So it defaulted to Windows-1251.
This worked for all new files and when resaving old ones with wrong encoding.
on my html header i have this two lines:
<html>
<head>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
but if i have this two lines at the same time, bootstrap doesn't work. If i comment the line of the angularjs and leave the line for bootstrap alone, bootstrap will process correctly and format the elements on the page.
i have already tried change the order on headers and add diferent links to download the files, but nothing have worked.
Anyone knows a solution for both to work at the same time?
Thanks
You get the followed error in your console:
Uncaught Error: Bootstrap's JavaScript requires jQuery
So just do it as follow, and you get no errors:
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
This must work :)
I have a simplistic page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
</head>
<body class="fullbleed vertical layout" unresolved>
<div>Alpha</div>
<div class="flex">Beta (flex)</div>
<div>Gamma</div>
</body>
</html>
It is very near from there given samples for iron-flex-layout.
But it renders an empty page.
If I add another import, like iron-image, the page is displayed correctly.
It is served by polyserve, and everything is correctly installed otherwise.
Thanks for your help / explanation.
My bad here.
At this point unresolved body attribute is not defined.
Removing it makes it work as expected.
No clue where this attribute is defined, though (but importing an element such as iron-element, as mentioned above, and its dependencies makes it defined)
I have a folder with several HTML files. Each of the HTML file uses AngularJS and contain the same declaration like below;
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="vendor/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="vendor/underscore-min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
I think this is bad practice as it violates the DRY (don't repeat yourself) principle. I tried to avoid repeating the above declaration by putting them into a html partial called header.html and put this following line <div ng-include src="'partials/header.html'"></div> into every HTML file in the folder.
However, it did not work and the HTML page did not render the AngularJS scope correctly. Is there something wrong with my approach or are there better ways to go about doing this?
AngularJS embrace the Single Page Application concept.
Technically this means you have only 1 HTML file (lets call it index.html) which contain the <head> and <body> tags.
This means that you can put all your included script files once in this index.html file.
By using the ng-route or ui-router modules, you can contain other partial HTML files that will "use" the same script files.
ng-include is an AngularJS defined directive. AngularJS needs to be loaded for it to be parsed correctly.
However, here you have included angular.min.js as part of the header.html partial. When the browser encounters the ng-include, it has no idea what it means, and simply ignores it. So none of the scripts and styles are loaded.
At a minimum, you need to have angular.min.js loaded in the main file. Everything else can then be inside the partial.
<script src="lib/angular/angular.min.js"></script>
...
<div ng-include src="'partials/header.html'"></div>
I am trying to use chinmaymk.github.io angular-charts from https://github.com/chinmaymk/angular-charts.
I have copied code from the plnkr example: http://plnkr.co/edit/T9J7bz?p=preview
<div data-ac-chart="'bar'" data-ac-data="data" data-ac-config="config" class="chart"></div>
However I don't get any bars on the chart. I can see the legend, horizontal and vertical axis, just no bars.
The data is set up in the controller.
My index.html file has the following imports:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
<script src="~/App/Vendor/Scripts/d3/d3.min.js"></script>
<script src="~/App/Vendor/Scripts/angular-charts-0.2.0/dist/angular-charts.min.js"></script>
<script src="~/App/app.js"></script>
There are other imports, however I think these are the relevant ones.
My controller and view follow the example above but still I don't see the actual bars.
I don't get any errors in the console.
Any ideas? I am happy to post more code if it would help...
This was solved by removing a script tag referencing a local date.js file. I could not reproduce the error when using: <script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>.
It might have been a corrupt date.js file on my side...