Angular TypeScript开发环境集成jQuery扩展插件

集成步骤:

1、安装jquery极其ts定义文件

npm install jquery --save
npm install --save-dev @types/jquery

2、页面加载jquery:

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

3、调用扩展方法:

$("selector").pluginMethod();   

4、运行ng serve:

ng serve -o

这个里面有个问题,就是我们不是直接去尝试调用jquery plugin,jquery接口的ts定义扩展是通过plugin的d.ts文件去扩展的,我们调用jquery本身,在编译时,编译器自动去寻找相关的plugin定义并扩展原始jquery的接口。搞清楚这一点,很多基于jQuery选择器函数的JS库集成就方便多了。

参考资料:https://stackoverflow.com/questions/43934727/how-to-use-jquery-plugin-with-angular-4

时间: 2024-10-22 03:00:03

Angular TypeScript开发环境集成jQuery扩展插件的相关文章

搭建typescript开发环境最详细的全过程

本文<搭建typescript开发环境最详细的全过程>的源代码在 https://github.com/lingsbb/ts_demo/ 下载. 搭建typescript开发示例https://github.com/Microsoft/TypeScriptSamples typescript案例https://www.tslang.cn/samples/index.html 安装git:http://git-scm.com/download下安装git 安装node:https://nodej

第二章 TypeScript 开发环境搭建

Mac OS X 下 TypeScript 开发环境搭建 一.集成开发环境 WebStrom VSCode 二.安装 TypeScript Homebrew(macOS 缺失的软件包管理器) ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" npm(Node Package Manager),是 Nodejs 的包管理器 brew install node

jQuery扩展插件以及正则相关函数练习

一.jQuery扩展插件 二.相关正则函数:

Typescript 开发环境安装、Node.js安装以及输出HelloWorld

1.为什么要学习Typescript 语言呢 原因很简单,当然是为了工作呀,因为工作使我接触到了Typescript语言,感觉它比较像C#.Java 这样面向对象的语言,由于最近在使用它开发项目所以系统学习一下,在此记录一下学习过程. 2.Typescript 语言百度百科介绍 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.TypeScript还遵循ES6.ES5规范,同时因为是Ja

Typescript 开发环境的最佳实践

Typescript 开发环境的最佳实践 0?? git init(略) 1???? 初始化:$ yarn add -D ts-node typescript 2?? 生成 tsconfig.json:$ yarn tsc -init 3?? 配置 TSLint:$ yarn add tslint -D 4?? 生成 tslint.json:$ yarn tslint --init 5?? 创建 src/index.ts:$ mkdir src && echo "console.

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

typescript-koa-postgresql 实现一个简单的rest风格服务器 —— typescript 开发环境配置

最近需要用 nodeJS 写一个后台程序,为了能够获得 IDE 的更多代码提示,决定用 typescript 来编写,随便也学习下 ts,在这记录下实现过程. 1.新建文件夹 typescript-koa-postgresql,初始化项目 yarn init -y 2.安装 typescript yarn add typescript @types/node --dev 3.配置  typescript 编译环境,在项目根目录下新建文件 tsconfig.json 1 { 2 "compiler

jquery 扩展插件方法

分析插件jquery.countdown.js 1 (function($) { 2 $.fn.countdown = function(options) { 3 // default options 4 var defaults = { 5 attrName : 'data-diff', 6 tmpl : '<span class="hour">%{h}</span>小时<span class="minute">%{m}<

15款web设计师和前端开发必备的Chrome扩展插件

Responsive Web Design Tester 方便快捷的测试响应式网站的小工具 Window Resizer 模拟不同屏幕分辨率的工具 Page Ruler 绘制页面的分割线,帮助来调整和控制页面中的元素 Dimensions 一个帮助设计师控制屏幕尺寸的工具 ColorZilla 提供了颜色选择器,渐变生成器及其其它高级功能的插件 WhatFon t 最简单的方式来识别页面的文字内容 TypeWonder 快速帮助你检测页面字体 CSS-Shack 一个web和桌面应用,允许你创建