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

为什么在angular 7中更改路由时不加载Jquery?

在Angular 7中更改路由时不加载jQuery的原因是因为Angular采用了一种称为单页应用(Single Page Application,SPA)的架构模式。SPA是一种通过动态加载内容而不是重新加载整个页面的方式来构建Web应用程序的方法。

在SPA中,当路由发生变化时,Angular会根据路由配置加载相应的组件,并将其插入到DOM中的指定位置,而不会重新加载整个页面。这种方式可以提供更快的用户体验,因为只有需要更新的部分会被重新加载,而不是整个页面。

由于SPA的特性,jQuery的加载方式与Angular的工作方式不兼容。jQuery通常是通过在页面中直接引入jQuery库文件来使用的,而不是通过模块化的方式进行加载。在Angular中,模块化是通过使用Angular的模块系统来管理和加载组件、服务等功能模块的。

另外,Angular提供了自己的一套强大的工具和功能,如组件化开发、数据绑定、依赖注入等,可以完全替代jQuery的功能。Angular的开发者通常会使用Angular提供的内置指令和服务来操作DOM元素,而不需要依赖jQuery。

总结起来,Angular 7中不加载jQuery是因为采用了SPA的架构模式,通过动态加载组件来更新页面,而不是重新加载整个页面。另外,Angular提供了自己的一套工具和功能,可以完全替代jQuery的功能。

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

相关·内容

微前端之qiankun微前端

如主应用下包含:Vue项目,React项目,还有Angular项目。 微前端的特点: 任意的JS框架都可以兼容使用,接入简单。...解决iframe主页面刷新后,无法控制子页面的路由问题 更好的解决主应用和子应用的通信问题 为什么不是iframe iframe通过src嵌入,当子页面的页面内发生路由的跳转后。...技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。...JS 沙箱,确保微应用之间 全局变量/事件 冲突。 资源预加载浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。...history模式下设置路由更方便 微应用渲染 base上设置微应用的范围 router = new VueRouter({ base: window.

2.6K70

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库; 性能优化。包括加载速度、渲染效率; 代码管理。...main.js,这个是由requirejs引入的第一个业务js,主要是配置requirejs; router.js,这个是整个网站/app的路由配置,实际部署中,可以把main.js和router.js...如果没有使用requirejs,那么我们需要在路由配置前加载完全部controller。angular-route需要做的只是切换HTML模版,重新编译,绑定新的controller。 但是。...所以,这里利用了angular-route提供的resolve功能,也就是路由更改html前先把resolve里边该做的事完成。...$template 首先,先修改一下angular-route的源代码,这个源代码非常精简,不用太纠结,狠狠的去修改就好了。 另外,想问我为什么知道或者想到在这修改?

3.3K20

AngularJS 1 教程

toc 为什么需要前端框架 为什么2016年的今天仍然可以学习Angular 1 和jQuery 的不同 学习AngularJS 1 作用域、数据双向绑定、模块 Angualr 1实现双向绑定的脏检查...从使用角度来说脏检查 从性能角度来说脏检查 指令 directive,以及用指令写组件 Promise 为什么需要前端框架 随着浏览器性能提升,更多Web Page演变为Web App,特别是中大型的项目中...---- JS Bin on jsbin.com 同样的一个简单需求,可以明显看得出jQuery中业务代码,直接操作DOM代码揉杂一块,而Angular中JS代码关心业务逻辑,HTML描述界面非常的清晰...代码不容易随着业务更改,扩展。 还有相对反直觉的一点是, 如果页面交互复杂,而开发人员对DOM操作精通,jQuery遍地$()的使用方式很容易造成性能问题 。...学习AngularJS 1 AngualrJs则通过数据双向绑定屏蔽了DOM操作,MVC解耦代码,依赖注入,自定义指令来复用代码,然后配合强大的路由,本地化,安全特性等,成功地成为了前ES6代最流行的前端框架

4.6K30

基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇

如果你不懂 Vue 也没关系,我们搭建主应用基座的教程尽量涉及 Vue 的 API,涉及到 API 的地方都会给出解释。...触发主应用路由规则(由路由配置表的 $route.name 判断),将渲染主应用的组件; 第 10 行:微应用渲染区。...未触发主应用路由规则(由路由配置表的 $route.name 判断),将渲染微应用节点; 从上面的分析可以看出,我们使用了路由表配置的 name 字段进行判断,判断当前路由是否为主应用路由,最后决定渲染主应用组件或是微应用节点...", }, ]; export default apps; 通过上面的代码,我们就在主应用中注册了我们的 Angular 微应用,进入 /angular 路由加载我们的 Angular 微应用...我们点击左侧菜单切换到微应用,此时我们的 Angular 微应用被正确加载啦!(见下图) ? micro-app 到这里,Angular 微应用就接入成功了! 接入 Jquery、xxx...

6.4K40

2021大厂(阿里、百度、字体跳动、腾讯)前端面试题库

12.npm打包需要注意哪些?如何利用webpack来更好的构建? 13.如何在vue项目中实现按需加载? 14.webpack是解决什么问题而生的? 15.如何配置多入口文件?...Angular中有几种方式? Ajax 1.什么是ajax?ajax作用是什么? 2.为什么要用ajax: 3.AJAX最大的特点是什么。 4.请介绍一下XMLHttprequest对象。...33.Vue2 中注册 router-link 上事件无效解决方法 34.RouterLink IE 和 Firefox 中不起作用(路由不跳转)的问题 35.axios 的特点有哪些 36.请说下封装...2.网页上有5个div元素,如何使用 jQuery来选择它们? 3.$(this) 和 this 关键字 jQuery 中有何不同? 4.使用CDN加载 jQuery库的主要优势是什么?...21.什么是React 路由? 22.为什么需要 React 中的路由? 23.列出 React Router 的优点。 24.类组件和函数组件之间有什么区别?

1.8K20

多种前端框架的优缺点「建议收藏」

6、污染顶级变量:JQuery只建立一个名为JQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象。...这一特点使得JQuery的代码无比优雅。 9、隐式迭代:当用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们。无需循环遍历每一个返回的元素。...3、多个插件冲突:同一页面上使用多个插件,很容易碰到冲突现象,尤其是这些插件依赖相同事件或selector最为明显。...2.是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能; 3.自定义指令,自定义指令后可以项目中多次使用。...Ember.js中,路由用作模型,句柄模板作为视图,控制器处理模型中的数据。

3.6K20

【17】进大厂必须掌握的面试题-50个Angular面试

使用它们,您可以轻松地组织数据,使数据仅在满足特定条件才显示。通过使用竖线字符|,将过滤器添加到表达式中,然后是过滤器。 14. AngularjQuery有什么区别?...特征 jQuery Angular DOM操作 是 是 RESTful API 没有 是 动画支持 是 是 深层链接路由 没有 是 表格验证 没有 是 双向数据绑定 没有 是 AJAX / JSONP...当您尝试将对象创建的逻辑与使用对象的逻辑分开,依赖注入的概念会派上用场。“ config”操作使用DI,加载模块以检索应用程序的元素,必须预先配置DI。...ngOnChanges:每当组件的任何输入属性发生更改或更新,都将调用它。 ngOnInit:每次初始化给定组件都会调用它。...当Angular找到ng-app指令,它将加载与其关联的模块,然后编译DOM。 手动引导: 手动引导为您提供了有关如何以及何时初始化Angular应用程序的更多控制。

41.1K51

如何在 ASP.NET MVC 中集成 AngularJS(2)

我创建了客户和产品目录的独立包,带着这种想法,当用户请求应用程序的这些源文件,应以将会动态的加载这些捆绑。...下面的代码段,产生了我想根据需求动态加载的一些包,我不想当应用启动加载所有的前期的包。我需要的信息中的最重要一块是虚拟路径和每一次捆绑的长版本号。...此外,JSON 集将被用于跟踪被加载的捆绑。一旦捆绑被加载,就不需要第二次捆绑了。 有几件事情需要写入路由代码中。...首先,每当用户选择一个页面来加载一定功能模块,对于模块绑定的所有 JavaScript 文件需要被下载。...当我们自己进行 ASP.NET MVC 和 AngularJS 开始,还可以借助开发工具来助力开发过程。

8.3K100

Angular Route 中提前获取数据

本文中,你将学到,路由更改前怎么获取到数据。通过本文,你将学会使用 resolver, Angular App 中应用 resolver,应用到一个公共的预加载导航。...\n\n### 你为什么应该使用 Resolver\n\nResolver 路由跟组件之间扮演着中间件服务的角色。...假设你有一个表单,没有数据,你想向用户一个空的表单,当在加载用户数据展示一个 loader,然后当数据返回,填充表单并隐藏 loader。...也就是说,组件加载完之后,我们发起数据请求。\n\n ngOnInit() 中操作,我们需要在每个需要的组件加载后,在其路由页面中添加 loader 展示。...然后 resolver 中底调用,接着路由中配置 resolve信息,(页面将会等待)直到 resolver 被处理。 resolver 被处理之后,我们可以通过路由来获取数据然后展示组件中。

6.2K30

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

ngDoCheck:检测并在Angular上下文发生变化时执行。每次更改检测运行时,会被调用。 ngOnDestroy:Angular销毁指令/组件之前清除。...Angular 2中的路由工作原理是什么? 路由是能够让用户视图/组件之间导航的机制。Angular 2简化了路由,并提供了模块级(延迟加载)下配置和定义的灵活性。 ...Angular应用程序具有路由器服务的单个实例,并且每当URL改变,相应的路由就与路由配置数组进行匹配。...成功匹配,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新的状态。...这通常用在setter中,当类中的值被更改完成。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。

17.3K80

【进阶系列】Webpack基础整理专题

使用这种方式)     4 ES6模块 思考:为什么只有JS需要被模块化管理,前台的很多预编译内容,不需要管理吗?     ...、jQuery、mui等;             Common类文件,自定义的通用类库,命名规则是hj_common_***.js,原则上目前所有自定义类库可以合并成一个文件,大小超过500KB;...1.3 Angular模块模块化整改 1.3.1 Html文件整改     1、删除所有Script标签引用的文件,改成js文件中用require引用;     2、增加dll文件引用;     3...'ui.router', "hj_Comment"]); loginModule.name = "login"; module.exports = loginModule.name;     4、对于路由策略中子模块...hjCommon/geslock.js'),     params:{         loginSet:"",         isLogin:""     } }) 1.3.2.1 子模块js文件单独编写require

15620

2022 最新 Vue 3.0 面试题

,但是面对需求频繁的变化,去要切换组件,动态组件切 换的过程中,组件的实例都是重新创建的,而我们需要保留组件的状态,为了解决这个问题, 需要使用到 vue 中内置组件 包裹动态组件,会缓存活动的组件实例...中,并且可以每个组件中使用 2、现在我们知道了可以通过动态路由传参,路由中设置了,多段路径参数后,对应的 值分别都会设置到 router.query 和$router.params 中 46、JQuery...当需要操纵,可以虚拟 DOM 的 内存中执行计算和操作,而真实 DOM 上进行操纵。...(高薪常问) 1、把不常改变的库放到 index.html 中,通过 cdn 引入 2、vue 路由的懒加载 3、生成 map 文件 4、vue 组件尽量不要全局引入 5、使用更轻量级的工具库...为什么不使用箭头函数?

11210

Asp.net网站开发教程第一篇:环境搭建和简单页面

新建完成大致结构如下: 这是MVC构架我们今天不进MVC ,我们再新建一个WebSite将angular、bootstrap、jquery、layui等放在里面如图:如果你没有你可以自行到官网去下载...路由,我们事件都写在controller里面, 请求数据你可以ajax,这里我用angular里的方法。...这里一下节细讲。 基本页面就搭建好了,接下来我们首页写一下轮播和页面 mian.html页面中写首页内容header.html写导航菜单。...我们打开调试代码会发现header.html和mian.html的内容都在index.html里面这里有一个好处就是css和js不用重复加载。...总结:我们之前多个页面加载到同一页面用的都是iframe,现在我们使用angular路由机制,同时使用了angular中的数据双向绑定这样可以减少代码量。下一节我们详细讲解。

1.3K10

前端插件以及部分细分网址梳理

: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持 jquery.scrollTo: 页面上以一个元素为起始以动画的方式移动...lazysizes: 功能强大的图片延迟加载工具,可以首先加载一个低质量的图片,然后再加载高质量的图片 progressbar.js: 简洁美观的进度条,扁平化 pigshell: 一个由 Javascript...-video-player: Paypal 出品的 Video 播放器 loading: 几种 Loading 效果,基于 SVG flippant.js: 一款能够漂亮的网页元素翻转效果库,代码许久更新...插件,用于调试 Angular angularjs-style-guide: AngularJS 代码风格 ngReact: React 的 Angular 插件,可以 Angular 中使用 React...touchstonejs: 基于 React 的手机应用前端框架 essential-react: 基于 React, ES6, React-Router的一个应用脚手架 react-router: React 路由解决方案

5.6K90

【前端技术丨主题周】Angular 核心概念与框架演进

Angular 的七大核心概念 1. 模块 Web 开发中,通过依赖全局状态或变量和保证JavaScript 文件引入顺序来正确加载相应的类库。...比如: 代表jQuery引入.superAwesomeDatePicker 类库来实现日期选择控件前,需要确保jQuery 已经正常载入。...模板和数据绑定 当使用组件标签,可以通过template 或templateUrl 属性引入HTML 来描述让Angular 渲染显示的界面内容。...当然,为了开发强大的应用,Angular 功能开发上也提供了不少辅助模块,例如: i18n 模块,用于语言国际化、符号时间等本地化。 路由模块,用于构建多界面状态的单页应用。...首屏加载更快,使用服务端渲染和小型启动库使网络加载更快。 移动端响应大幅度提升,原生支持各种手势、触摸等。

9K10

2020最新前端面试题_2020年前端面试题

多条数据影响一条数据使用计算属性,使用场景购物车。 如果是一条数据更改,影响多条数据,使用watch,使用场景搜索框。 15、v-on可以监听多个方法吗?...初次加载耗时多;页面复杂度提高很多。 21、Vue 项目中为什么要在列表组件中写 key,其作用是什么?...$set("demo",a.b.c.d) 56、vue常用指令 v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model) v-bind 动态绑定 作用: 及时对页面的数据进行更改...路由加载 异步路由 第三方插件的按需加载 适当采用 keep-alive 缓存组件 防抖、节流的运用 服务端渲染 SSR or 预渲染 64、Vue.set 方法原理 两种情况下修改 Vue...创建Ajax无刷新网页 提供对JavaScript语言的增强 增强的事件处理 更改网页内容 JQuery可以修改网页中的内容,比如更改网页的文本、 插入或转网页图像, jQuery简化了原本使用JavaScript

6.6K10

web前端与手机应用的这些重点和知识点,你知道多少呢

注:本阶段涉及到编程,主要是熟悉HTML5各种标签用法、CSS3各种属性的用法。...这也是为什么前端工程师大行其道,被广泛需求的根本原因。...本阶段,我们注重讲解如何更好的应用jQuery以及他的设计方式,同时也包含jQuery扩展内容。...移动端中,我们主要注重移动端布局和资源加载,布局方向,我们主要讲解百分比、flex、REM、栅格系统来实现。资源加载采用(SPA)单页面加载,也是目前比较火的形式。页面跳转可以非常节省资源。...Vue:借鉴了Angular和React两个优秀框架的基础上,Vue无疑是非常受欢迎的,它使用简单,强大的生态系统,高效的运行速度也是我们开发中的选择之一。

60340
领券