在angular开发中某些场景可能需要jquery和bootstrap,那么如何使用它们呢?
Angular中引用jquery
安装
第一步,我们使用npm安装jquery
npm install --save jquery
使用
我们在ts文件中引入jquery。
import * as $ from 'jquery';
// 可以在ngOninit方法中打印进行测试
console.log($('body'));
引入jquery类型
在使用过程中,好像是没有什么问题的,但是好像通过点号调用jquery方法时,没有任何代码提示(我使用的是VSCode)。原因是编辑器不识别jquery的类型,所以不知道jquery中可以调用哪些方法。因此我们需要引入类型。
npm install --save @types/jquery
这个时候,我们再通过点号调用jquery方法时,就会有代码提示了。如:
$('body').hide();
Angular中引用bootstrap
如何在angular中使用bootstrap呢?方法是差不多的。首先我们安装bootstrap。
npm install --save bootstrap
我们主要用到的是bootstrap.min.css和bootstrap.min.js。需要在.angular-cli.json中进行配置。
"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中引用了。
// 引入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里面,改成如下引用方式:
<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">