Angular4中使用jquery和bootstrap

Angular4中使用jquery和bootstrap

在angular开发中某些场景可能需要jquery和bootstrap,那么如何使用它们呢?

Angular中引用jquery

安装

第一步,我们使用npm安装jquery

1
npm install --save jquery

使用

我们在ts文件中引入jquery。

1
2
3
import * as $ from 'jquery';
// 可以在ngOninit方法中打印进行测试
console.log($('body'));

引入jquery类型

在使用过程中,好像是没有什么问题的,但是好像通过点号调用jquery方法时,没有任何代码提示(我使用的是VSCode)。原因是编辑器不识别jquery的类型,所以不知道jquery中可以调用哪些方法。因此我们需要引入类型。

1
npm install --save @types/jquery

这个时候,我们再通过点号调用jquery方法时,就会有代码提示了。如:

1
$('body').hide();

Angular中引用bootstrap

如何在angular中使用bootstrap呢?方法是差不多的。首先我们安装bootstrap。

1
npm install --save bootstrap

我们主要用到的是bootstrap.min.css和bootstrap.min.js。需要在.angular-cli.json中进行配置。

1
2
3
4
5
6
7
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

我配置之后还是不生效,可能是由于我ng eject后配置出了些问题,后续改下webpack配置应该可以实现。这里我先放在index.html中引用了。

1
2
3
4
5
<!-- 引入js -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">

配置完成后,localhost可以正常使用bootstrap了。但是打包时出现问题了。因为index.html引用的是node_modules里面的资源,而我的webpack资源配置没有加上它们,导致404问题。于是我把这三个文件放在了assets里面,改成如下引用方式:

1
2
3
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×