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

12 則留言:

  1. 我一直以為有個套件叫 [jQuery.Bootstrap]
    看了3星期才了解jquery是jquery, bootstrap是bootstrap

    回覆刪除
  2. I simply wanted to write down a quick word to say thanks to you for those wonderful tips and hints you are showing on this site.
    Click here:
    Angularjs training in chennai

    Click here:
    angularjs training in bangalore

    Click here:
    angularjs training in online

    回覆刪除
  3. I have visited this blog first time and i got a lot of informative data from here which is quiet helpful for me indeed. 
    Click here:
    Microsoft azure training in chennai


    Click here:
    Microsoft Azure training in online

    回覆刪除
  4. Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.

    Digital Marketing Training in Chennai

    Digital Marketing Course in Chennai

    回覆刪除
  5. 作者已經移除這則留言。

    回覆刪除
  6. 作者已經移除這則留言。

    回覆刪除
  7. Merry Christmas from the Fallon's!! (The girl with the pink hair is of no relation)," Fallon teases. Never miss a story. Christmas Message for Wife

    回覆刪除