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 相关文章推荐
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
php中in_array函数用法分析
2014/11/15 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
List Installed Hot Fixes
2007/06/12 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
js登录弹出层特效
2014/03/07 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
基于vue实现分页效果
2017/11/06 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
原生js生成图片验证码
2020/10/11 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python线程、进程和协程详解
2016/07/19 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Django多个app urls配置代码实例
2020/11/26 Python
Django中template for如何使用方法
2021/01/31 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
教师实习自我鉴定
2013/12/11 职场文书
见习报告格式范文
2014/11/08 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
《给予树》教学反思
2016/03/03 职场文书