Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 與 jQuery 共舞:整合第三方套件的技巧、陷阱與解決方案

5,074 views

Published on


Facebook 直播網址: https://www.facebook.com/will.fans/videos/1718120871550383/

在 AngularJS 1.x 的年代,要想整合 jQuery 或其他第三方 JS 套件都會有點麻煩,也因此很多人誤以為用了 Angular 2+ 之後也應該如此。事實上,使用 Angular 整合其他第三方 JS 套件相當容易,只要掌握一些重要的基礎知識,你也可以輕鬆整合。

當然,也有許多人認為,都已經用了元件化的 Angular 框架,為什麼還要使用那些以 DOM 為主的前端套件呢?身處前端的攻城獅們,總是會遇到許多奇奇怪怪的需求,有些需求是初學者很難想像的,當遇到不適用 Angular 解決的難題,整合第三方套件便在所難免。

這次我將分享 Angular 整合第三方套件的技巧、陷阱與解決方案,敬請準時上線,跟我一同悠遊前端世界! 🙂

Published in: Technology
  • Be the first to comment

Angular 與 jQuery 共舞:整合第三方套件的技巧、陷阱與解決方案

  1. 1. Angular 與 jQuery 共舞 整合第三方套件的技巧、陷阱與解決方案 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. 在 Angular 整合第三方前端套件 Integrate 3rd party libs with Angular
  3. 3. 兩種整合方法 • 以全域函式庫載入 (Imported as a global library) – 就是原本 JS 套件的載入方式 ( 放入 src/index.html 首頁 ) <script src="jquery.js"></script> • 以 JS 模組方式載入 (Imported as a module) – 將 JS 套件直接內嵌到 Angular 專案內 PS> npm install jquery import * as $ from "jquery";
  4. 4. 以全域函式庫載入 Imported as a global library
  5. 5. 載入全域函式庫的兩種方法 • 從首頁載入 ( src/index.html ) <script src="https://code.jquery.com/jquery- 3.2.1.min.js"></script> • 從 Angular CLI 定義檔載入 ( .angular-cli.json ) "styles": [ "styles.css" ], "scripts": [ "global-script.js", { "input": "lazy-script.js", "lazy": true }, { "input": "pre-rename-script.js", "output": "renamed-script" } ], 5
  6. 6. 在 TypeScript 中使用全域函式庫 • 沒有 TypeScript 模組定義檔 – 建立 src/typings.d.ts 檔案 ( 此檔案 Angular CLI 已內建 ) declare var $: any; • 已有 TypeScript 模組定義檔 – 搜尋 @types 工具:http://microsoft.github.io/TypeSearch/ PS> npm install @types/jquery PS> npm install @types/d3 6
  7. 7. 安裝與設定 TypeScript 模組定義檔 • 安裝 TypeScript 模組定義檔 PS> npm install @types/jquery • 設定 tsconfig.json 設定檔 (預設會自動載入模組定義檔) "typeRoots": [ "node_modules/@types" ], 7
  8. 8. 認識 tsconfig.json 設定檔 8
  9. 9. 認識 tsconfig.json 設定檔 9
  10. 10. 不同的 tsconfig.json 設定檔 (明確載入) • src/tsconfig.app.json "types": [] • src/tsconfig.spec.json e2e/tsconfig.e2e.json "types": [ "jasmine", "node" ] 10
  11. 11. 載入 jQuery 其他外掛 (Plugins) • 常見錯誤訊息 [TS][Error] Property 'myPlugin' does not exist on type 'JQuery'. • 沒有 TypeScript 模組定義檔的解決方案 ( src/typings.d.ts ) interface JQuery { myPlugin(options?: any): any; } • 已有 TypeScript 模組定義檔的解決方案 PS> npm install @types/jqueryui 11
  12. 12. 以 JS 模組方式載入 Imported as a module
  13. 13. 以 JS 模組方式載入 • 沒有 TypeScript 模組定義檔 – 建立 src/typings.d.ts 檔案 ( 此檔案 Angular CLI 已內建 ) declare module 'typeless-package'; declare module 'jquery'; • 已有 TypeScript 模組定義檔 – 搜尋 @types 工具:http://microsoft.github.io/TypeSearch/ PS> npm install @types/jquery 13
  14. 14. 常見的陷阱 Common Traps
  15. 15. 關於 Zones 機制 • 從 Angular 2 開始加入了非常神奇的 Zones 機制 • 主要用途 – 管理非同步事件的執行與錯誤追蹤 – 可以精準掌握非同步事件的運作時機 – 可以更清楚地記錄錯誤發生時的呼叫堆疊 • 服務元件 – 預設 Angular 就是以 NgZone 進行非同步事件管理 – 應用程式生命週期中所有非同步事件都由 NgZone 管理 – 你可以在元件中注入 NgZone 服務元件管理事件執行 15
  16. 16. 示範 NgZone 的威力 • 範本 <div> {{ debug() }} </div> • 元件 ngOnInit() { document.addEventListener('click', x => console.log(x)); } debug() { console.log('DEBUG:'+(new Date().getTime())); } 16
  17. 17. 解決過多的變更偵測 17
  18. 18. 解決過多的變更偵測 18
  19. 19. 相關連結 • Global Library Installation • Global scripts • 3rd Party Library Installation • Using global libraries inside your app 19
  20. 20. 聯絡資訊 • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 – http://blog.miniasp.com/ • Will 保哥的技術交流中心 (臉書粉絲專頁) – http://www.facebook.com/will.fans • Will 保哥的噗浪 – http://www.plurk.com/willh/invite • Will 保哥的推特 – https://twitter.com/Will_Huang

×