Angular translate Demo

Basic of angular translate.

by Rishi Kumar

HTML

<script src="https://code.angularjs.org/1.2.6/angular.min.js"></script>
<script src="https://rawgit.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <h1>{{ 'WEEK_DAYS' | translate }}</h1>
        
        <div>
            <button ng-click="changeLanguage('fr')">fr</button>
            <button ng-click="changeLanguage('en')">en</button>
        </div>
        
        <label for="my-input">{{ 'SEARCH' | translate }}</label>
        <input type="text" ng-model="search.key" />
        
        <ul>
            <li ng-repeat="day in days | filter:search">
                {{ day.key | translate }}
            </li>    
        </ul>
    </div>
</div>

JavaScript

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

myApp.config(function($translateProvider) {
    $translateProvider.preferredLanguage('fr');
    $translateProvider.translations('en', {
        WEEK_DAYS: 'Week days',
        SEARCH: 'Search a day',
        MONDAY: 'Monday',
        TUESDAY: 'Tuesday',
        WEDNESDAY: 'Wednesday',
        THURSDAY: 'Thursday',
        FRIDAY: 'Friday',
        SATURDAY: 'Saturday',
        SUNDAY: 'Sunday'
    });
    $translateProvider.translations('fr', {
        WEEK_DAYS: 'Jours de la semaine',
        SEARCH: 'Chercher un jour',
        MONDAY: 'Lundi',
        TUESDAY: 'Mardi',
        WEDNESDAY: 'Mercredi',
        THURSDAY: 'Jeudi',
        FRIDAY: 'Vendredi',
        SATURDAY: 'Samedi',
        SUNDAY: 'Dimanche'
    });
});

myApp.constant('weekDays', [
    {id: 1, key: 'MONDAY'},
    {id: 2, key: 'TUESDAY'},
    {id: 3, key: 'WEDNESDAY'},
    {id: 4, key: 'THURSDAY'},
    {id: 5, key: 'FRIDAY'},
    {id: 6, key: 'SATURDAY'},
    {id: 7, key: 'SUNDAY'}
]);

myApp.controller('MyCtrl', function($scope, $translate, weekDays) {
    $scope.changeLanguage = function(key) {
        $translate.use(key)   
    }
    
    $scope.days = weekDays;
});