AngularJS encoding german umlauts

1
votes

i've embedded my angular application inside a sharepoint content editor webpart. the app is not in the same directory as the sharepoint site. it's hosted on a separate webserver. the sharepoint site contains the necessary meta tags

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

i also reference my script as follows:

<script type="text/javascript" charset="utf-8" src='http://server/app.js'></script>

angular index.html doesn't have a head and body tag because it's just embedded inside the other page (although i tested it with extra head (+meta) and body tag - did't work).

if i write some plain text ('Äpfel sind großartig') inside my index.html it is displayed correctly. if i put a span inside index.html like that:

<span>{{myText}}</span>

and set 'myText' inside my controller

$scope.myText = 'Äpfel sind großartig'

i just get weird text (german characters messed up). even the console text 

console.log('Äpfel...')

is messed up.

i'm also using kendo ui controls like their grid. german column names (like 'Geändert am') are messed up there, too.

do you have any idea how to fix that?

thank you very much!!

1
javascripthtmlangularjssharepointencoding

1 Answers

2
votes

i had to set the encoding of the javascript and html files to utf-8 in visual studio.

i figured that out by reducing the code in my existing files to a minimal angularjs application and comparing that to newly created files running the exact same code. the newly created files displayed the characters correctly, whereas the old files with the same code inside did not. so it had to be something wrong with the files itself. changing the file encoding with visual studio worked like this:

  • open the file in Visual Studio
  • FILE > “Advanced Save Options...“
  • Encoding > “Unicode (UTF-8 with signature) - Codepage 65001“
  • OK