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.
Upcoming SlideShare
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
Next

17

Share

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


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

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

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

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • StanRan

    Nov. 16, 2019
  • yang.mark

    Mar. 25, 2019
  • clark_su

    Nov. 25, 2018
  • wushc7089

    Jul. 27, 2018
  • jouowei1

    May. 28, 2018
  • jouowei

    May. 28, 2018
  • yilunshie

    Nov. 8, 2017
  • jimmychen0629

    Sep. 18, 2017
  • NeoChoi

    Sep. 12, 2017
  • khcjump

    Jul. 11, 2017
  • maibahe001

    Jun. 29, 2017
  • polory

    Jun. 29, 2017
  • AdaChen4

    Jun. 20, 2017
  • poy

    Jun. 13, 2017
  • ssuser886232

    Jun. 12, 2017
  • BensonHsieh1

    Jun. 12, 2017
  • lym5201

    Jun. 12, 2017

Facebook 直播網址: https://www.facebook.com/will.fans/videos/1718120871550383/ 在 AngularJS 1.x 的年代,要想整合 jQuery 或其他第三方 JS 套件都會有點麻煩,也因此很多人誤以為用了 Angular 2+ 之後也應該如此。事實上,使用 Angular 整合其他第三方 JS 套件相當容易,只要掌握一些重要的基礎知識,你也可以輕鬆整合。 當然,也有許多人認為,都已經用了元件化的 Angular 框架,為什麼還要使用那些以 DOM 為主的前端套件呢?身處前端的攻城獅們,總是會遇到許多奇奇怪怪的需求,有些需求是初學者很難想像的,當遇到不適用 Angular 解決的難題,整合第三方套件便在所難免。 這次我將分享 Angular 整合第三方套件的技巧、陷阱與解決方案,敬請準時上線,跟我一同悠遊前端世界! 🙂

Views

Total views

5,898

On Slideshare

0

From embeds

0

Number of embeds

25

Actions

Downloads

0

Shares

0

Comments

0

Likes

17

×