Angular5中调用第三方库及jQuery的添加的方法-创新互联

package.json这个文件列出了项目所使用的第三方依赖包。我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中。

成都创新互联是一家集网站建设,鄯善企业网站建设,鄯善品牌网站建设,网站定制,鄯善网站建设报价,网络营销,网络优化,鄯善网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

需要注意的是:


package.json中有dependencies对象和devDependencies。


devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的。

添加依赖有2种方法:

  1. npm install name –save 就是将要安装的依赖写到package.json的dependencies 对象中去
  2. npm install name –save-dev是将要安装的依赖写到package.json的devDependencies 对象中去

下面以minirefresh添加到angular环境中为例子。(https://github.com/minirefres... )

一、npm install minirefresh --save

通过结果可以看到:

可以看到,一开始dependencies中是没有minirefresh 的,通过 npm install minirefresh --save命令会自动下载minirefresh 并添加到dependencies中。然后我们会发现node_modules目录中就有minirefresh 的包了。

二、修改angular-cli.json文件(styles数组和scripts数组)

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"]

名称栏目:Angular5中调用第三方库及jQuery的添加的方法-创新互联
转载源于:http://ybzwz.com/article/cegsdi.html