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