Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Internationalisasi

Hai teman-teman pengembang web yang sedang berkembang! Hari ini, kita akan mengemban perjalanan yang menarik ke dunia internationalisasi dalam AngularJS. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya disini untuk menghidahkan Anda melalui topik yang menarik ini. Jadi, ambil minumannya yang favorit, duduk dengan nyaman, dan mari kita masuk ke dalam!

AngularJS - Internationalization

Apa Itu Internationalisasi?

Sebelum kita mulai mengoding, mari kita pahami apa yang dimaksud dengan internationalisasi. Bayangkan Anda telah membuat website yang fantastis, tapi hanya dalam Bahasa Inggris. Apa bila Anda ingin orang dari negara lain menggunakannya? Itu adalah tempat internationalisasi masuk! Itu seperti memberikan website Anda paspor untuk berkeliling dunia.

Internationalisasi (sering disingkat menjadi i18n - ada 18 huruf antara 'i' dan 'n') adalah proses desain aplikasi Anda sehingga bisa diadaptasi ke berbagai bahasa dan wilayah tanpa perubahan teknik.

Mengapa Internationalisasi Penting?

Pikirkan seperti ini: Jika Anda memiliki toko es krim, Andakah Anda hanya akan menawarkan satu rasa? Tentu saja tidak! Anda akan ingin menyesuaikan berbagai rasa. Hal yang sama berlaku untuk website. Dengan menginternationalisasi aplikasi AngularJS Anda, Anda membuatnya mudah diakses dan ramah bagi pengguna di seluruh dunia. Itu seperti melayani es krim digital dalam setiap rasa!

Sekarang, mari kita lipat lengan dan lihat bagaimana AngularJS membuat internationalisasi mudah.

Menyiapkan AngularJS untuk Internationalisasi

Pertama-tama, kita perlu menyiapkan aplikasi AngularJS kita untuk menghandle internationalisasi. Kita akan menggunakan pustaka angular-translate, yang seperti tongkat ajaib untuk menerjemahkan aplikasi kita.

Berikut cara kita mensetupnya:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>
</head>
<body>
<div ng-controller="TranslateController">
<!-- Konten aplikasi kita akan berada di sini -->
</div>
<script src="app.js"></script>
</body>
</html>

Dalam file app.js kita, kita akan mensetup modul AngularJS kita dan mengkonfigur provider translate:

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

app.config(['$translateProvider', function ($translateProvider) {
// Konfigurasi akan berada di sini
}]);

app.controller('TranslateController', function($scope, $translate) {
// Logika kontroler akan berada di sini
});

Contoh Menggunakan Lokal Bahasa Denmark

Sekarang, mari kita buat contoh sederhana di mana kita akan menerjemahkan aplikasi kita ke Denmark. Mengapa Denmark, Anda bertanya? Well, mengapa tidak! Selain itu, saya pernah memiliki murid yang gila dengan kue Denmark, jadi ini untukmu, Lars!

Mari kita perbarui app.js kita:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.preferredLanguage('en');
}]);

app.controller('TranslateController', function($scope, $translate) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});

Apa yang terjadi di sini:

  1. Kita mendefinisikan terjemahan untuk Bahasa Inggris ('en') dan Denmark ('da').
  2. Kita mengatur Bahasa Inggris sebagai bahasa yang diinginkan.
  3. Kita membuat fungsi changeLanguage di kontroler kita untuk beralih bahasa.

Sekarang, mari kita perbarui HTML kita:

<div ng-controller="TranslateController">
<h2>{{ 'TITLE' | translate }}</h2>
<p>{{ 'FOO' | translate }}</p>
<button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate }}</button>
<button ng-click="changeLanguage('da')">{{ 'BUTTON_LANG_DA' | translate }}</button>
</div>

Output

Ketika Anda menjalankan kode ini, Anda akan melihat:

  • Judul yang mengatakan "Hello"
  • Paragraf yang mengatakan "This is a paragraph."
  • Dua tombol yang diberi label "English" dan "Danish"

Klik tombol "Danish", dan voila! Aplikasi Anda sekarang bisa berbicara dalam Denmark:

  • Judul berubah menjadi "Hej"
  • Paragraf mengatakan "Dette er et afsnit."
  • Tombol sekarang diberi label "Engelsk" dan "Dansk"

Itu seperti magis, bukan? Tetapi ingat, itu bukan magis - itu adalah kekuatan AngularJS dan keterampilan pemrograman Anda!

Contoh Menggunakan Lokal Browser

Sekarang, mari kita tingkatkan. Apa bila kita ingin aplikasi kita secara otomatis menggunakan bahasa browser pengguna? Itu seperti memiliki website yang berbicara dalam bahasa Anda sebelum Anda bahkan meminta!

Mari kita modifikasi app.js kita:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.useLocalStorage();
$translateProvider.fallbackLanguage('en');
$translateProvider.registerAvailableLanguageKeys(['en', 'da'], {
'en*': 'en',
'da*': 'da'
});
$translateProvider.determinePreferredLanguage();
}]);

Apa yang baru di sini?

  1. Kita menggunakan penyimpanan lokal untuk mengingat preferensi bahasa pengguna.
  2. Kita mengatur Bahasa Inggris sebagai bahasa cadangan.
  3. Kita mendaftarkan kunci bahasa yang tersedia.
  4. Kita menggunakan determinePreferredLanguage() untuk secara otomatis mendeteksi bahasa yang diinginkan oleh browser.

Output

Sekarang, ketika pengguna mengunjungi website Anda:

  • Jika bahasa browser mereka diatur ke Denmark, mereka akan melihat versi Denmark.
  • Jika diatur ke bahasa lain, mereka akan melihat versi Bahasa Inggris (cadangan kita).
  • Bahasa yang dipilih akan diingat untuk kunjungan berikutnya.

Itu seperti website Anda adalah kameleon, menyesuaikan diri dengan lingkungan setiap pengguna!

Kesimpulan

Dan begitu juga, teman-teman! Kita telah membuat aplikasi AngularJS kita menjadi ciptaan multibahasa. Ingat, internationalisasi tidak hanya tentang terjemahan - itu tentang menciptakan pengalaman yang ramah bagi pengguna di seluruh dunia.

Buatlah latihan Anda berlanjut, tetap bersemangat, dan siapa tahu? Mungkin suatu hari Anda akan membuat aplikasi yang bisa berbicara lebih banyak bahasa daripada C-3PO! Sampaijumpa lagi, selamat berkoding!

Metode Deskripsi
$translateProvider.translations(langKey, translationTable) Menambahkan tabel terjemahan baru untuk bahasa tertentu
$translateProvider.preferredLanguage(langKey) Mengatur bahasa yang diinginkan
$translateProvider.useLocalStorage() Menggunakan penyimpanan lokal untuk mengingat preferensi bahasa
$translateProvider.fallbackLanguage(langKey) Mengatur bahasa cadangan
$translateProvider.registerAvailableLanguageKeys(keys, aliases) Mendaftarkan kunci bahasa yang tersedia dan aliasnya
$translateProvider.determinePreferredLanguage() Mendeteksi secara otomatis bahasa yang diinginkan oleh browser
$translate.use(langKey) Mengubah bahasa saat ini

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Direktif Khusus
Tutorial Selanjutnya:
AngularJS - Aplikasi ToDo