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 禁止鼠标右键并监听右键事件
Apr 27 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
JQuery实现图片轮播效果
May 08 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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自动反斜杠的函数代码
2010/01/05 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python动态监控日志内容的示例
2014/02/16 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
基于python实现聊天室程序
2018/07/27 Python
Django学习之文件上传与下载
2019/10/06 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
会议活动邀请函
2014/01/27 职场文书
家长学校实施方案
2014/03/15 职场文书
触电现场处置方案
2014/05/14 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
如何撰写创业策划书
2019/06/27 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
MySQL创建表操作命令分享
2022/03/25 MySQL