上方廣告

2017年7月20日 星期四

[Angular學習紀錄] 使用外部JavaScript類別庫(jQuery為例)

儘管 Angular 已經提供了很多功能及特效,但有時候直接套用前端版型的時候,還是不免使用到外部的JavaScript檔案,例如,jQuery 就是非常常見的類別庫。

本篇文章就簡單的介紹一下如何在 Angular 當中使用 jQuery,使用 jQuery 檔案的時機點,我們先大致區分成三大塊。

  1. 在index.html檔案當中。
  2. 在typescirpt檔案當中。
  3. 在其它.html檔案當中。


提到這,必須要先理解 Angular 在 JavaScript 檔案在這幾個畫面的執行順序,參考下圖,假設目前有一個簡單的檔案結構。

目前Angular的執行順序分別為 index.html -> app.module.ts constructor -> app.component.ts constructor -> home.component.ts constructor -> app.component.ts ngOnInit -> home.component.ts ngOnInit -> …..。

不知道有沒有注意到只有 index.html 的 Javascript 會被執行,其餘的 html 檔案裡是無效的喔,因此需要說明的就只剩下 index.html 和 typescript 檔案當中執行外部類別庫了。


index.html檔案


常見的寫法,我們會在所有 DOM 加載完成後執行某件事情,例如底下語法。
$(function () {
  //do something
});

如果套用的模板只需要這樣就搞定,恭喜你,不需要執行任何動作了,這樣就已經完成了。


Typescript檔案


如果直接在 ts 檔案內撰寫 $ 開頭的 jQuery 類別庫操作,你將會收到如下圖的錯誤,那是因為 TypesScript 是一個強型別的開發方式,它不會接受不認識的變數或型別,除非它是 "任意型別" 或者告訴它 "對照的定義檔"。

任意型別
直接宣告該物件為任意型別, TypeScript 將不會檢查該變數,使用這種方式最簡單,但也最容易造成編譯時期無法檢查的錯誤,建議較少使用,變免大量的任意型別充斥在應用程式中,未將來埋下大量的 bug。
//1. 宣告 $ 為任意型別
declare let $: any;

//於ts檔內直接操作jQuery
ngOnInit() { 
    $("#Div_2").html("我是AppComponent ngOnInit內給值");
}


安裝定義檔
首先必須要先安裝定義檔,使用npm安裝jquery的類型定義檔,如下語法。
npm install @types/jquery --save-dev
Module中使用定義檔,直接在.ts檔案內宣告
import * as $ from "jquery";
全域中使用定義檔,本範例使用Angular CLI建立專案(其它建立方式請自行找到對應的檔案),找到tsconfig.app.json內的 "types" : [] ,輸入底下語法
"types": ["jquery"]


以上只是jquery簡單的運用,實務上還是有很多優秀的套件尚未開發出Angular版本但已經有很多人寫好定義檔了,建議可以先到 TypeSearch 找找,若真的找不到就只好自行實作定義檔了,至於定義檔怎麼實作,就請參考保哥的教學(Angular 2 與 TypeScript 2 如何擴充 jQuery Plugin 的模組定義檔) 了,這裡我就不在特別說明了。




本文撰寫時Angular版本為v4.0。

本文範例下載 : Github,使用Angular CLI。