文档章节

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

前端大白
 前端大白
发布于 2017/04/30 11:19
字数 390
阅读 172
收藏 0
点赞 0
评论 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了!

欢迎讨论!

© 著作权归作者所有

共有 人打赏支持
前端大白
粉丝 9
博文 77
码字总数 33880
作品 0
杭州
程序员
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro ⋅ 05/30 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

jQuery UI组件集 - Wijmo

Wijmo是用于创建桌面及移动Web应用程序的HTML5前端控件集。从交互式图表到强大的表格控件,Wijmo包含了用户所需要的一切。Wijmo建立在标准的JavaScript库基础上,就像jQuery UI和jQuery Mobi...

匿名 ⋅ 2010/10/28 ⋅ 0

基于AngularJS的个推前端云组件探秘

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速...

个推 ⋅ 04/26 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608 ⋅ 04/19 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

线程池

一、线程池:提供了一个线程队列,队列中保存着所有等待状态的线程。避免了创建与销毁额外开销,提高了响应的速度。 二、线程池的体系结构: java.util.concurrent.Executor : 负责线程的使用...

stars永恒 ⋅ 28分钟前 ⋅ 0

你值5K还是15K?实战案例,测测你的分析功力

本文源自陈老师遇到的真实案例。 老板说:“我们今年准备参加展会,做一年。以前我没参加过,没关系,这里有一份展会数据,你回去分析下哪些有价值,后边组织的时候有个指导”。现在你收到任...

加米谷大数据 ⋅ 30分钟前 ⋅ 0

中文转英文功能

package com.sysware.task.util;import net.sourceforge.pinyin4j.PinyinHelper;import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;import net.sourceforge.pinyin4j.for......

AK灬 ⋅ 31分钟前 ⋅ 0

JNI Java层类关联C/C++层的类

Android开发时,因为要实现某某功能,需要集成算法公司的算法库(so库),这就需要自己编写JNI。 通常这些库提供的接口可以概况成1、初始化 2、算法处理 3、释放 4、打印版本号 初始化后会返...

国仔饼 ⋅ 34分钟前 ⋅ 0

maven下载jar包改为阿里云的maven库

一:修改maven安装路径中conf文件夹下的setting.xml文件 <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/......

夜醒者 ⋅ 34分钟前 ⋅ 0

电商用户行为分析大数据平台相关系列10-基础数据结构分析

电商用户行为分析大数据平台相关系列1-环境介绍 电商用户行为分析大数据平台相关系列2-HADOOP环境搭建 电商用户行为分析大数据平台相关系列3-HIVE安装 电商用户行为分析大数据平台相关系列4...

xiaomin0322 ⋅ 35分钟前 ⋅ 0

使用readLine()方法遇到的坑

下午玩 TCP/IP 的 Socket 通信时,使用 BufferedReader 的 readLine() 遇到了一个坑,现在终于解决了,特此记录下来。 程序很简单,客户段从控制台读取用户输入,然后发送至服务器端,主要代...

孟飞阳 ⋅ 36分钟前 ⋅ 0

基于Hadoop集群的Hive安装配置(Derby数据库)

Hive是一个数据仓库基础工具在Hadoop中用来处理结构化数据,提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行(具体的Hive架构大家自行搜索)。接下来主要讲下Hadoop集群下...

海岸线的曙光 ⋅ 37分钟前 ⋅ 0

CoreOS裸机iso安装和相关配置

裸机通过iso安装CoreOS,个人趟了很多坑,以下就是完整的从零开始部署和配置的过程,希望对大家有用。 一、安装CoreOS到硬盘 1. 准备Live iso镜像,制作好usb启动盘 Live iso下载地址 2. 搭建...

ykbj ⋅ 41分钟前 ⋅ 0

jquery控制表格锁列(转)

表格已经完成后新加的需求,要实现锁表格的第一列。很多带这种效果的都是js封装的框架或者具体某种框架的组件,不适用解决当前问题。作为后端开发又实在不熟样式,搜到了一个可以用的,虽然样...

刘昌鑫 ⋅ 44分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部