Home / Questions / 74571
Accepted
simon
Asked: 2020-05-31 16:03:42 +0800 CST 2020-05-31 16:03:42 +0800 CST

Angular Translate Spanish to English?

  • 772

Hello community I have the following code in which the language of the screen translates depending on the language that this is your in this case Spanish for me but it does not come out if English comes out and Spanish should come out by default does anyone know what am I doing wrong?

My code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Lovi acabados</title>
<!-- SCRIPT PARA TRADUCIR LA WEB -->

    <script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="[email protected]" data-semver="2.6.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.6.0/angular-translate.js"></script>
    <script src="script.js"></script>

<!-- -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet"/>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<script type="text/javascript">
  
  $('.tap-target').tapTarget('open');
  $('.tap-target').tapTarget('close');
</script>
<style type="text/css">
 
body{
   font-size:20px;
   text-align:justify;
   margin:0;
   padding:0;
}
.nav-wrapper{
  background:#ff7334;
}

.nav-content{
  background:#0D0D0D;
}

.page-footer{
  height:505px;
    background:#000000;

}

.contactoinfo{
  color:#F2F2F2;
}
.tarjetas{
  color:#fff;
}

/*MENU*/


</style>
  <body ng-app="theApp" ng-controller="HomeCtrl as ctrl">

<nav class="default" role="navigation">
    <div class="nav-wrapper">
                  <a href="#" class="brand-logo center">Lovi Acabados</a>

      <a href="#" data-activates="mobile-demo" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
      <ul class="side-nav">
          <li><a  href="producto1.html">Adoquin</a></li>
      <li><a  href="producto2.html">Azulejo</a></li>
        <li><a  href="producto3.html">Barro</a></li>
        <li><a  href="producto4.html">Block</a></li>
        <li><a  href="producto5.html">Cantera</a></li>
        <li><a  href="producto6.html">Esculturas reducidas</a></li>
        <li><a  href="producto7.html">Fuentes</a></li>
        <li><a  href="producto8.html">Granito</a></li>
        <li><a  href="producto9.html">Iluminación</a></li>
        <li><a href="producto10.html">Jacuzzi</a></li>
        <li><a  href="producto11.html">Ladrillo refractario</a></li>
        <li><a  href="producto12.html">Mármol</a></li>
        <li><a  href="producto13.html">Piedras decorativas</a></li>
        <li><a  href="producto15.html">Piso</a></li>
        <li><a  href="producto17.html">Sanitarios</a></li>
        <li><a  href="producto16.html">Tejas</a></li>      </ul>

        
      <ul class="side-nav" id="mobile-demo">
                  <li><a  href="producto1.html">Adoquin</a></li>

      <li><a  href="producto2.html">Azulejo</a></li>
        <li><a  href="producto3.html">Barro</a></li>
        <li><a  href="producto4.html">Block</a></li>
        <li><a  href="producto5.html">Cantera</a></li>
        <li><a  href="producto6.html">Esculturas reducidas</a></li>
        <li><a  href="producto7.html">Fuentes</a></li>
        <li><a  href="producto8.html">Granito</a></li>
        <li><a  href="producto9.html">Iluminación</a></li>
        <li><a href="producto10.html">Jacuzzi</a></li>
        <li><a  href="producto11.html">Ladrillo refractario</a></li>
        <li><a  href="producto12.html">Mármol</a></li>
        <li><a  href="producto13.html">Piedras decorativas</a></li>
        <li><a  href="producto15.html">Piso</a></li>
        <li><a  href="producto17.html">Sanitarios</a></li>
        <li><a  href="producto16.html">Tejas</a></li>      </ul>
      </ul>
    </div>
  </nav>

  <div id="test1" class="col s12">

 <div class="slider">
    <ul class="slides">
      <li>
        <img id="active" src="img/inicio.jpg"> <!-- random image -->
        <div class="caption center-align">
          <h3>Lovi Acabados</h3>
          <h5 class="light grey-text text-lighten-3">{{ 'MESSAGE' | translate }}</h5>
        </div>
      </li>
      <li>

Script code:

var app = angular.module('theApp', ['pascalprecht.translate']);

app.config(function($translateProvider) {
	$translateProvider.translations('en', {
		//TITLE: 'Welcome!',
		MESSAGE: 'Welcome to lovi Acabados',
		en: 'English',
		es: 'español'
	})
	.translations('es', {
		//TITLE: 'Bienvenidos a la seccion en español!',
		MESSAGE: 'Bienvenidos a Lovi acabados',
		en: 'English',
		es: 'español'
	});

	$translateProvider.preferredLanguage('en');
});

app.controller('HomeCtrl', function($translate) {
  var ctrl = this;
  
  ctrl.language = 'en';
  
	ctrl.languages = ['en', 'es'];

	ctrl.updateLanguage = function() {
		$translate.use(ctrl.language);
	};
});

angularjs

3 Answers

  1. Best Answer

    I don't know if I have understood the query correctly, but something like this returns the language of the browser:

    $translateProvider.determinePreferredLanguage(function () {
 return (navigator.language || navigator.userLanguage).split('-')[0];
});

    An example in plunker: http://plnkr.co/edit/YyxIOkAByibB8pNcVxhJ?p=preview

    In case you want another default manually, you should change this line:

    $translateProvider.preferredLanguage('en');

    I hope it is what you are looking for, if it is not or if you have another query, ask as many times as you need.

    • 1 

  2. var app = angular.module("myApp",['pascalprecht.translate']);

app.config(["$translateProvider",function($translateProvider){
  
  var en_translations = {
    "language" : "Selected Language English",
    "greeting" : "Welcome Dinesh" ,
    "otrotexto" : "I'm gilberto"
  }
  
  var sp_translations = {
    "language" : "Selected Language Spanish",
    "greeting" : "Bienvenida Dinesh"  ,
    "otrotexto" : "Yo soy gilberto"
  }
  
  $translateProvider.translations('en',en_translations);
  
  $translateProvider.translations('sp',sp_translations);
  
  $translateProvider.preferredLanguage('en');
  
}]);

app.controller("translateController" ,["$scope","$translate",function($scope,$translate){
  $scope.changeLanguage = function(lang){
   $translate.use(lang); 
  }
}]);
    <!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="[email protected]" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
    <script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="translateController">
    
      <div>
        <button ng-click="changeLanguage('en')">English</button>
        <button ng-click="changeLanguage('sp')">Spanish</button>
      </div>
      
      <h2>{{'language' | translate}}</h2>
      
      Hello!!!
      
      <p>{{'greeting' | translate}}</p>
      
      <p>{{'otrotexto' | translate }}</p>
    </div>
  </body>

</html>

    • 0

  3. Angular-translate does not load the default language, instead you manually select which language to use as translation.

    In your case, you tell it to load the English language by default. With this line of code.

    $translateProvider.preferredLanguage('en');

    In order to load the language you want by default, I can think of either requesting the current position or using the language of the browser that is being used.

    var systemLanguage = String(navigator.language).substring(0,2);

$translateProvider.preferredLanguage(systemLanguage);

    For example the navigator.language gets the language of the browser. But it returns a string with this format en-US. We only need the first 2 letters to get the language used by the browser; For that I use the substring function.

    I hope it helps you.

    Greetings.

    • 0