首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

外部JavaScript文件在angular 2中不工作

在Angular 2中,外部JavaScript文件不会直接工作,因为Angular 2采用了组件化的开发模式,使用TypeScript作为主要的开发语言。而JavaScript文件通常是用于传统的Web开发中的,不符合Angular 2的组件化开发模式。

在Angular 2中,我们使用TypeScript编写组件,并通过Angular的模块系统进行组织和管理。TypeScript是一种由Microsoft开发的静态类型检查的JavaScript超集,它提供了更强大的面向对象编程能力和更好的开发工具支持。

如果你想在Angular 2中使用外部JavaScript文件,你可以考虑以下几种方法:

  1. 将JavaScript代码转换为TypeScript:你可以将外部JavaScript文件中的代码转换为TypeScript,并将其包含在Angular 2的组件中。这样可以确保代码的类型安全性,并且可以充分利用Angular 2的开发工具和特性。
  2. 使用Angular的服务:如果你的外部JavaScript文件包含一些可重用的功能,你可以将其封装为一个Angular的服务,并在需要的组件中进行引用和调用。这样可以更好地与Angular的生命周期和依赖注入机制集成。
  3. 使用第三方库:如果你的外部JavaScript文件是一个第三方库或插件,你可以尝试寻找是否有相应的TypeScript版本或Angular的封装库。许多流行的JavaScript库都有相应的Angular封装,可以直接在Angular项目中使用。

总结起来,虽然在Angular 2中直接使用外部JavaScript文件不是推荐的做法,但通过转换为TypeScript、封装为Angular服务或使用第三方库,你仍然可以在Angular 2项目中实现相应的功能。在选择解决方案时,建议优先考虑使用TypeScript和Angular的特性,以获得更好的开发体验和代码质量。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular8稳定版修改概述

但这是如何工作的? 基本上,Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。...这允许现代用户代理和旧用户代理中的经典脚本中选择性地执行模块脚本. SVG作为模板 您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联HTML或外部HTML作为模板。...angular使用builders进行主要操作:serve ,build ,test ,lint和e2e 。您可以angular.json文件中查看使用过的构建器。 ......一个域中支持多个应用。 阅读Angular Doc上有关服务工作者的更多信息。 表单改进 添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。...@angular/http @angular/httpAngular 5中推荐使用package,但由于@angular/platform-server依赖于它,所以仍然可用。

4.5K20

【UTP自动化测试平台系列之终章】前端探索之路

独立的前端文件一般是有Html、JavaScript、Css和Img等一批静态文件组成,可以部署中间件(Tomcat、apache和Nginx等)环境下就可以运行,无需依赖java、php等环境就可以直接运行...4 Angular4的特点 Angular 是一个用HTML和JavaScript 或者一个可以编译成 JavaScript 的语言(例如Dart或者TypeScript),来构建客户端应用的框架。...五、Angular4UTP的实践 UTP平台前端采用Angular4框架进行开发,使用了组件化开发、双向数据绑定、引入外部插件、cookie缓存、Http服务、单元测试等技术,经过了不断挖坑、填坑的过程...5.2 外部组件引入 在做开发的时候,总会引入一些angular外部人员开发的组件,方便进行快速开发使用。开发过前端的人都清楚,普通的引入只需要在js里面引用链接或者下载的库即可。...刚开始的时候,由于还是局限jquery的一些框架稍微,导致引入外部组件的时候走了一段不为人知的弯路。

2.5K110

现代前端开发路线图:从零开始,一步步成为前端工程师

过去5年我一直进行全栈开发,目前是tajawal的首席工程师(我得有很多头衔)。关注趋势并且让其他开发者训练得当不仅是我的爱好也是我的工作职责。...你应该对为什么一项工具一些情况下更适合有基本了解,并且要记住时髦的东西从来都不意味着就是最适合你要处理的工作的。...包管理器 在此之前,如果你要用到一些外部库比如插件或者任何外部的桌面小部件的话,你得手工下载JavaScript和CSS文件并且将它们放到项目里面,然后那些库或者插件发布新版本的时候,你又得下载更新的文件再放到你的项目里面...它们帮助你把外部库和插件放到你的项目里面,这样你就不用关心手工复制库或者费事地它们发布新版时更新文件的事情了。现在有yarn和npm了。...此外,如果你选择了Angular的话,确保你用的是Angular 2+而不是Angular 1+。 练习时间 现在你已经知道了开发现代JavaScript应用所需的一切。

73260

前端开发路线图——从小白到前端工程师

过去5年我一直进行全栈开发,目前是tajawal的首席工程师(我得有很多头衔)。关注趋势并且让其他开发者训练得当不仅是我的爱好也是我的工作职责。...你应该对为什么一项工具一些情况下更适合有基本了解,并且要记住时髦的东西从来都不意味着就是最适合你要处理的工作的。...包管理器 在此之前,如果你要用到一些外部库比如插件或者任何外部的桌面小部件的话,你得手工下载JavaScript和CSS文件并且将它们放到项目里面,然后那些库或者插件发布新版本的时候,你又得下载更新的文件再放到你的项目里面...它们帮助你把外部库和插件放到你的项目里面,这样你就不用关心手工复制库或者费事地它们发布新版时更新文件的事情了。现在有yarn和npm了。...此外,如果你选择了Angular的话,确保你用的是Angular 2+而不是Angular 1+。 练习时间 现在你已经知道了开发现代JavaScript应用所需的一切。

1.3K10

现代前端开发路线图:从零开始,一步步成为前端工程师

过去5年我一直进行全栈开发,目前是tajawal的首席工程师(我得有很多头衔)。关注趋势并且让其他开发者训练得当不仅是我的爱好也是我的工作职责。...你应该对为什么一项工具一些情况下更适合有基本了解,并且要记住时髦的东西从来都不意味着就是最适合你要处理的工作的。...包管理器 在此之前,如果你要用到一些外部库比如插件或者任何外部的桌面小部件的话,你得手工下载JavaScript和CSS文件并且将它们放到项目里面,然后那些库或者插件发布新版本的时候,你又得下载更新的文件再放到你的项目里面...它们帮助你把外部库和插件放到你的项目里面,这样你就不用关心手工复制库或者费事地它们发布新版时更新文件的事情了。现在有yarn和npm了。...此外,如果你选择了Angular的话,确保你用的是Angular 2+而不是Angular 1+。 练习时间 现在你已经知道了开发现代JavaScript应用所需的一切。

72610

AngularDart4.0 高级-部署 顶

当使用默认pub设置时,得到一个适当小的JavaScript文件,得益于dart2js编译器对3次握手的支持. 做一点额外的工作, 可以使你的可扩展应用程序 更小, 更快, 更稳定....默认情况下, 命令使用dart2js和Angular transformer生成实现应用程序的JavaScript文件....下面是使用pub build命令和默认设置发生的改变: 可扩展文件出现在应用程序的build/web目录. dart2js编译器release模式下工作, build/web/main.dart.js...使用上述两者构建应用程序推荐使用--fast-startup, 你可以判断使JavaScript加速增大是否值得. Dart 2.0 note: Dart 2.0中没有检查模式....使用 pwa 包使应用程序能离线工作 使用缓存加载降低程序初始加载大小 遵循Web应用程序最佳实践 移除不需要的构建文件 使用 pwa 包使应用程序能离线工作 pwa包简化使应用程序功能有限或不需连接的工作

4.6K10

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular 2中的路由工作原理是什么? 路由是能够让用户视图/组件之间导航的机制。Angular 2简化了路由,并提供了模块级(延迟加载)下配置和定义的灵活性。 ...它是如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...如果我们需要扩展外部库的类型定义,一个好的做法是,我们并非对node_modules或现有的typings文件夹进行改动,而是创建一个命名为“自定义类型”的新文件夹,来存储所有的自定义类型。...要定义应用程序(JavaScript / Typescript)对象的类型,我们应该在应用程序相应模块的models文件夹中,定义接口和实体类。...AOT编译代表的是Ahead Of Time编译,其中Angular编译器构建时,会将Angular组件和模板编译为本机JavaScript和HTML。

17.3K80

现代Web开发需要学习的15大技术

它们可以获取js源代码,找出正确的依赖关系,并发出可以驱动整个应用程序的JavaScript文件。我更喜欢WebPack。点此查看关于WebPack。...当你的React组件开始接收外部道具,或你有少量的组件开始变得非常复杂的时候,那么你可能会想要试试Flux。...Angular 2 Angular 2是JavaScript中最流行的MVC框架之一的下一个版本。它被完全重新设计过了,并且有一条陡峭的学习曲线。全面支持双向数据绑定。...选择Angular 2开发时要小心评估。 TypeScript Angular 2推荐TypeScript作为编程语言的首选。...它就像是浏览器用于做各种工作的一个后台线程。我想它也增加对离线浏览的支持。 Fetch API和Push API 请自行阅读链接。因为到目前为止我自己对此也是知之甚少。

2.5K20

如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。...lint (l): 在给定项目文件夹中的 Angular 应用程序代码上运行 linting 工具。 new (n): 创建一个新的工作区和一个初始的 Angular 应用程序。...大部分工作将在这里完成 /app/:包含模块和组件 /assets/:包含图像、图标和样式等静态资源 /environments/:包含环境(生产和开发)特定的配置文件 browserslist:autoprefixer...:TypeScript 的配置文件 tslint.json:TSlint(静态分析工具)的配置文件 为您的项目服务 Angular CLI 提供了一个完整的工具链,用于本地计算机上开发前端应用程序。...Angular CLI 将自动 src/app.module.ts 文件中添加对组件、指令和管道的引用。

10400

现代Web开发需要学习的15大技术

它们可以获取js源代码,找出正确的依赖关系,并发出可以驱动整个应用程序的JavaScript文件。我更喜欢WebPack。点此查看关于WebPack。...当你的React组件开始接收外部道具,或你有少量的组件开始变得非常复杂的时候,那么你可能会想要试试Flux。...Angular 2 Angular 2是JavaScript中最流行的MVC框架之一的下一个版本。它被完全重新设计过了,并且有一条陡峭的学习曲线。全面支持双向数据绑定。...选择Angular 2开发时要小心评估。 TypeScript Angular 2推荐TypeScript作为编程语言的首选。...它就像是浏览器用于做各种工作的一个后台线程。我想它也增加对离线浏览的支持。 Fetch API和Push API 请自行阅读链接。因为到目前为止我自己对此也是知之甚少。

3.1K90

正确的Webpack配置姿势,快速启动各式框架!

本文介绍一些Webpack常用或者有意思的一些配置,教你快速启动各种框架(这里主要是React和Angular)。该篇我们聊原理,只讲实战。...其实Webpack不应该拿来跟Grunt/Gulp比较的,但在本骚年这边它就是承担起了很大一部分工作。...一般来说,Angular中我们将是启动.bootstrap()的文件Vue中则是new Vue()的位置,React中则是ReactDOM.render()或者是React.render()的启动文件...babel-loader将ES6/ES7语法编译生成ES5,当然有些特性还是需要babel-polyfill支持的(Babel默认只转换新的JavaScript句法,而转换新的API,如Promise...HtmlwebpackPlugin 功能有下: 为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个

1.5K30

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在?Webpack 开发中间件模块热拔插(HMR)

模块热拔插:开发期间,一旦你编辑了一个Typescript文件、CSS文件、或者其他客户端资源,你的改变也将在刷新页面的情况下立即推送到浏览器。...意义并不在于让支持哪些运行javascript的浏览器,它只是一种极端情况而已(如果为了这种极端情况,那还为什么要建立一个SPA应用呢?)...,我们template中使用它的几个非常酷的功能: Webpack 开发中间件 通常来说,一旦你改变任何一个Typescript文件,你都需要去运行webpack来重新生成javascript文件,但是...模块热拔插(HMR)解决了这个问题,默认的开发模式下,它会监测对于angular项目文件的任何改变(Typescript,css,html),当改变发生,它会自动触发一次快速的编译,并且托送所有改变的文件到活动的浏览器窗口...你可以通过打开控制才来观测它的工作,当VS开始调试,浏览器控制台将会显示以下内容: ? 看到[HMR] Connected的字眼了吗?它代表已经准备好接收新的文件了,尝试更改一个源文件

3.3K60

Angular快速学习笔记(2) -- 架构

JavaScript 中,每个文件是一个模块,文件中定义的所有对象都从属于那个模块。 通过 export 关键字,模块可以把它的某些对象声明为公共的。...templateUrl:该组件的 HTML 模板文件相对于这个组件文件的地址,实现html与js的分离,推荐 可以用 template 属性的值来提供内联的 HTML 模板,类似vuejs和react的单文件...Angular 每个 JavaScript 事件循环中处理所有的数据绑定,它会从组件树的根部开始,递归处理全部子组件。 ?...1.2.3.2 Pipes管道 一般的模板引擎都会提供pipes功能,angular例外,Angular 的管道可以让你在模板中声明显示值的转换逻辑。...它的工作模型基于人们熟知的浏览器导航约定: 地址栏输入 URL,浏览器就会导航到相应的页面 页面中点击链接,浏览器就会导航到一个新页面 点击浏览器的前进和后退按钮,浏览器就会在你的浏览历史中向前或向后导航

5.2K20

AngularJS浅谈-博客

具体点说: AngularJS 是一个 JavaScript 框架 AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src...应用程序 内运行。 ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。...记住一点:大型的应用程序中,通常是把控制器存储在外部文件中。...只需要把 标签中的代码复制到名为 js文件.js 的外部文件中即可,然后script中引用js文件: 接下来说一下AngularJs中核心的集中特性吧!! 先来个图!...用javascript定义作为视图控制器逻辑。AngularJs作为MVC框架,控制器中我们无需添加对于dom级的事件监听,这些AngularJs中已经内置了。

2.4K30

Angularjs基础(三)

scope是一个JavaScript对象,带有属性和方法,这些属性和方法可以视图和控制器中使用。       实例: 如果你改变了视图,模型和控制器也会相应更新。         ...应用程序内运行。           ng-controller = "myCtrl" 属性是一个Angular 指令。用于定义一个控制器。           ...return $scope.firstName + "" +$scope.lastName;             }           })          外部文件中的控制器...    大型的应用程序中,通常是把控制器存储在外部文件中。     ...只需要把标签中的代码复制到名为personController.js的外部文件中即可:       实例:           <div ng-app="myApp" ng-controller

3.1K50
领券