2016年11月19日 星期六

[Angular2] 在專案加入多國語系

前言

在專案啟動時,我習慣直接將多國語系考慮進去,不然到時老闆一句話要Support時又要將所有程式改動挺麻煩的,在Angular2有一個整合i18n的模組叫做ng2-translate ,本篇文章就來說明如何將它加入專案中。

如何建立範本請參考 [Angular2] 建立專案範本

 

NPM安裝

$ npm install ng2-translate –save
or
$ yarn add ng2-translate

 

模組Import

Angular2 變成模組化開發後載入第三方函示庫不外乎就是 NPM安裝=>找你的模組匯入,此範例我們打開app.module.ts

螢幕快照 2016-11-20 上午10.30.29

這樣就會載入transModule,此設定翻譯檔預設會抓網站底下的i18n目錄,如果你要自訂翻譯檔的路徑可以改由以下設定:

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
            deps: [Http] 
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

 

語言設定

接著打開根元件app.conponent.ts,使用TranslateService並設定語言

螢幕快照 2016-11-20 上午10.52.16

 

定義翻譯檔

開發階段src為網站目錄,我們在src資料夾底下增加i18,並增加en.json & zh.json

en.json

{
    "HelloTrans": "Learing ng2-translate!"
}

zh.json

{
    "HelloTrans": "實作多國語系!"
}

 

使用翻譯檔

Html 要抓取翻譯檔定義需改由以下寫法


<div>
    {{ 'HelloTrans' | translate }}
</div>

而在.ts要抓取翻譯檔定義則需要使用Service

translate.get('HelloTrans').subscribe((val: string) => {
     console.log('HelloTrans',val);
});

 

切換語系

而切換語系也很簡單,我們在html加入兩個按鈕

<button class="btn btn-primary" (click)="changeLang('en')">切換語系至English</button>
<button class="btn btn-primary" (click)="changeLang('zh')">切換語系至中文</button>

在app.component.ts增加changeLang這個method

changLang(langKey){
     this.translate.use(langKey);
}

這樣就可以完成語系切換,而當使用者重新整理網頁時要怎麼維持當前語系呢? 通常我會使用localStorage來處理,譬如在app.conponent.ts底下改成如下:

螢幕快照 2016-11-20 上午11.07.24

 

後記

使用多國語系一點也不複雜,而且因為是使用Angular2開發,如果您有在寫ionic2 要在App做多國語系也是差不多的步驟~

而.json檔通常是給專業的翻譯,這部分可以找一些線上工具,將excel樣板提供給翻譯人員完成,之後再將excel檔轉成json檔,後續也較好維護。

至於i18n的語系代碼可參考 http://www.science.co.il/Language/Codes.php

--

本次範例程式 : https://github.com/kyleap/angular-learn-sample

2016年11月10日 星期四

[Angular2] 在angular-cli專案加入第三方套件-以jQuery.Bootstrap為例

前言

接觸angular後其實真的很少寫jQuery,但很多時候拿到的html版可能是UI設計師所提供的,或者是花錢買的樣板,所以免不了要用jQuery寫入一些效果,本篇就簡單介紹一些如何在angular-cli專案加入第三方的.js .css.

如何建立範本請參考 [Angular2] 建立專案範本

webpack

angular2是個模組化的開發方式,透過angular-cli所建置的專案已改由system.js改由webpack,以往要在angular2專案加入webpack,你必需要去了解webpack的建置環境,這對於一個全端工程師來說是個很焦慮的事XD,因為webpack要懂得的東西還真的不少,好在angular-cli已幫我們整合好,只要懂得用他的指令即可,而angular-cli相關webpack設定檔都至於node_modules底下,而webpack本身還有許多額外的套件,如果要增加的話不建議直接改node_modules這些設定檔,可在專案底下加入會比較彈性一點。

螢幕快照 2016-11-11 下午1.08.32

angular.cli.json

webpack會將我們相依的程式及模組打包成一隻.js減少request,而以下就介紹如何在專案下加入jQuery及bootstrap

先用yarn將jQuery及bootstrap安裝回來

# yarm是完全相依npm的套件管理工具,執行上比npm快非常多,可參考此篇文章

$ yarn add jQuery bootstrap

package.json

螢幕快照 2016-11-11 下午1.20.48

在angular.cli.json 加入路徑

"styles": [
           "styles.css",
           "../node_modules/bootstrap/dist/css/bootstrap.min.css"
       ],
       "scripts": [
           "../node_modules/jquery/dist/jquery.min.js"
],

接著我們app.component.html加入一個bootstrap的Button (強烈建議編輯器要安裝snippet套件快速開發)

螢幕快照 2016-11-11 下午1.31.47

ng serve 啟動本機伺服器 可以看到已套用bootstrap

螢幕快照 2016-11-11 下午1.34.46

接著在app.component.ts加入jQuery試試

螢幕快照 2016-11-11 下午1.36.38

這時你會發現 $ 字號有毛毛蟲 這是因為Typescript是強行別的開發方式,檢查會變得較為嚴謹,任何開發尚未定義的變數都會在編譯時期就出錯。

而要讓Typescript看得懂 $ 字號為jQuery其實只要宣告一下就好了:

declare var $:any;

TypeScript With jQuery

而宣告成any還不夠帥,且每支檔案都要宣告一次還挺麻煩的,我們可以將此宣告移到一個全域的地方,
並且載入Typescript的jQuery設定檔定義檔,讓開發起來更順手
安裝jQuery Typescript定義檔:
$ yarn add @types/jquery
找到src/tsconfig.js,有關Typescript的設定都會在這檔案,加入types

"types": [
         "jquery"
     ]

接著回到app.componet.ts,會看到有關jQuery語法都開始會有智慧提示功能 (VS Code Rock!!)

螢幕快照 2016-11-11 下午1.50.22

在執行一次ng serve,即可看到jQuery正常執行

螢幕快照 2016-11-11 下午1.52.03

原則上Typescript用第三方函示庫就要有相對應的.d.ts定義檔,如果該函示庫如果沒有定義檔也可以自行製作一個

可參考保哥的教學影片 https://www.youtube.com/watch?v=_9fUQus6EqQ

或者是可以考慮在src/typings.d.ts進行全域的宣告也可

--

本次範例程式 : https://github.com/kyleap/angular-learn-sample

2016年10月15日 星期六

[Angular2] 在每個Request加入自訂的Header資訊

前言

開發架構都偏向後端是個REST API,而要做到身分驗證必須要走OAuth協定,而我們系統採用的是 Bearer Token ,Client 像 Server 端取得Access Token後,只要在Header加入Key 為 Authorization的格式,就能判斷該Request的登入身分,而這個 Header的Value 會長這樣

Bearer XXXXXXXX
而在Angular2如何在每次像API發送Request的時候怎麼夾帶這個資訊呢?
範本安裝請參考 : http://kyleap.blogspot.tw/2016/10/angular2.html
== 前端版號很重要 ==

angular-cli: 1.0.0-beta.17
node: 6.6.0
angular : 2.0.0

== 前端版號很重要 ==

1. 於app目錄加入app.request.ts,並加入以下程式

 

螢幕快照 2016-10-15 下午5.14.07

自訂的AppRequestOptions繼承(extends)BaseRequestOptions Class,並執行底層Class的建構(super()),而如有登入過通常我會將OAuth所回傳的Token資訊存在localStorage,故判斷如果有資料的話則在Headers加入Authorization

2. 於app.module.ts 注入app.reqequest

螢幕快照 2016-10-15 下午5.33.00

螢幕快照 2016-10-15 下午5.37.07

http模組加入RequestOptions及匯入剛剛的app.request.ts及於App Module注入即可

接著打開瀏覽器開發工具,就可以看到http發送Request後就可以看到Header多了Authorization

螢幕快照 2016-10-15 下午5.44.54

後記

這個方法可以很容易的帶入我們要的Header資訊,而還有另一個方式是自訂一個Http Provider,有機會再寫另一篇分享

本次範例程式 : https://github.com/kyleap/angular-learn-sample

--

References

https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html

 

 

 
 
 

2016年9月28日 星期三

[Angular2] 建立專案範本

前言

身為一個全端工程師,除了網站前後端外,在專案上開始也有開發App的需求,在過去我們團隊使用Angular來撰寫前端程式,後端採用ASP.NET Web API,而App我們使用Cordova搭配ionic 。但專案進入維護期,有新人也加入了,但因為Angular學習曲線有點太高,導致會不太好上手,且專案一大,因為是使用JavaScript開發,如果對於JavaScript特性不太熟悉,很容易掉入地獄裡面。在今年評估Angular2後,決定狠下心從將Angular1重構成Angular2專案,因為是搭配TypeScript來開發,搭配編輯器的功能,讓有些錯誤可以在編譯時期,且編輯器自動完成功能讓開發起來更加順手,對於TypeScript有種相間恨晚的感覺,應該在Angular1時間就使用TypeScript來撰寫會比較順手。

Angular2學習曲線我認為也不低,複雜在於"開發環境",他將自己定位成平台,所以整合很多的open source技術進來,但就一個團隊新人來講,開發環境並不是首要去了解的,很多事情都定義成腳本,只要會使用就可以。就程式撰寫上,Angular2的學習曲線我覺得大大的降低,且因為官方就訂了很多程式開發標準.建議,讓使用Agnular2開發的人都有一致的開發風格,這也是後來在github看別人專案也能很快看懂的原因。

目前(2016年)也已經進入正式版,這篇文章算是一個開始,我陸續想將開發上所撰寫的功能及採到的地雷,整理成一篇一篇的小筆記,而不免俗的來Hello Word一下,讓之後demo的Sample Code都以此篇的專案範本來撰寫。

建立Angular2專案範本

使用前請安裝Node.js 會一併安裝NPM

可以用指令確認版本

螢幕快照 2016-10-08 下午9.46.40

透過NPM安裝 Angular-cli

npm install –g angular-cli

ng –v 確認版本

螢幕快照 2016-10-08 下午9.48.16

ng new mydemo 建立專案
cd mydemo 進入資料夾
ng serve 啟動本機localserver

用瀏覽器開啟http://localhost:4200/

如果有出現app work!畫面代表成功。

--

本篇利用Angular-cli很簡單的建立範本讓之後的文章做參考,

建議可以參考 Angular2官網手把手接學  照步驟做完應該就會開發了XD

也可以參考保哥的文章,整理很多Angular2觀念及延伸學習資源

文章索引連結(陸續新增)

Angular 2

[Angular2] 在每個Request加入自訂的Header資訊

[Angular2] 在angular-cli專案加入第三方套件-以jQuery.Bootstrap為例

[Angular2] 在專案加入多國語系

 

Ionic 2

2016年1月7日 星期四

[Web API] 在 Swagger UI 送出Http Header資訊

Swagger

之前開發Web API,都是透過Chome Postman來測試API,測試無誤後,將他儲存Collections再匯出給其他同事繼續開發前端部分,但前陣子發現Swagger這個好物,可以將註解直接變成文件,且可以直接在介面發送Request,查看Response,真的省了不少時間,至於怎麼在VS安裝使用,有很多前輩都分享了:

KingKong Bruce記事 - ASP.NET WEB API 文件產生器(2) – SWAGGER

mrkt 的程式學習筆記 - ASP.NET Web API 文mrkt 的程式學習筆記件產生器 - 使用 Swagger

但在開發App通常我會在Header加入Token來驗證是否有存取API的權限,但發現Swagger無法在UI直接加入我要傳入的Header資訊。

b64347a88e264b6383b9d05e0ef9ee56

沒有這欄位,只好硬幹了,以下就依步驟紀錄一下

首先先在你的ASP.NET網站底下加入一個scripts (當然存放位置可以依你而定),在這個js上點右鍵,建置動作改成內嵌資源

45276f387cbe488aa218e0106e5d3121

接著找到App_Start\SwaggerConfig.cs底下,找到181行,取消註解 c.InjectJavaScript

將字串改為你的專案名稱及存放的Namespace

b9a21869aed84e1c97cea378f6c5ba75

Swagger預設已經掛載jQuery,所以我們在swagger-header.js寫些程式

右上角有個api_key的欄位,此欄位的用途在於調用API的時候自動幫你帶api_key這個參數

a7602f2645a340539e15aace6d6e2143

這個我們用不到,所以我們在js寫個程式把它隱藏,然後插入兩個DOM: Header Name跟Header Value的textbox

7760e2a4cd52476a984e81b27da9bce2

畫面就會變這樣:

1c341f6896804aa2bd49f17593cb3c9d

接著我們將這兩個textbox change的時候,透過Swagger的API加入Header資訊

d08e8a91839c474f87a751922409c38d

這樣再發送Request的時候就會看到Header的值:

1ec69a5aaa4c4d01aed6f33f94e5737d

可以用Chome的開發者工具至Network查看

12770befe8824361949bb9fffe381b6b

知道怎麼用jQuery去改UI,就可以依你的需求去調整硬幹了~

--

References :

http://stevemichelotti.com/customize-authentication-header-in-swaggerui-using-swashbuckle/