Angular中引用外部js(比如jQuery库或者自己写的js代码)

最新推荐文章于 2023-01-10 14:22:55 发布
最新推荐文章于 2023-01-10 14:22:55 发布
阅读量2.8k 收藏 4
点赞数
分类专栏： 前端 文章标签： javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43536068/article/details/104295875
版权
本文介绍了如何在Angular项目中引入外部JavaScript文件，如jQuery库和自定义JS代码。通过在src目录下创建utils文件夹，编写common.js，并在组件中调用这些函数，实现了在Angular组件中使用外部JS的功能。在ngOnInit()中调用这些函数，运行程序后可以在控制台看到预期的输出。
摘要由CSDN通过智能技术生成

前言

关于这个问题我目前只调试成功了一种方法
我以angular官方中文网的官方教程"英雄指南"https://angular.cn/tutorial
为例子,在上面添加几个js代码

步骤

我们在项目的src文件夹下创建utils文件夹(其实名称可以随意起)

在这里插入图片描述

在utils文件夹下新建common,js

在这里插入图片描述

common.js内容如下

其中common是一个包含了名为showInfo的方法的对象
fun_1是一个存储了一个函数的变量

var common = {
   
　　showInfo: function(name,
最低0.47元/天 解锁文章
TXT85
关注
专栏目录
Angular 引入第三方js库
小妖666个人笔记
01-02 2313
angular想引用sortablejs这个拖拽插件，因为是第三方库，没有index.d.ts声明文件，在引入的过程中太过曲折。我会先把最后结果粘出来，然后再将曲折过程写出来，毕竟研究了这么半天。 画面 拖动后效果： 法一： 下载包 npm install sortablejs --save app.component.html <ul> <ng-contai...
Angular引入自己写的js或者其他
qq_43205711的博客
11-16 4678
第一，在tsconfig.json设置compilerOptions的allowJs属性为true; 第二，在index.html页面加入要引用的js；如; 第三，直接使用方法即可使用。
Angular7中引用外部JS文件
清晨-阳光的博客
06-16 1817
简要记录在Angular7中引用外部JS文件的步骤。
angular工程中导入外部js
weixin_36430673的博客
07-30 3022
实战中，需要在angular 工程中导入外部js文件。常用的有两种导入方式。 方式一：全局导入： 1、先把下载好的js 文件放入指定位置 2、然后在Angular.json中引入相关js文件 3、在所需的组件里单独引入 方式二：利用Script.js 进行局部引用 1、先把下载好的js 文件放入指定位置 2、在所需的组件里单独引入 ...
Angular 引入外部 js 文件的方法（引入 jQuery）
热门推荐
chanchaw的专栏
08-13 1万+
Angular 引入外部 js 文件的方法（引入 jQuery） 在 tsconfig.json 中设置允许使用外部 js，如下图 下载 jQuery 文件拷贝到项目的目录：assets/lib 下（这里的 lib 是自己创建的目录） 保证 angular.json 中有对于 assets 的声明 调用方法： import * as ejs from 'src/assets/...
【angular-基础教程】引入外部js
qq_41243979的博客
11-24 2957
步骤 1.将引入的外部js文件放到assets文件下 2.在angular.json文件中找到scripts配置js文件路径 (注意不要添加到test标签下的scripts中) "scripts": [ "src/assets/lib/echarts.js", "src/assets/lib/jquery-2.1.1.min.js", "src/assets/js/test.js", "src/assets/js/swiper.min.js", "src/assets
angular2gridster：众所周知的Gridster的Angular实现（没有jQuery，没有外部库，只有Angular和Rx.js）
01-29
众所周知的Gridster的Angular实现（没有jQuery，没有外部库，只有Angular和Rx.js）。 提供了更全面的文档。 可以在和跟踪开发进度。 版本： 版本9.x可与Angular 9.x一起使用。 版本8.x可与Angular 8.x一起使用。...
详解Angular-Cli中引用第三方库
08-30
在添加第三方JavaScript库时，比如JQuery，你需要将库文件的路径添加到这个数组中。路径是相对于网站根目录的，而不是相对于`src`目录。 ####styles数组 `styles`数组类似于`scripts`，它用于存放CSS样式文件。添加...
angular2中使用第三方js库的实例
10-18
在Angular2中使用第三方JavaScript库，是为了增强应用功能或提升开发效率。以下知识点详细介绍了在Angular2项目中整合第三方库的流程。 首先，我们来了解什么是声明文件。在使用TypeScript开发Angular2应用时，声明...
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
11-28
在Angular开发中，有时我们需要在Angular的环境之外（如JavaScript的全局作用域或者第三方库）调用Angular控制器中的函数或访问其变量。本篇将详细解释如何实现这一操作，通过一个具体的示例来阐述。 首先，让我们...
angularJs需要导入的JS文件
03-31
AngularJS  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。
angular引入一个第三方js文件
m0_59157023的博客
01-10 1165
angular引入一个第三方js文件
angular10.1.1 引入外部js文件
沉漠的博客
12-08 640
需要在angular中引入d3.v4.js和darge.min.js 通过angular脚手架生成项目 在package.json文件中"dependencies":下添加"tern": "0.24.3"。 将两个js文件放入asset/目录下。 ts文件中通过以下代码引用外部js文件： declare var dagre: any; declare var d3: any; ...
angular.js引入外部JS并传值给外部JS
jason54zjj的博客
12-14 722
angular引入外部js，并传值给他
Angular中引入外部js的使用方式
dianzhi3826的博客
07-12 1536
在Angular中我们或许会用到部分外部插件的时候，像Bootstrap,Jquery这些当然我们可以通过Npm安装包的形式引入，但是还有一些其它的js库需要引入的话，我们又应该怎样操作呢? 在这里做一个简单的介绍，便于记录↓ 1、将自己下载好的js包文件放入项目指定文件夹中 2、然后在Angular.json中引入相关js文件 3、然后我们需要在typings.d.t...
AngularJS获取外部静态网页并显示到当前页面
Hibiki's Ending
08-06 1265
1.使用$http.get获取页面 2.将获取的页面使用ng-bind-html显示到页面上 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"&...
angular项目中引入jq以及相应插件的方法
我的博客
08-05 778
angular中使用了webpack做为依赖管理器，相较于以前在html中使用<script type="text/javascript" src="xxxx"的方式，使用webpack可以实现使在需要某些依赖的时候才进行加载。性能虽然好，但在使用一些历史的依赖于jquery的依赖时往往会出现找不到jquery的问题。 情景 假设当前项目需要iCheck插件，此插件依赖于jquery。 引用jQuery 在javascript中，可以通过向window对象上添加属性的方式来实现全局变量。比如：
Angular6调用js文件的两种方式
白不懂黑的静的专栏
06-29 2587
1：全局引用 一般我们会把本地的js文件放在assets目录下，然后在angular.json文件中的scripts中添加引用 "scripts": ["xxx.js", "../../assets/yyy.js"] 在调用插件的ts中 声明declare var myfunction: any，即可调用myfunction（）方法； 2:局部调用，这种方法我们是在哪个ts文件中用，就在哪个文件中引入js文件，这种方法更适合我们自己写的js 配置tsconfig.json文件 ...
Angular内部代码与外部代码的交互
老杨头的博客
12-18 349
Angular 程序在名为 NgZone 的特殊区域内运行，这种机制提高了变化检测的效率，但将程序内部代码与外部代码隔离开来，降低了内部代码与外部代码交互的便利性，需要添加必要的代码才能完成互相的调用。 1、Angular引入外部对象 除了使用npm安装外，很多第三方库都是以CDN方式在index.html中进行引入。比如 baidu 地图API： <scripttype="text/javascript"src="http://api.map.bai...
解决jQuery和其他库的冲突让渡并在局部代码 块中继续使用 $
最新发布
10-16
当在项目中同时引入jQuery和其他JavaScript库（如Zepto、Angular、Vue等），可能会发生$变量的冲突，因为它们都可能定义了自己的全局`$`函数。解决这种冲突的一种常见做法是使用命名空间或者通过IIFE（Immediately ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值