文档章节

关于在angular2中引入第三方插件或者框架(jquery)

前端大白
 前端大白
发布于 2017/04/30 11:19
字数 390
阅读 199
收藏 0

由于本人也是初入angular2不久,很多问题也许解决了,确不知其原由,也有一些问题,解决了后面又出来同样的错误,关于这些,请谅解.

关于这个问题,我自己也是想了很久,总算是能用上了,

想在angular2中引用jquery的话,高大上的一个方法是,在package.json中的dependencies中写入,执行cnpm i;安装;

 "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "tinymce": "4.5.3",
    "jquery": "^3.1.1",
    "zone.js": "^0.8.4"
  },

然后在需要用jquery的组件中声明: declare var $:any;

import { Component, OnInit } from '@angular/core';
declare var $:any; 


@Component({
    moduleId: module.id,
    selector: 'myIndex',
    styleUrls:['../../assets/css/index.css'],
    templateUrl: 'index.component.html'
})

或者是在typings.d.ts中声明引入,这样就可以在所有的组件中直接使用,而不需要在每个组件中重复声明:

代码如下:

declare var JQuery: any;
declare var jQuery: any;
declare var $: any;

最后一步,在.angular.cli.json中引入jquery.min.js文件;也许会有很多人问了,不是已经安装好了 ,为什么还要另外引入呢?我也求解!然而没有一步,$就是undefined!

最后一步也可以这样做,在首页,src下面的index.html中,直接引入jquery.min.js,也是可以的,不过这样就显的有点Low了!

欢迎讨论!

© 著作权归作者所有

共有 人打赏支持
前端大白
粉丝 12
博文 77
码字总数 34495
作品 0
杭州
程序员
angularJS之站在jQuery的肩膀上

jQuery:用更少的代码,实现更强悍的功能 托互联网日新月异发展的福,浏览器变成了人们接入互联网的入口,而JavaScript 这个曾经的小语种,终于成功地站到了舞台的中央,唤起了开发者的兴趣。...

笔阁
2015/03/16
0
0
Angularjs的$apply及其优化使用

今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply(),然后就惊喜...

北辰狼月
07/01
0
0
AngularJS中的$http.post与jQuery.post的区别

很多时候我们需要用ajax提交post数据,angularjs与jq类似,也有封装好的post。 但是jQuery的post明显比angularjs的要简单一些,人性化一些。 AngularJS: $http.post('do-submit.php',myDat...

tommyfok
2014/07/06
0
7
对比AngularJS/jQueryUI/Extjs:没有一个框架是万能的

AngularJS不能做什么?对比Angular/JSjQueryUI/Extjs 框架就好比兵器,你得明白你手里拿的是屠龙刀还是倚天剑,刀法主要是砍,剑法主要是刺。对于那些职业喷子和脑残粉,小僧送你们两个字:呵...

zero2hero
2015/04/16
0
4
StackOverFlow精彩问答赏析:有jQuery背景的开发者如何建立起AngularJS的思维

【编辑注】本文来自StackOverFlow上How do I “think in AngularJS” if I have a jQuery background?一题中得票最高的回答。该回答得票超过3000次,回答者Josh David Miller是活跃于开源社区...

玛雅牛
2014/01/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

兄弟连区块链教程之以太坊源码分析交易数据分析

交易的数据结构 交易的数据结构定义在core.types.transaction.go中,结构如下: type Transaction struct {data txdata// cacheshash atomic.Valuesize atomic.Valuefrom atomic.V...

兄弟连区块链入门教程
19分钟前
1
0
Tomcat优化经验之谈

Tomcat优化经验之谈 程序员小新人学习 2018-07-23 12:09:36 由于刚做完一个tomcat,jboss,Oracle性能优化项目,想做个总结。写写项目过程中对他们优化过程的理解。 tomcat安装配置就不讲啦(...

两广总督bogang
25分钟前
2
0
Spark中foreachPartition和mapPartitions的区别

spark的运算操作有两种类型:分别是Transformation和Action,区别如下: Transformation:代表的是转化操作就是我们的计算流程,返回是RDD[T],可以是一个链式的转化,并且是延迟触发的。 Ac...

张泽立
28分钟前
2
0
git reset 和 git revert, git log 和 git reflog 比较

前言:仙儿苦设相思局,寻欢误入冷香处 故事背景: 那一晚 月黑风高之夜 李寻欢 在自诩为江湖正义的一群伪君子设计好的圈套(repository)中做了(commit)三件事:              ...

猿神出窍
38分钟前
1
0
kotlin使用spring mvc(一)

过滤器Filter,是Servlet的一种技术。可通过Filter,对请求进行拦截,比如判断用户是否登录、验证黑名单等并且可对请求进行预处理。 接下来介绍使用WebFilter配置过滤器并实现读取cookie判断...

weidedong
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部