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

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

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

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

需要注意的是：

package.json中有dependencies对象和devDependencies。

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

如果我们想使用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 对象中去

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

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

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

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

styles中就是我们要引入的css

scripts中就是我们要引入的js

引入jquery

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

然后将路径添加到scripts中去即可。

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

安装类型描述文件

通过命令：npm install @types/name –save-dev

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

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

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

然后，我们就可使用jquery啦！

我们来测试一下。

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Angular-Cli中引用第三方库

    最近在学习angular(AngularJS 2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题... 初试 我最初的想法是直接将相对路径写到index.html即可,如下: <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow&qu

  • 如何在AngularJs中调用第三方插件库

    在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库.我们不能散乱的在AngularJS中引入这些库,例如在controller中.那么应该怎么在Angular中使用第三方库呢? 如何使用? 很简单,给插件写一个directive. 在这里,我会使用一个简单的jquery插件Toolbar.js 的DEMO. 这是我们如何在jquery中创建一个tooltip的: <!-- Click this to see a toolbar --> <div id="

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

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

    最近在学习Angular方面的知识,今天学习了Angular中使用第三方的库,分享给大家 如果我们想在Angular中使用第三方的库,比如jquery或bootstrap等,该如果做呢? 首先我们先来看看package.json这个文件,在目录介绍那篇博客中我们已经知道,package.json这个文件列出了项目所使用的第三方依赖包.我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中. 需要注意的是: package.json中有dep

  • Angular 如何使用第三方库的方法

    Angular 的组件与模块看似好像与现有各种第三方类库(例如:lodash.moment 等)使用上有点格格不入,这很大的原因是 TypeScript 造成的假象.三足鼎立的前端其实都是雷同的,不管是哪种前端框架都可以使用到这些第三方类库. 以下我将从另一个视角解释 Angular 如何使用第三方类库的一种经验做法. 一.写在前面 在开始之前,需要先了解一下 TypeScript 模块系统 --模块是指在其自身作用域里执行,而不是在全局作用域里:模块间是依靠 export 和 import 建

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • 通过webpack引入第三方库的方法

    一般来说,引入第三方库有一下三种情况: 通过CDN引入: 通过npm 安装并引入: 第三方js文件就在本地 通过CDN 这是最简单的一种方式,例如引入高德地图,可以直接把以下代码放在index.html文件底部,这种情况与webpack无关,因为webpack的入口文件并不在此处 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"&

  • PHP7扩展开发之基于函数方式使用lib库的方法详解

    本文实例讲述了PHP7扩展开发之基于函数方式使用lib库的方法.分享给大家供大家参考,具体如下: 前言 首先说下什么是lib库.lib库就是一个提供特定功能的一个文件.可以把它看成是PHP的一个文件,这个文件提供一些函数方法.只是这个lib库是用c或者c++写的. 使用lib库的场景.一些软件已经提供了lib库,我们就没必要再重复实现一次.如,原先的mysql扩展,就是使用mysql官方的lib库进行的封装. 在本文,我们将建立一个简单的lib库,并在扩展中进行封装调用. 代码 基础代码 这个扩

  • python中数据爬虫requests库使用方法详解

    python中数据爬虫requests库使用方法详解

    一.什么是Requests Requests 是Python语编写,基于urllib,采Apache2 Licensed开源协议的 HTTP 库.它urllib 更加方便,可以节约我们大量的工作,完全满足HTTP测试需求. 一句话--requests是python实现的简单易用的HTTP库 二.安装Requests库 进入命令行win+R执行 命令:pip install requests 项目导入:import requests 三.各种请求方式 直接上代码,不明白可以查看我的urllib的基

  • Linux下安装python3.6和第三方库的教程详解

    Linux下安装Python3.6和第三方库 如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!!!! 不要动现有的python2环境! 一.安装python3.6 1. 安装依赖环境 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdb

  • angular组件间传值测试的方法详解

    angular组件间传值测试的方法详解

    前言 我们知道angular组件间通讯有多种方法,其中最常用的一种方法就是借助于 @Input 和 @Output 进行通讯.具体如何通讯请参考angular组件间通讯,本文不再赘述,我们来讲讲关于此方法如何进行单元测试. 创建假组件 我们单元测试父组件与子组件的的交互是否符合我们的要求,我们在父组件进行测试,就需要模拟一个假的子组件出来,这样排除其他因素对测试的影响. 比如现在我在分页组件里写了一个每页大小选择组件,现在要测试一下组件间交互.现在分页组件就是我们的父组件,每页大小组件就是我们的

  • android 网络请求库volley方法详解

    android 网络请求库volley方法详解

    使用volley进行网络请求:需先将volley包导入androidstudio中 File下的Project Structrue,点加号导包 volley网络请求步骤: 1. 创建请求队列       RequestQueue queue = Volley.newRequestQueue(this); 2.创建请求对象(3种) StringRequest request = new StringRequest("请求方法","请求的网络地址","成功的网

  • Java如何提供给第三方使用接口方法详解

    目录 前言 接口Controller 接口幂等性校验 实现类ServiceImpl 第三方调用接口Api实现类 生成签名工具类 HttpCilent工具类 附:分享一个获取IP工具类 总结 前言 相信有很多小伙伴,在日常的开发中都有遇到过需要调用第三方接口的需求吧,但是自己有没有写过接口提供给第三方使用呢,常规的都是我们调用别人的接口,但是自己需要开发接口提供给第三方使用的场景应该不是很多,很多小伙伴可能会想不就开发一个接口对外开放嘛岂不是很简单,但是在开发接口对外开放,我们需要考虑一个问题,没

随机推荐