2016年11月10日 星期四

[Angular2] 在angular-cli專案加入第三方套件-以jQuery及Bootstrap為例


接觸angular後其實真的很少寫jQuery,但很多時候拿到的html版可能是UI設計師所提供的,或者是花錢買的樣板,所以免不了要用jQuery寫入一些效果,本篇就簡單介紹一些如何在angular-cli專案加入第三方的.js .css.
如何建立範本請參考 [Angular2] 建立專案範本


螢幕快照 2016-11-11 下午1.08.32
# yarm是完全相依npm的套件管理工具,執行上比npm快非常多,可參考此篇文章
$ yarn add jQuery bootstrap
螢幕快照 2016-11-11 下午1.20.48
在angular.cli.json 加入路徑
"styles": [
       "scripts": [
接著我們app.component.html加入一個bootstrap的Button (強烈建議編輯器要安裝snippet套件快速開發)
螢幕快照 2016-11-11 下午1.31.47
ng serve 啟動本機伺服器 可以看到已套用bootstrap
螢幕快照 2016-11-11 下午1.34.46
螢幕快照 2016-11-11 下午1.36.38
這時你會發現 $ 字號有毛毛蟲 這是因為Typescript是強行別的開發方式,檢查會變得較為嚴謹,任何開發尚未定義的變數都會在編譯時期就出錯。
而要讓Typescript看得懂 $ 字號為jQuery其實只要宣告一下就好了:
declare var $:any;

TypeScript With jQuery

安裝jQuery Typescript定義檔:
$ yarn add @types/jquery
"types": [
接著回到app.componet.ts,會看到有關jQuery語法都開始會有智慧提示功能 (VS Code Rock!!)
螢幕快照 2016-11-11 下午1.50.22
在執行一次ng serve,即可看到jQuery正常執行
螢幕快照 2016-11-11 下午1.52.03
可參考保哥的教學影片 https://www.youtube.com/watch?v=_9fUQus6EqQ
本次範例程式 : https://github.com/kyleap/angular-learn-sample

35 則留言:

  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

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

  3. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.

    Best Hadoop training in bangalore

  4. 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

  5. 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

  6. I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.we are providing ReactJs training in Chennai.
    For more details: ReactJs training in Velachery | ReactJs training in chennai

  7. Information from this blog is very useful for me, am very happy to read this blog Kindly visit us @ Luxury Watch Box | Shoe Box Manufacturer |  Candle Packaging Boxes

  8. Hi,
    Good job & thank you very much for the new information, i learned something new. Very well written. It was sooo good to read and usefull to improve knowledge. Who want to learn this information most helpful. One who wanted to learn this technology IT employees will always suggest you take big data hadoop training in bangalore. Because big data course in Bangalore is one of the best that one can do while choosing the course.

  9. 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

  10. Learn Amazon Web Services for excellent job opportunities from Infycle Technologies, the Excellent AWS Training in Chennai. Infycle Technologies gives the most trustworthy AWS course in Chennai, with full hands-on practical training from professional trainers in the field. Along with that, the placement interviews will be arranged for the candidates, so that, they can meet the job interviews without missing them. To transform your career to the next level, call 7502633633 to Infycle Technologies and grab a free demo to know more

  11. 作者已經移除這則留言。

  12. 作者已經移除這則留言。

  13. 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