【angular2】引入jquery及Bootstrap第三方库

我们在使用angular2的时候难免不会遇到引入其他库的情况,比如一些UI库之类的。下面记录下如何引入jquery和bootstrap。

1、使用angular-cli工具先初始化一个项目框架(至于怎么搭建angular2的环境,请参看 官方文档),比如我的项目名为: demo
这里有个坑需要提一下
我们使用angular-cli初始化项目前需要安装好git工具(这里下载),并且将git.exe配置到环境变量中,否则会导致angular-cli在构建的过程中卡死
例如:
初始化项目

项目创建时间有点长,耐心等待,构建完毕后,目录结构大致如下:
初始化的目录结构

2、使用命令行进入刚刚创建好的工程目录(我的目录是:G:\\angular2\demos).

cd angular2/demos

进入目录

3、安装jquery库。(–save表示自动向目录下的package.json中添加依赖申明)

npm install jquery --save

4、安装Bootstrap库。

npm install bootstrap --save。

两个都安装完毕后,我们打开demos下的package.json,查看增加了两行依赖,如下:
示例

5、这时候,我们打开目录下的 node_modules 目录,能找得到两个文件夹,分别是jquery和bootstrap。我们需要将jquery和bootstrap的库添加到 .angular-cli.json 中。我们打开目录下的 .angular-cli.json文件,在styles和scripts中添加上代码(其中style.css是原来就有的)。

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

例如:
示例

6、最后一步,我们为typeScript添加上类型申明库。

// 添加这个是为了让typeScript认识$符号
npm install @types/jquery --save-dev

// 添加上bootstrap的申明
npm install @types/bootstrap --save-dev

运行完毕后,我们可以看到目录下的package.json中的devDependencies多了两行申明。如下:
这里写图片描述

至此,我们的库添加完毕。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LanTingShuXu/article/details/78886635
文章标签: angular bootstrap jquery
个人分类: angular2
想对作者说点什么? 我来说一句
相关热词

没有更多推荐了,返回首页

关闭
关闭
关闭