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

沒有留言:

張貼留言