Angular5中调用第三方库及jQuery的添加的方法


Posted in jQuery onJune 07, 2018

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

需要注意的是:

package.json中有dependencies对象和devDependencies。

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

Angular5中调用第三方库及jQuery的添加的方法

添加依赖有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

通过结果可以看到:

Angular5中调用第三方库及jQuery的添加的方法

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

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

1、styles中就是我们要引入的css

2、scripts中就是我们要引入的js

配置如图:

Angular5中调用第三方库及jQuery的添加的方法

Angular5中调用第三方库及jQuery的添加的方法

三、在需要用该插件的组件中(.ts文件中)做如下声明:declare var $:any;目的是不让编译时报错

配置如图:

Angular5中调用第三方库及jQuery的添加的方法

四、ngOnInit方法中就能正常用上面的三款插件了。

Angular5中调用第三方库及jQuery的添加的方法

jQuery的添加

一、npm install jquery --save / --save--dev

二、修改angular-cli.json文件:

"scripts": ["../node_modules/jquery/dist/jquery.min.js"]

三、安装类型描述文件

Angular以TypeScript语言作为默认编码语言,而jquery本质是javascript,TypeScript是不能直接使用的。

完成上面的步骤后,这时我们还不能直接使用jquery,还需要先安装类型描述文件,让TypeScript认识jquery。

即执行:

npm install @types/jquery --save-dev

四、在app.module引入jquery文件,要加上jquery模块

即在app.module.ts文件添加import * as $ from 'jquery';

Angular5中调用第三方库及jQuery的添加的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP开发注意事项总结
2015/02/04 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Python实现的简单计算器功能详解
2018/08/25 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
《童年》教学反思
2014/02/18 职场文书
战略合作协议书范本
2014/04/18 职场文书
电工技术比武方案
2014/05/11 职场文书
工作推荐信模板
2015/03/25 职场文书
天河观后感
2015/06/11 职场文书