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

原创 2017年12月24日 19:30:11

我们在使用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 2 版本的 ng-bootstrap 初体验

最近 angular-ui 团队终于正式发布了基于 Angular 2 的 Bootstrap 界面库ng-bootstrap , 工作中一直用 AngularJS 1.x 的UI Bootstrap...
  • n_fly
  • n_fly
  • 2016-10-25 11:43:08
  • 11083

Angular2中使用bootstrap

下载 ng-bootstrap ng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式: npm inst...
  • chenyidong521
  • chenyidong521
  • 2016-11-02 20:53:30
  • 4530

《Angular2入门系列实践》——如何添加ng-bootstrap插件

配置环境 1.cnpm安装ng-bootstrap模块cnpm install @ng-bootstrap/ng-bootstrap --save 随后package.json中显示依赖: 2....
  • changyinling520
  • changyinling520
  • 2017-09-02 17:13:16
  • 2564

angular2 引入jquery 和 semantic-ui

最近在跟着《Angular权威教程》学习Angular2,书上用的是semantic-ui来自动给元素添加样式,依样画葫芦呗,安装一下semantic-ui.然后由于semantic-ui的js部分是...
  • RUCwang
  • RUCwang
  • 2018-02-05 20:04:45
  • 166

学习Angular4bootstrap样式无法引入的两种解决方法(一)

本人刚开始根据网上的文档和一些视频教程开始学习Angular4,在学习过程中遇到了一个问题。搭建好项目架构后,引入jquery和bootstrap后,样式和JS无法引入成功,百度后发现网上很多人遇到相...
  • sxl131415
  • sxl131415
  • 2018-01-30 20:39:24
  • 944

Angular+Bootstrap实现的一个管理系统

  • 2017年02月22日 09:44
  • 16.36MB
  • 下载

angular-cli 使用 bootstrap_angular 4.0 怎样使用 bootstrap

转载自  http://www.ngui.cc/index.htmlangular 使用bootstrap ngx-bootstrap 文档地址  http://ngx-bootstrap.com/#...
  • wuchangjian
  • wuchangjian
  • 2018-02-08 11:35:03
  • 273

Angular5 + Bootstrap4使用示例

前段时间Bootstrap发布4.0正式版。官网地址:https://getbootstrap.com/ 如何将Angular5与Bootstrap4结合使用呢? 使用Angular-cli初始化...
  • u014291497
  • u014291497
  • 2018-02-02 22:36:06
  • 734

如何在Angular4中引入jquery

1、anjq是我的项目名称: 在anjq目录下打开dos命令窗口,然后依次执行如下命令: npm install --save jquery npm install @types/jquery --...
  • zhangbest2009
  • zhangbest2009
  • 2017-09-15 16:08:44
  • 4823

Angular引入第三方库

如果我们想在Angular中使用第三方的库,比如jquery或bootstrap等,该如果做呢?首先我们先来看看package.json这个文件,在目录介绍那篇博客中我们已经知道,package.js...
  • yuzhiqiang_1993
  • yuzhiqiang_1993
  • 2017-05-05 20:31:29
  • 8440
收藏助手
不良信息举报
您举报文章:【angular2】引入jquery及Bootstrap第三方库
举报原因:
原因补充:

(最多只允许输入30个字)