Angular4.0引入第三方框架,eg: bootstrap、jquery
最近学习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的更多相关文章
- ionic3.0--angular4.0 引入第三方插件库的方法
ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings 2.搜索你 ...
- Angular 引入第三方框架方法(如Jquery,Bootstrap)
1.npm i jquery --save / npm i bootstrap --save 2.angular.json 引入路径 3.引入Jquery和Bootstrap的类型描述文件 ...
- Angular4.x 引入第三方 JS
引入 Jquery 使用 angular-cli 新建 angular项目 1.安装 jquery npm install jquery --save 2..angular-cli.json 中引入 ...
- angular4,6 引入第三方插件的方法
话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli ...
- Angular4.0引入laydate.js日期插件方法
Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...
- vue项目中引入第三方框架
element-ui npm install element-ui -- save; main.js中 import Element from 'element-ui'; import 'elemen ...
- angular4(2-1)angular脚手架引入第三方类库(jquery)
欢迎加入前端交流群交流知识&&获取视频资料:749539640 如何在angular4脚手架中引入第三方类库呢比如jquery.swiper.bootstrap...... 例如引入j ...
- 走进webpack(2)--第三方框架(类库)的引入及抽离
在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...
- 基于webpack实现多html页面开发框架七 引入第三方库如jquery
一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已 ...
随机推荐
- HTTP的简单的解析
HTTP 中文全称为超文本传输协议是一种为分布式,合作式,多媒体信息系统服务,面向应用层的协议.它是一种通用的,不分状态(stateless)的协议,除了诸如名称服务和分布对象管理系统之类的超文本用途 ...
- Docker安装准备
第一次写作下笔记: 以centos6.5安装yum优先级插件 yum install yum-priorities 1.epel简介: https://fedoraproject.org/wiki/E ...
- 关于乱码(MessyCode)问题
乱码本质:读取二进制时采用的编码和最初将字符转成二进制时的编码不一致 编码时(得二进制数组时)不抛出异常,数据就不会被破坏 Java关于乱码(MessyCode)问题 Java使用的是Unicode编 ...
- ssh hibernate修改数据库
org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in rea ...
- java笔记 -- java变量与常量的声明
变量: 在Java中, 每一个变量属于一种类型. double salary int vacationDays; long earthPopulation; boolean done; 命名: 以字母 ...
- Asp.net core 学习笔记 SignalR
refer : https://kimsereyblog.blogspot.com/2018/07/signalr-with-asp-net-core.html https://github.com/ ...
- [术语] CRUD 增删改查
Data Manipulation Language, DML 数据操纵语言Insert update delete CRUD :create read update delete
- 『PyTorch』第十五弹_torch.nn.Module的属性设置&查询
一.背景知识 python中两个属相相关方法 result = obj.name 会调用builtin函数getattr(obj,'name')查找对应属性,如果没有name属性则调用obj.__ge ...
- 基于socket实现http请求
异步非阻塞模块原理 # 基于socket实现http请求 import socket # 多路IO复用模块 import select socket_list= [] url_list = [&quo ...
- CRM INBOX 结果增强功能
前段时间接到的需求:INBOX(ICCMP_INBOX)查询结果,多选后弹出选择用户的框,选择用户,带入到单据的PARTNER FUNC的工程师中,并修改单据状态. 其实标准的INBOX的Compon ...