【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多了两行申明。如下:
这里写图片描述

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Angular2中如何使用jquery

Angular2是以TypeScript语言作为默认编码语言,所以你看到的全部都是.ts结尾的文件。 那什么是TypeScript 首先,它是一个编译型语言;既然是编译型,那么你像重构、导航、...
  • qq_38321709
  • qq_38321709
  • 2017年04月14日 17:18
  • 5607

angular2中使用第三方js库

本文以jquery 为例 第一种:有对应的声明文件的 1、用命令安装jQuery的声明文件。(声明文件是为了ide完美智能提示) npm install -D @types/jque...
  • cut001
  • cut001
  • 2017年04月14日 12:04
  • 3756

angular4中解决引入第三方库不起作用的问题

在angular4中,引入如JQuery和Bootstrap之类的库时,有时候不起作用,下面我们先来看一下一般我们会怎样做: 1、安装第三方库 npm install bootstrap -...
  • jiapeionline
  • jiapeionline
  • 2017年06月29日 09:33
  • 2925

Angular2中使用bootstrap

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

angular-cli下使用bootstrap

1.只使用bootstrap.css在angular-cli.json中配置: "styles": [ "styles.scss", "../node_mod...
  • qq451354
  • qq451354
  • 2017年02月13日 14:15
  • 5172

angular4 引入bootstrap

1、创建项目npm install -g @angular/cli ng new my-app cd my-app ng serve --open npm install ngx-bootstra...
  • angularliu
  • angularliu
  • 2017年06月22日 23:28
  • 4363

angular使用bootstrap方法手动启动

要启动一个angular应用,可以使用ng-app指令,也可以调用bootstrap方法手动启动。先看一下angular的bootstrap方法。 angular.bootstrap(element,...
  • shidaping
  • shidaping
  • 2016年08月29日 11:37
  • 4431

在 Angular 项目中添加插件 ng-bootstrap

摘要:本文将介绍在 Angular4 项目中配置 ng-bootstrap
  • u011642663
  • u011642663
  • 2017年07月02日 20:54
  • 2968

Angular引入第三方库

如果我们想在Angular中使用第三方的库,比如jquery或bootstrap等,该如果做呢?首先我们先来看看package.json这个文件,在目录介绍那篇博客中我们已经知道,package.js...
  • yuzhiqiang_1993
  • yuzhiqiang_1993
  • 2017年05月05日 20:31
  • 7130

如何添加bootstrap到Angular工程

如何添加bootstrap到Angular工程
  • ITLionWoo
  • ITLionWoo
  • 2017年10月26日 19:08
  • 738
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【angular2】引入jquery及Bootstrap第三方库
举报原因:
原因补充:

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