Angular如何引入第三方库的方法详解


Posted in Javascript onJuly 13, 2017

最近在学习Angular方面的知识,今天学习了Angular中使用第三方的库,分享给大家

如果我们想在Angular中使用第三方的库,比如jquery或bootstrap等,该如果做呢?

首先我们先来看看package.json这个文件,在目录介绍那篇博客中我们已经知道,package.json这个文件列出了项目所使用的第三方依赖包。我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中。

Angular如何引入第三方库的方法详解

需要注意的是:

package.json中有dependencies对象和devDependencies。

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

Angular如何引入第三方库的方法详解

如果我们想使用jquery的话,我们就需要将jquery包下载到node_modules中,然后引入js文件即可。

添加依赖的方法: npm install name ?save

我们可以通过npm install name ?save这个命令去添加依赖。注意,要在项目的根目录下执行该命令。

例如 npm install jquery ?save

?save 就是将要安装的依赖写到package.json的dependencies 对象中去

?save-dev是将要安装的依赖写到package.json的devDependencies 对象中去

Angular如何引入第三方库的方法详解

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

Angular如何引入第三方库的方法详解

在目录详解那篇博客中我们讲到,.angular-cli.json这个文件是 Angular命令行工具的配置文件。后期可能会去修改它,引一些其他的第三方的包 比如jquery等

那么现在我们就需要去修改angular-cli.json这个文件。

我们在apps这个中可以看到styles数组和scripts数组。

styles中就是我们要引入的css

scripts中就是我们要引入的js

Angular如何引入第三方库的方法详解

引入jquery

首先我们要知道要引入文件的路径。jquery包是放在node_modules目录中的。

Angular如何引入第三方库的方法详解

然后将路径添加到scripts中去即可。
Angular如何引入第三方库的方法详解

这个时候我们还不能直接使用jquery,因为Angular是使用TypeScript语言开发的,而jquery本质是javascript,TypeScript是不能直接使用的。我们需要先安装类型描述文件,让TypeScript认识jquery。

安装类型描述文件

通过命令:npm install @types/name ?save-dev

这里演示的是jquery的类型描述文件的安装:npm install @types/jquery ?save-dev

类型描述文件安装到开发环境即可

Angular如何引入第三方库的方法详解

安装完成后,修改tsconfig.app.json文件,将jquery添加到types数组中。

Angular如何引入第三方库的方法详解

然后,我们就可使用jquery啦!

我们来测试一下。

首先,在模板页面上添加一个按钮

Angular如何引入第三方库的方法详解

然后在控制器中写一个简单的点击按钮弹出文字

Angular如何引入第三方库的方法详解

ok,下面我们来启动项目看看。

Angular如何引入第三方库的方法详解

可以看到,jquery可以正常使用了。

添加其它第三方依赖包的方法也是类似。

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

Javascript 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
js闭包实现按秒计数
Apr 23 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
js select实现省市区联动选择
Apr 17 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
JavaScript仿京东轮播图效果
Feb 25 Javascript
详解如何构建Angular项目目录结构
Jul 13 #Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 #Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 #Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 #Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 #Javascript
浅谈关于axios和session的一些事
Jul 13 #Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 #Javascript
You might like
PHP抓取及分析网页的方法详解
2016/04/26 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
Prototype Class对象学习
2009/07/19 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
DOM 高级编程
2015/05/06 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python 备份程序代码实现
2017/03/06 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
网络安全方面的面试题
2015/11/04 面试题
一封普通求职者的求职信
2013/11/20 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
超市促销活动方案
2014/03/05 职场文书