Angular引入第三方库

摘要:
已安装的类型描述文件@types/jquery位于node_模块上,可以在下面找到。文件包。json列出了项目使用的第三方依赖包。我们需要将jquery包下载到node_In模块中,npminstalljquery--save命令将自动下载jquery并将其添加到依赖项中。然后我们将找到node_modules目录,其中包含jquery包。

 原文已经写的很好了。原文链接: https://blog.csdn.net/yuzhiqiang_1993/article/details/71215232

       加上2点给自己用,引入bootstrap样式,需要在angular-cli.json的styles中引入。

       安装的类型描述文件@types/jquery在node_modules下面可以找到。

        

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

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

Angular引入第三方库第1张

  需要注意的是:
  package.json中有dependencies对象和devDependencies。
  devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的。

 

Angular引入第三方库第2张

  如果我们想使用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引入第三方库第3张

  

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

Angular引入第三方库第4张

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

  那么现在我们就需要去修改angular-cli.json这个文件。
  我们在apps这个中可以看到styles数组和scripts数组。

  styles中就是我们要引入的css
  scripts中就是我们要引入的js
Angular引入第三方库第5张

  引入jquery
  首先我们要知道要引入文件的路径。jquery包是放在node_modules目录中的。
Angular引入第三方库第6张

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

Angular引入第三方库第7张

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

  安装类型描述文件
  通过命令:npm install @types/name --save-dev

  这里演示的是jquery的类型描述文件的安装:npm install @types/jquery --save-dev
  类型描述文件安装到开发环境即可
Angular引入第三方库第8张

  

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

 Angular引入第三方库第9张

  

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

  我们来测试一下。
  首先,在模板页面上添加一个按钮

Angular引入第三方库第10张

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

Angular引入第三方库第11张

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

Angular引入第三方库第12张

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

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

免责声明:文章转载自《Angular引入第三方库》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MySQL 百万级分页优化(Mysql千万级快速分页)(转)InfiniBand技术rds协议下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Linux服务部署Yapi项目(安装Node Mongdb Git Nginx等) Linux服务部署Yapi

一,介绍与需求  1,我的安装环境:CentOS7+Node10.13.0+MongoDB4.0.10。  2,首先安装wget,用于下载node等其他工具 1 yum install -y wget  编译依赖 gcc 环境 1 yum install gcc-c++ 二,Node安装配置 第一步:下载Node 1 wget https://nodejs...

杂志翻页效果(基于jQuery开源版的修改)

      先看一个开源版本 http://tympanus.net/Tutorials/MoleskineNotebook/ 效果很酷的(所需资源与案例可自行访问) 就是喜欢这个酷酷的效果,但也有点美中不足,就是可定制性不强。例如大小、页数、初始化、内容加载等等,都不好控制。 这个家伙的初始化话要求html中指定页数,而且还要一个图片的load事件,且不...

Centos6/7下静默安装oracle10g

Centos6/7下静默安装Oracle10g 远程安装oracle10g,通过网上资料,不断摸索成功安装。先在本地虚拟机Centos7上做实验,快照恢复快照恢复,安装了几十次成功之后,再在服务器Centos6上安装,(6和7还是有区别的,比如默认防火墙)中间遇到各种问题特记录下来分享。 在linux下安装oracle主要注意点: 1.关闭不必要的服务...

elk部署(实战一)

项目介绍: 系统:redhat7.6 软件:es+logstash+kibana  6.1 IP+主机名  192.168.0.10    elk1 192.168.0.10    elk2 192.168.0.10    elk3 新建主机初始化安装依赖包 yum -y install tree lrzsz nmap nc telnet vim wget...

Linux下利用fcntl改变Socket阻塞方式

用以下方法将socket设置为非阻塞方式  int flags = fcntl(socket, F_GETFL, 0); fcntl(socket, F_SETFL, flags | O_NONBLOCK); 用以下方法将socket设置为非阻塞方式 int flags = fcntl(socket, F_GETFL, 0); fcntl(socket...

c语言入门-01

当我们学c语言我们学些什么. [1]编译机制 当我们写好c的代码,生产了程序,这中间到底做了些什么?    这个就是c语言的编译过程 我们分别来解析这上面的过程。 我们写出我们第一个c程序。   1 #include<stdio.h> 2 3 int main(){ 4 // print hello world...