I'm working in Eclipse with a Dynamic Web Project and I have some problems with accent marks. Using AngularJS, in the main html page accent marks and 'ñ' are shown but there I have a ng-view and when display in Chrome doesn't show accent marks there!
My index.html:
<!DOCTYPE html>
<html lang="es" ng-app="agriweaapp">
<head>
<meta charset="UTF-8">
<title>AgroWea</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-controller="mainAppController as vm">
<p>Works here: á ñ</p>
<div class="container" ng-view></div>
<!-- Modules -->
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
My main.html that goes in ng-view:
<div class="jumbotron">
<h1>Ahorra con AgriWea</h1>
<p>Gracias a nuestro sistema de recomendación de riego podrás ahorrar con más eficiencia. Esto es posible a nuestro sistema basado en predicciones meteorológicas y ¡los datos de tus cultivos!</p>
</div>
My app.js:
angular.module('agriweaapp', ["ngRoute"])
.config(function($routeProvider) {
$routeProvider
.when("/", {
controller: "mainAppController",
controllerAs: "vm",
templateUrl: "pages/main.html",
resolve: {
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 100);
return delay.promise;
}
}
});
})
.controller("mainAppController", function() {
var vm = this;
})
My html files preferences:
Result:
I tried the same code in my workspace. Utf Encoding does not inherit to templates in ng-view. I fixed the issue using below code in ng-view templates (main.html in your case)
<head>
<meta charset="utf-8">
<head>
Then it works perfectly fine.
Cheers
