1

Hola comunidad tengo el siguiente codigo en el cual te traduce el idioma de la pantalla dependiendo del idioma que este es tu en este caso español para mi pero no me sale en si me sale el ingles y me deberia salir por default el español alguien sabe que estoy haciendo mal ?

Mi codigo:

<!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>

Codigo del Script:

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);
	};
});

3 respuestas 3

1

No se si he entendido bien la consulta, pero algo como esto devuelve el lenguaje del navegador:

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

Un ejemplo en plunker: http://plnkr.co/edit/YyxIOkAByibB8pNcVxhJ?p=preview

En caso de querer otro default en forma manual, deberías cambiar esta linea:

$translateProvider.preferredLanguage('en');

Espero que sea lo que estás buscando, en caso de no serlo o tener otra consulta, pregunta todas las veces que necesites.

0

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

Angular-translate no carga el lenguaje por defecto al contrario tu seleccionas manualmente que lenguaje usar como traducción.

En tu caso le indicas que cargue el lenguaje inglés por defect. Con está linea de código.

$translateProvider.preferredLanguage('en');

Para poder cargar el lenguaje que deseas por defecto se me ocurre ya sea solicitando la posición actual o usando el lenguaje del navegador que se está usando.

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

$translateProvider.preferredLanguage(systemLanguage);

Por ejemplo el navigator.language obtiene el lenguaje del navegador. Pero regresa un string con este formato en-US. Solo necesitamos las primeras 2 letras para lograr obtener el lenguaje que usa el navegador; Para eso uso la función substring.

Espero te sirva.

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.