TMDer / warehouse

code warehouse
http://tmder.github.io/warehouse/
10 stars 10 forks source link

sails.js i18n config #13

Open clonn opened 9 years ago

clonn commented 9 years ago

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

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",
    
    • VS _使用上的區別 EX : kpi-list-index_by_time
  2. 避免以可能會有變動的方式命名像是(顏色 …)

h3. 三. 頁面使用方式

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")

O:aaa_bbb X: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