如何使用Angular.js/JavaScript为我的HTML页面支持多语言？_Javascript_Jquery_Angularjs

如何使用Angular.js/JavaScript为我的HTML页面支持多语言？

javascript jquery angularjs

如何使用Angular.js/JavaScript为我的HTML页面支持多语言？,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我需要使用Angular.js/JavaScript动态更改HTML页面中所有文本的语言。这是我的密码： <h2>Clickable Dropdown</h2> <p>Click on the button to open the dropdown menu.</p> <label>Language</label> <select> <option value="">Select langaua

我需要使用Angular.js/JavaScript动态更改HTML页面中所有文本的语言。这是我的密码：

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<label>Language</label>
<select>
   <option value="">Select langauage</option>
  <option value="1">English</option>
  <option value="2">Spanish</option>
</select>
<form>
  First name:<br>
  <input type="text" name="firstname" placeholder="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname" placeholder="lastname">
</form>

可点击下拉列表
单击按钮打开下拉菜单
语言
选择语言
英语
西班牙的
名字：



姓氏：

上面的一个下拉列表用于选择不同的语言。这里我的要求是假设用户选择的语言为

spanish

，那里的所有静态文本将更改为西班牙语，如果用户再次选择

english

，所有数据将重新更改为英语

需要自动翻译-无需手动翻译所有文本。

角度翻译不是你要找的东西吗

这是一个完整的演示

除了上面的答案，您还可以这样做：

通常，国际化涉及抽象出静态字符串，并以所选语言动态呈现它们

您可以将映射放在JSON文件中，然后根据语言选择加载它。在下面的示例中，我使用了一个自定义服务

localeseservice

，它根据视图中的选择注入对象

app.service('localeService',['$injector',function($injector){

    return {
    getLocale : function(locale){
        return $injector.get(locale);
    }
  }
}]);

此服务返回我在模块中定义为

常量的对象。对象包含不同语言的映射：
app.constant('english',{
    "greeting":"hello",
    "dropDownHeader":"Clickable Dropdown",
     "clickDesc" : "Click on the button to open the dropdown menu."
 });
app.constant('spanish',{
    "greeting":"ola",
     "dropDownHeader":"desplegable se puede hacer clic",
"clickDesc" : "Haga clic en el botón para abrir el menú desplegable."
 });

最后，我以以下方式使用了控制器中返回的对象：
app.controller('mainCtrl',['localeService','$scope',function(localeService,$scope){

  $scope.lang = {};
  $scope.lang.locale = 'english';
  //$scope.template = localService.getLocale();
  $scope.$watch(function(scope){
    return scope.lang.locale;
  },function(newVal,oldVal){
        $scope.template = localeService.getLocale($scope.lang.locale);
  });
}]);

以下是观点：
<body ng-app="test" >

<div ng-controller="mainCtrl">
<h2>{{template.dropDownHeader}}</h2>
<p>{{template.clickDesc}}</p>
<label>Language</label>
<select ng-model="lang.locale">
   <option value="">Select langauage</option>
  <option value="english">English</option>
  <option value="spanish">Spanish</option>
</select>

  <p>{{template.greeting}}</p>
 </div>
 </body>


{{template.dropDownHeader}
{{template.clickDesc}
语言
选择语言
英语
西班牙的
{{template.greeting}}

：
bro这不是一个自动的解决方案，你是对的。我错过了其中一个答案下面的评论。但角度平移可用于替换平移值bro。我会更新问题，使其更清楚。他需要一个自动翻译解决方案，他不想为特定语言编写文本。在这里，我还需要更改所有静态内容，如可点击下拉列表，单击按钮打开下拉菜单。
@ManishKumarSingh:是的。我需要自动模拟解决方案。只需在注入的对象中添加更多字符串，即可更改静态内容。将修改答案，以向您显示它应该如何自动生成。