[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。