sails.js i18n config

[clonn]

h3. 一 執行模組設定

路徑 : /assets/linker/ js/ ...
檔案名稱 : app.coffee / server.coffee (前端的Router)

注入 pascalprecht.translate:

  app = angular.module("admgmtApp", ["xxx",...., "pascalprecht.translate"])

設定 :

  app.config ["$translateProvider", ($translateProvider) -> 

    $translateProvider.useStaticFilesLoader { 
      prefix: '/locales/' 
      suffix: '.json' 
    } 

    $translateProvider.preferredLanguage('us') 
  ]

h3. 二 關於josn檔

路徑：/config/locals/xxx.json

• 依據A ~ Z 排序
• 中間用到的縮寫詞:ph = placeholder , desc = Description , lab = label , btn = button , ads = adGroup
• 命名規則

1. global : 用於重複多次或者共用的view上像是layout
   (btn, desc, footer, list(=table), (layout)login. main. profile)
2. 資料夾-檔名-元素-相關值

EX :

"kpi-form-lab-kpiname": "adCreative KPI Name",   
"kpi-form-ph-kpiname": "KPI Name", 
"kpi-form-invalid-kpiname": "Please enter KPI name",

PS. lab = input前的題詞, desc = 其他更長的敘述

1. 資料夾-檔名-相關值
   EX :

"kpi-list-name": "KPI Name",

1. 頁面功能-相關值
   EX :

"signup-password": "Password",

1. 頁面功能-區域性-元素/值, 頁面功能-相關值
   EX :

   "landing-content-header": "AdManagement Dashboard", 
   "landing-content-ad_create": "Create adCampaign",
   

2. • VS _使用上的區別 EX : kpi-list-index_by_time

3. 避免以可能會有變動的方式命名像是(顏色 …)

h3. 三. 頁面使用方式

• view :

  #{__("global-footer-tw")}
  

• assets :

  {{ 'adS-bid-info_price' | translate }}
  

  PS. html裡面也可以使用, 要注意雙引和單引的位置
  EX：

  placeholder = "{{ 'adS-bid-info_price' | translate }}"
  

h3. 四. 資料來源於controllers（可參考附件二）

直接舉例 :
在畫面上的code :

 " {{tabs[0].title}} "

在controller裡面的code :

angular.module("admgmtApp").controller "adSetCtrl", ($scope, .... $translate) -> 

多筆key值用array的方式丟進去會回傳 object

  $translate(["adSet_budget_tab_daily", "adSet_budget_tab_lifetime"]).then (translations) -> 
    $scope.tabs = [ 
      { title: translations.adSet_budget_tab_daily, active: true} 
      { title: translations.adSet_budget_tab_lifetime, active: false} 
    ]

單筆key值用string的方式會回傳對應的string

  $translate("adSet_budget_tab_daily").then (value) -> 
    $scope.tabs = [ 
      { title: value, active: true} 
      { title: value, active: false} 
    ]

bq. p.s. 在controller裡面用的值不能使用hyphen("-")，config/locales/裡的檔案們，相對應的值也要一併作更改。
Ex:

$translate("aaa_bbb")

Ｏ：aaa_bbb
Ｘ：aaa-bbb

---

參考文件 ：
附件一：https://github.com/nodejs-tw/nodejs-book-beginner-guide/blob/master/sailsjs/i18n.md
附件二：http://angular-translate.github.io/docs/#/guide/03_using-translate-service

develop tool : Live Reload
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?utm_source=chrome-ntp-icon