Angular template view with utf-8 chars doesn't work - angularjs

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.

Related

Lightbox2 data uri's cut off on Edge/IE

I'm using lightbox2 to display a data uri on Edge/IE11. Tiny images work fine while larger images(Not huge) get cut off at some point. Edge/IE don't have full support for data URI's but, if you use the debugger to cut paste the data uri from the href to the img tag the image will display fine. For some reason in moving the data from the href to the img tag it is cut off.
<html>
<head>
<link rel="stylesheet" href="/path/to/lightbox.css">
<script src="libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="/path/to/lightbox.js"></script>
</head>
<body>
Image #1
</body>
</html>
http://jsfiddle.net/knc6j2o7/7/

Angularjs and Bootstrap

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 :)

Broken iron-flex-layout dependency

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)

Displaying Unicode in the WPF Webbrowser Control

I am trying to display unicode characters in an html string in the WPF WebBrowser control and it doesn't appear to be working. I am using the following html:
<html>
<head>
<title/>
</head>
<body>
<div>Łuk zwykły</div>
</body>
</html>
I have set the IE Emulation to IE 11 (11000) and set the default characterset:
DirectCast(CurrentWebBrowser.Document, IHTMLDocument2).defaultCharset = "UTF-8"
The file is in UTF-8 yet this is what is displaying:
Åuk zwykÅ‚y
You can specify the encoding in the HTML
<head>
<meta charset="UTF-8">
</head>

Google Earth Plugin using Google.Load()

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>

Resources