Angular5中调用第三方库及jQuery的添加的方法-创新互联
package.json这个文件列出了项目所使用的第三方依赖包。我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中。
成都创新互联是一家集网站建设,鄯善企业网站建设,鄯善品牌网站建设,网站定制,鄯善网站建设报价,网络营销,网络优化,鄯善网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。需要注意的是:
package.json中有dependencies对象和devDependencies。
devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的。
添加依赖有2种方法:
- npm install name –save 就是将要安装的依赖写到package.json的dependencies 对象中去
- 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的添加的方法-创新互联
URL分享:http://myzitong.com/article/cegsdi.html