Angular5中調(diào)用第三方庫及jQuery的添加的方法
package.json這個文件列出了項目所使用的第三方依賴包。我們在創(chuàng)建新項目的時候默認會給我們下載一些包,這些是Angular自帶的,存放在node_modules目錄中。
需要注意的是:
package.json中有dependencies對象和devDependencies。
devDependencies 里面的插件只用于開發(fā)環(huán)境,不用于生產(chǎn)環(huán)境,而 dependencies 是需要發(fā)布到生產(chǎn)環(huán)境的。
添加依賴有2種方法:
- npm install name –save 就是將要安裝的依賴寫到package.json的dependencies 對象中去
- npm install name –save-dev是將要安裝的依賴寫到package.json的devDependencies 對象中去
下面以minirefresh添加到angular環(huán)境中為例子。(https://github.com/minirefres... )
一、npm install minirefresh --save
通過結(jié)果可以看到:
可以看到,一開始dependencies中是沒有minirefresh 的,通過 npm install minirefresh --save命令會自動下載minirefresh 并添加到dependencies中。然后我們會發(fā)現(xiàn)node_modules目錄中就有minirefresh 的包了。
二、修改angular-cli.json文件(styles數(shù)組和scripts數(shù)組)
1、styles中就是我們要引入的css
2、scripts中就是我們要引入的js
配置如圖:
三、在需要用該插件的組件中(.ts文件中)做如下聲明:declare var $:any;目的是不讓編譯時報錯
配置如圖:
四、ngOnInit方法中就能正常用上面的三款插件了。
jQuery的添加
一、npm install jquery --save / --save--dev
二、修改angular-cli.json文件:
"scripts": ["../node_modules/jquery/dist/jquery.min.js"]
三、安裝類型描述文件
Angular以TypeScript語言作為默認編碼語言,而jquery本質(zhì)是javascript,TypeScript是不能直接使用的。
完成上面的步驟后,這時我們還不能直接使用jquery,還需要先安裝類型描述文件,讓TypeScript認識jquery。
即執(zhí)行:
npm install @types/jquery --save-dev
四、在app.module引入jquery文件,要加上jquery模塊
即在app.module.ts文件添加import * as $ from 'jquery';
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例
這篇文章主要介紹了angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例,本文直接給出代碼實例,需要的朋友可以參考下2015-07-07Angular中$broadcast和$emit的使用方法詳解
本篇文章主要介紹了Angular中$broadcast和$emit的使用方法詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05AngularJS基礎(chǔ) ng-keyup 指令簡單示例
本文主要介紹AngularJS ng-keyup 指令,這里對ng-keyup指令的基本資料進行了整理,并且附有代碼示例,有需要的朋友可以看一下2016-08-08Angular2使用Angular-CLI快速搭建工程(二)
這篇文章主要介紹了Angular2使用Angular-CLI快速搭建工程(二),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法
這篇文章主要介紹了Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法,需要的朋友可以參考下2017-10-10Angular4項目中添加i18n國際化插件ngx-translate的步驟詳解
這篇文章主要跟大家介紹了關(guān)于Angular4項目中添加i18n國際化插件ngx-translate的步驟,文中介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-07-07