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

1 則留言:

  1. AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

    AngularJS Training in Chennai

    回覆刪除