Friday, August 25, 2017

Angular 1: Tạo App Hoàn Chỉnh P3 - Đa Ngôn Ngữ

phần 2 ta đã xong về cách dùng Route và tạo các trang tương ứng từng Route, nay ta đi tiếp với đa ngôn ngữ dùng trong angular 1.

1. Thư Viện Cần Thiết
Trong bower.js ta thêm hai dependencies sau "angular-sanitize": "1.5.5" và "angular-translate": "2.15.2" sau đó ta dùng lệnh bower install để tải hai thằng này về
{
 ...
 "dependencies": {
     "angular": "1.5.5",
     "bootstrap": "3.2.0",
     "angular-route": "1.5.5",
     "angular-sanitize": "1.5.5",
     "angular-translate": "2.15.2"
 }
}

- Ta import nó vào trang index.html để dùng
...
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
...
- Sau đó ta import module app của ta
var app = angular.module("App",[
 ...
 "pascalprecht.translate", // angular-translate
 "ngSanitize", // angular-sanitize
 ...
 ])
2. Cấu hình cho $translateProvider
Để có thê dùng được cho html ta phải câu hình cho ứng dụng hiểu như sau
app.config(['$translateProvider', function ($translateProvider) {
 $translateProvider.translations('vi', {
  'SAN_PHAM_LIST_TITLE': 'Danh Sách Sản Phẩm',
  'SAN_PHAM_LIST_FOUND': 'Tìm Thấy {{number}} Sản Phẩm',
  'SAN_PHAM_LIST_DESCRIPTION' : '<strong>Dữ liệu im đậm</strong>',
  'SAN_PHAM_LIST_DESCRIPTION_PARAM' : '<strong>Dữ liệu im đậm còn param thì giữ nguyên format {{html}}</strong>',
 });

 $translateProvider.translations('en', {
  'SAN_PHAM_LIST_TITLE': 'List Product',
  'SAN_PHAM_LIST_FOUND': 'Found {{number}} products'
 });
 // Enable escaping param of HTML
 $translateProvider.useSanitizeValueStrategy('escapeParameters');
 // VI is default language 
 $translateProvider.preferredLanguage('vi');
}])
Ở đây ta đăng ký hai ngôn ngữ tiếng anh và tiếng việt, và chọn tiếng việt làm ngôn ngữ mặc định.

3. Dùng Trong Template
Ở những bài trước ta có trang view san-pham-list.html ta sẽ thêm ngôn ngữ cho trang này như sau.
<div class="san-pham-list-com">
 <strong ng-bind="'SAN_PHAM_LIST_TITLE' | translate"></strong>
 <div ng-bind="'SAN_PHAM_LIST_FOUND' | translate: {'number': 35}"></div>
 <div ng-bind="'SAN_PHAM_LIST_DESCRIPTION' | translate"></div>
 <div ng-bind-html="'SAN_PHAM_LIST_DESCRIPTION' | translate"></div>
 <div ng-bind-html="'SAN_PHAM_LIST_DESCRIPTION_PARAM' | translate : {'html': '<br/>'}"></div>
</div>
Khi ta được kết quả như hình bên dưới

Ghi chú:
Ta có một rule cơ bản là tất cả các translate của mình thì do mình tạo nên mình muốn nó có hiển thị đúng format, còn khi có include param vào thì param của người dùng nhập hoàn toàn không an toàn nên mình sẽ escape nó hoàn toàn và hiển thị đúng nguyên mẫu, ở trên là the <br/>

4. Chuyển Ngôn Ngữ Qua Lại
Để chuyển qua dùng ngôn ngữ khác ta dùng api sau.
$translate.use(lang); // lang: vi, en, de
Bên dưới là cách dùng để chuyển ngôn ngữ khi có thêm param lang trên url url?lang=vi or url?lang=en
app.run(["$rootScope", "$translate", "$location", function($rootScope, $translate, $location) {
    $rootScope.$on('$routeChangeStart', function (event, next) {
     // find param lang in url
     var param = $location.search();
     if(param.lang != undefined) {
      var lang = "vi";
      if(["vi","en"].indexOf(param.lang) != -1) {
       lang = param.lang;
      }
      $translate.use(lang);
     }
    });
}])
Khi mà url bắt đầu thay đổi ta get param lang trong url và kiểm tra xem giá trị của param có hợp lệ không nếu có ta áp dụng ngôn ngữ mới.

5. Cách Lưu Ngon Ngữ Đã Chọn
Ta thêm một số dependencies cần thiết vào bower.json, "angular-cookies": "1.5.5""angular-translate-storage-local": "2.15.2" ta chạy lệnh bower install lần nữa để tải các thư viện về sau đó ta import thêm vào trang index.html
...
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>
...
Tiếp Ta import vào app module ngCookies
var app = angular.module("App",[
  ...
  "ngCookies", // angular-storage,
  ...
  ])
Ta add thêm dòng $translateProvider.useLocalStorage(); vào trong $translateProvider như sau
app.config(['$translateProvider', function ($translateProvider) {
  ...
  $translateProvider.useLocalStorage();
 }])
Khi ta chuyển sang ngôn ngữ khác thì chúng ta sẽ được kết quả như sau

6. Tải File Đa Ngôn Ngữ Từ Static File
Trong thực tế người ta thường không để tất cả ngôn ngữ trong config $translateProvider mà tách ra thành từng file json chứa các ngôn ngữ.
Đầu tiên ta phải import thêm dependencies "angular-translate-loader-static-files": "2.15.2" ta run bower install để tải về vào import vào trong index.html ta được cuối cùng file như sau
...
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
...
Sau đó trong config của $translateProvider ta thay thế các $translateProvider.translations của tiếng vi, en thành đường dẫn tới file json của ta
app.config(['$translateProvider', function ($translateProvider) {
 $translateProvider.useStaticFilesLoader({
  prefix:"app/asserts/languages/",
  suffix:".json"
 })
 // Enable escaping param of HTML
  $translateProvider.useSanitizeValueStrategy('escapeParameters');
 $translateProvider.preferredLanguage('vi');
 $translateProvider.useLocalStorage();
}])
Tiếp đến là ta thêm các file vi.json, en.json trong thư mục angular1/app/asserts/languages với nội dung
vi.json
{
 "SAN_PHAM_LIST_TITLE": "Danh Sách Sản Phẩm",
 "SAN_PHAM_LIST_FOUND": "Tìm Thấy {{number}} Sản Phẩm",
 "SAN_PHAM_LIST_DESCRIPTION" : "<strong>Dữ liệu im đậm</strong>",
 "SAN_PHAM_LIST_DESCRIPTION_PARAM" : "<strong>Dữ liệu im đậm còn param thì {{html}} giữ nguyên format</strong>"
}
en.json
{
 "SAN_PHAM_LIST_TITLE": "List Product",
 "SAN_PHAM_LIST_FOUND": "Found {{number}} products",
 "SAN_PHAM_LIST_DESCRIPTION" : "<strong>Text bold</strong>",
 "SAN_PHAM_LIST_DESCRIPTION_PARAM" : "<strong>Text bold except param {{html}} format</strong>"
}
Khi ta chạy lại ứng dụng mọi thứ sẽ vẫn như trước,

7. Tổng Kết
Vạy là ta đã xong cách dùng đa ngôn ngữ trong angular1, lưu ngôn ngữ đã chọn, escapse một số tứ ký từ người dùng.

8. Source Code
https://drive.google.com/open?id=0B-JvPy4-xKqkN0R4WllKWUdLdjQ

No comments:

Post a Comment