在angular里面使用jQuery和bootstrap

本文详细介绍如何在Angular项目中集成jQuery与Bootstrap。步骤包括通过npm安装jQuery与Bootstrap及其类型定义文件,配置Angular CLI以使用这些库,并在项目中正确引用它们。最后,通过创建一个测试组件验证集成的成功。

第一步:

1.在你的项目目录下面:npm install jquery --save

--save是将jQuery加入package.json里面

2.在项目目录下面npm install bootstrap --save

安装完成后:

"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.2.1",

第二步:

在angular/cli里面将他们加到项目里面:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
 "../node_modules/jquery/dist/jquery.js",
 "../node_modules/bootstrap/dist/js/bootstrap.js"
 ],


第三步:

安装类型定义文件,因为jQuery和bootstrap是js文件angular用的是typescript,无法编译,必须要安装他们各自对用的类型对应文件

1.npm install @types/jquery --save -dev

2.npm install @types/bootstrap  --save -dev

第四步:

将jquery放入assets文件夹

在index.html里面引入相应js


第五步:

在component里面声明,在任何拥戴的地方使用都需要声明


第六步测试是否可以用了

ng g component  xx生成叫xx的组件



请使用手机"扫一扫"x
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

傻小胖

如果觉得不错就给点赏钱吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值