在Angular项目动态引入JS模块
来源:互联网 发布:咫尺网络 微页 编辑:程序博客网 时间:2024/06/07 05:51
背景
由于Angular项目默认使用ts作为开发语言,但是Angular本身是一个新的框架,导致很多好用的js库都没有对应的ts版本。所以在开发angular项目的时候存在Angular项目的场景。
下面以引入jquery为例,介绍两种方法:
方法一
直接在应用入口index.html使用script方式引入:
<script src="path/jquery.js"></script>
这种方法的特点:
1、全局可以使用;
2、存在冗余,可能只有个别的模块使用到jquery;
3、在入口页引入的话,顺序加载会影响首页渲染的速度;
方法二
允许typescript编译器使用编译js文件,并使用模块加载器动态引入:
在angular项目中,修改tsconfig.json文件:
compilerOptions.allowJs = true;
下载jquery.js放入项目目录下的asserts;
确保项目目录下的.angular-cli.json文件,在apps.asserts数组中存在”asserts”;
由于jquery本身默认支持commomJs模块加载方式,所以可以在任何需要使用jquery的组件中直接载入即可:
import * as $ from "../vendors/jquery.min.js";console.log($("body").height());
方法二的特点:
1、动态载入,按需加载,不存在冗余;
2、更加ts/es6;
阅读全文
1 0
- 在Angular项目动态引入JS模块
- angular 模块引入简单实例
- angular 常用模块import引入
- 在Vue项目中引入D3.js
- Python 动态引入模块
- Node.js模块引入
- 动态引入js/cs
- 动态引入js文件
- 动态引入js文件
- js动态引入css
- Yeoman生成的angular项目引入angular-gettext
- js动态引入JS文件
- Node JS之模块引入
- 在Angular组件中引入外部样式
- jquery1.8.0.js 引入myeclipse项目中 在undefined 处报错
- js、css的动态引入
- 动态更改js引入脚本
- angular js 根据条件决定是否引入script标签
- SAX解析
- Oracle、weblogic开机启动
- JAVA8新特性简析
- sass进阶-(函数与调试)
- 微信小程序开发(6)---列表渲染
- 在Angular项目动态引入JS模块
- POJ 3281 Dining
- 一个panic bug的分析过程(一)
- Hibernate 乐观锁之Timestamp
- Github上README.md文件——Markdown语言详解
- 【安全牛学习笔记】在线密码破解-hydra、在线密码破解-medusa、离线密码破解
- eclipse任务栏图标没有Java EE IDE字样
- 大四秋招总结
- Flex 学习之路之十二 用户接口user interface 使用parentDocument 属性