How to use translate in angularjs?

Question

Hi I am new to angularjs world. I am doing registration page and my app contains English and Arabic pages. I am storing English and Arabic words in JSON files. This is my index.html file.

<body ng-app="RoslpApp">
    <div ng-controller="RoslpAppController">
        <div class="popup">
            <label>Language</label>
            <select ng-model="selectedItem">
                <option>العربية</option>
                <option>English</option>
            </select>
            <button ng-click="clickHandler(selectedItem)">Submit</button>
            <ul id="nav">
            <li><a ui-sref="Registration">Registration</a></li>
            </ul>
            <div class="container">
            <div ui-view></div>
        </div>
        </div>
    </div>
</body>

This is my main.js file.

var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
    $stateProvider
           .state('Registration', {
               url: '/Registration',
               templateUrl: 'Registration/Registration.html'
           });
    $translatePartialLoaderProvider.addPart('Registration');
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: "/scripts/Locales/{part}/{lang}.json"
    });
    $translateProvider.preferredLanguage('de_EN');
});
app.run(function ($rootScope, $translate) {
    $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
        $translate.refresh();
    });
});
app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate) {
    $scope.clickHandler = function (key) {
        $translate.use(key);
    };
}]);

This is my registrationcontroller.

(function () {
    angular.module('RoslpApp').controller('RegistrationController', ['$rootScope', '$translatePartialLoader', '$translate', function ($rootScope, $translatePartialLoader, $translate) {
        $translatePartialLoader.addPart('Registration');
        var isPartAvailable = $translatePartialLoader.isPartAvailable('Registration');
        if (isPartAvailable) {
            $translate('Fname').then(function (data) {
                $rootScope.PageSubTitle = data;
                console.log($rootScope.PageSubTitle);
            });
        }
    }]);
})();

This is my Registration.html. I am posting only one field to save space.

<label>First Name</label>
                    <input type="text" id="FirstName" class="FirstName" translate="yes" >

This is my de_EN.json file.

{
    "Fname":"Fnamein English"
}

I have arabic file also. I am not able to translate Fname in the above code. May I get some help here to fix this. Any help would be appreciated. Thank you.

if you change this <input type="text" id="FirstName" class="FirstName" translate="yes" > into <input type="text" id="FirstName" class="FirstName" translate value="Fname"> would this help ? — Fadi Abo Msalam
– Fadi Abo Msalam, Commented Apr 5, 2017 at 6:36
can you upload simple code on jsfiddle i believe it is simple error that you have i might be able to debug it — Fadi Abo Msalam
– Fadi Abo Msalam, Commented Apr 5, 2017 at 7:41
Thank you. I created Plunker. Please find the below link. plnkr.co/edit/m57BI5pivGzXD9UtwVtm?p=preview — Niranjan Godbole
– Niranjan Godbole, Commented Apr 5, 2017 at 8:09
When i copy all code ui-routing not working now. Whenever i click on Registration tab corresponding Registration.html file in ng-view. Please help me on this. — Niranjan Godbole
– Niranjan Godbole, Commented Apr 5, 2017 at 8:12

Fadi Abo Msalam · Accepted Answer · 2017-04-05 09:18:30Z

2

 after debuging the plnkr i fount the solution 

app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
    $stateProvider
           .state('Registration', {
               url: '/Registration',
               templateUrl: 'Registration.html',
               controller: 'RegistrationController'
           });
    $translatePartialLoaderProvider.addPart('Registration');
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: "{lang}.json"
    }); 
    $translateProvider.preferredLanguage('de_AR');


});
// app.run(function ($rootScope, $translate) {
//     $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
//         $translate.refresh();
//     });
// });

------------------
    i also edited index.html head part


      <title>Raya Financing</title>
        <link href="style.css" rel="stylesheet" />
        <link href="menu.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
       crossorigin="anonymous"></script>
      <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>
           <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>

        <script src="angular-translate-loader-partial.min.js"></script>
        <script src="Main.js"></script>
         <script src="custom.js"></script>
        <script src="menu.js"></script>
        <script src="RegistrationController.js"></script>



        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

edited Apr 5, 2017 at 9:18

answered Apr 5, 2017 at 9:00

Fadi Abo Msalam

7,2952 gold badges24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Niranjan Godbole Over a year ago

Thank you. It is not working. I made above changes. I am concerned about RegistrationController and Registration.html

Fadi Abo Msalam Over a year ago

just change the head inside index.html as code above and in Main.js as above it will work it is working fin on my plnkr

Niranjan Godbole Over a year ago

I changed but it is not working. May i have link of your Plunker?

Niranjan Godbole Over a year ago

<h1>{{ 'Fname' | translate }}</h1> This is correct right?

Fadi Abo Msalam Over a year ago

also in your input should be like this <input type="text" id="FirstName" class="FirstName" value="{{'Fname'| translate}}">

|

Collectives™ on Stack Overflow

How to use translate in angularjs?

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related