最近学习angular4.0,在练习是需要使用jquery和bootstrap。但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确。花了一些时间终于捣腾出来了,把使用的方法分享给大家。进入正题,angular导入第三方框架几乎都是一个套路。拿jquery和bootstrap(bootstrap依赖于jquery,所以使用bootstrap必须在jquery的基础之上)举例:

1、node环境、cnpm淘宝镜像、angular cli、以及搭建好的angular4.0项目这些前提条件不多说,不懂的可以自行百度,资料很多;

2、在对应的项目目录下执行: cnpm i jquery -- save

cnpm i bootstrap --save

执行完后,在package.json文件里面的dependencies可以查看jquery和bootstrap的版本信息:

3、由于angular是使用TypeScript,所以还需安装对应的类型描述模块,是TypeScript认识jquery和bootstrap的语法。执行以下命令安装:

cnpm i @types/jquery --save-dev

cnpm i @types/bootstrap --save-dev

执行完后,在package.json文件里面的devdependencies可以查看jquery和bootstrap的类型描述模块版本信息:

4、好!现在已经安装好了,但是你会发现为啥页面中的样式并没有bootstrap的效果?那是因为我们只是安装了,但是并没有引入相关的js和css:在.angular-cli.json文件中的apps下的styles和scripts里分别写入:

"../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css",

"../node_modules/_jquery@3.2.1@jquery/dist/jquery.js",
                                                        "../node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.min.js"

像这样:

值得注意的是这里的_bootstrap@3.3.7@bootstrap这个位置(可能直接写:bootstrap;原因不明)。

5、最容易被忽略也是最重要的一步!!!重启项目!!!

Angular4.0引入第三方框架,eg: bootstrap、jquery的更多相关文章

  1. ionic3.0--angular4.0 引入第三方插件库的方法

    ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings  2.搜索你 ...

  2. Angular 引入第三方框架方法(如Jquery,Bootstrap)

    1.npm i jquery --save    /    npm i bootstrap --save 2.angular.json 引入路径 3.引入Jquery和Bootstrap的类型描述文件 ...

  3. Angular4.x 引入第三方 JS

    引入 Jquery 使用 angular-cli 新建 angular项目 1.安装 jquery npm install jquery --save 2..angular-cli.json 中引入 ...

  4. angular4,6 引入第三方插件的方法

    话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli ...

  5. Angular4.0引入laydate.js日期插件方法

    Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...

  6. vue项目中引入第三方框架

    element-ui npm install element-ui -- save; main.js中 import Element from 'element-ui'; import 'elemen ...

  7. angular4(2-1)angular脚手架引入第三方类库(jquery)

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 如何在angular4脚手架中引入第三方类库呢比如jquery.swiper.bootstrap...... 例如引入j ...

  8. 走进webpack(2)--第三方框架(类库)的引入及抽离

    在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...

  9. 基于webpack实现多html页面开发框架七 引入第三方库如jquery

    一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已 ...

随机推荐

  1. HTTP的简单的解析

    HTTP 中文全称为超文本传输协议是一种为分布式,合作式,多媒体信息系统服务,面向应用层的协议.它是一种通用的,不分状态(stateless)的协议,除了诸如名称服务和分布对象管理系统之类的超文本用途 ...

  2. Docker安装准备

    第一次写作下笔记: 以centos6.5安装yum优先级插件 yum install yum-priorities 1.epel简介: https://fedoraproject.org/wiki/E ...

  3. 关于乱码(MessyCode)问题

    乱码本质:读取二进制时采用的编码和最初将字符转成二进制时的编码不一致 编码时(得二进制数组时)不抛出异常,数据就不会被破坏 Java关于乱码(MessyCode)问题 Java使用的是Unicode编 ...

  4. ssh hibernate修改数据库

     org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in rea ...

  5. java笔记 -- java变量与常量的声明

    变量: 在Java中, 每一个变量属于一种类型. double salary int vacationDays; long earthPopulation; boolean done; 命名: 以字母 ...

  6. Asp.net core 学习笔记 SignalR

    refer : https://kimsereyblog.blogspot.com/2018/07/signalr-with-asp-net-core.html https://github.com/ ...

  7. [术语] CRUD 增删改查

    Data Manipulation Language, DML 数据操纵语言Insert update delete CRUD :create read update delete

  8. 『PyTorch』第十五弹_torch.nn.Module的属性设置&查询

    一.背景知识 python中两个属相相关方法 result = obj.name 会调用builtin函数getattr(obj,'name')查找对应属性,如果没有name属性则调用obj.__ge ...

  9. 基于socket实现http请求

    异步非阻塞模块原理 # 基于socket实现http请求 import socket # 多路IO复用模块 import select socket_list= [] url_list = [&quo ...

  10. CRM INBOX 结果增强功能

    前段时间接到的需求:INBOX(ICCMP_INBOX)查询结果,多选后弹出选择用户的框,选择用户,带入到单据的PARTNER FUNC的工程师中,并修改单据状态. 其实标准的INBOX的Compon ...