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

为什么在Angular 4中不能通过XHR加载视图?

在Angular 4中不能通过XHR加载视图的原因是因为Angular采用了模块化的开发方式,视图被编译成了JavaScript代码,并且打包在应用的bundle中。这种方式可以提高应用的加载速度和性能。

XHR(XMLHttpRequest)是一种用于在浏览器和服务器之间发送数据的技术,它通常用于异步加载数据或资源。然而,在Angular中,视图被编译成了JavaScript代码,而不是通过XHR加载。这样做的好处是可以减少对服务器的请求次数,提高应用的加载速度。

另外,使用XHR加载视图可能会导致一些安全性问题,例如跨域请求。为了避免这些问题,Angular采用了模块化的开发方式,并将视图编译成JavaScript代码。

总结起来,Angular 4中不能通过XHR加载视图的原因是为了提高应用的加载速度和性能,并避免安全性问题。

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

相关·内容

Angularjs基础(一)

(一) 模型——视图——控制器     端对端的解决方案,AngularJS 试图成为WEB 应用中的一种段对端的解决方案。...                      Hello {{'World'}}                 当加载页面的时候...AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反       映在视图界面中,反之亦然。       ...此外,AngularJS 还提供了一些非常有用的服务特性:         1,底层服务保留依赖注入,XHR,缓存,URL路由和浏览器抽象服务。         ...Angular JS 脚本标签:               这行代码加载angular.js 脚本

3K100

Angular开发实践(五):深入解析变化监测

什么是变化监测 使用 Angular 进行开发中,我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。...而这些绑定的值之所以能在视图与模型之间保持同步,正是得益于Angular中的变化监测。...简单来说,变化监测就是 Angular 用来监测视图与模型之间绑定的值是否发生了改变,当监测到模型中绑定的值发生改变时,则同步到视图上,反之,当监测到视图上绑定的值发生改变时,则回调对应的绑定函数。...Angular并不是捕捉对象的变动,它采用的是适当的时机去检验对象的值是否被改动,这个时机就是这些异步事件的发生。...Angular 整个运行期间都会为每一个组件创建 ChangeDetectorRef 的实例,该实例提供了相关方法来手动管理变化监测。

1.7K80

在前端 Network 还能这样玩

页面加载后,设置正确的网络状态 navigator.onLine ?...由于 AJAX 请求有跨域的限制,所以不能通过 AJAX 方式来实现。Ping.js 的实现方式是使用从任意主机加载 favicon.ico 图片来确认响应时间。...= new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState...4.2 通过创建 Image 对象加载指定图片来测算网速 该方案是通过创建 Image 对象并记录开始时间,然后绑定 onload 回调函数,接着指定一个有效的图片地址,一旦图片加载完成就会触发 onload...源码解析-url状态检测神器ping-url 知乎 - 当我们尝试用JavaScipt测网速 Github - network-speed-test---- 欢迎小伙伴们订阅前端全栈修仙之路,及时阅读 Angular

1.3K20

前端文件下载汇总「案例讲解」

为什么我们本小节开头说不受同源策略的限制。...是否让用户知道数据加载到哪里了呢,加载完后浏览器吊起下载? 需要解答上面这个问题,其实我们解决问题我们如何获取到文件加载的进度呢? 即可。...XMLHttpRequest (XHR) 对象用来和服务端进行任何数据交互。我们先来了解 XHR 对象的关键属性和方法。...上面也提到了,e.total 需要后端服务配合 Content-Length 触发 Download File 按钮后的数据拉取的动图效果 XHR 能够直接获取到文件下载的进度,那么,我们为什么不对其进行封装呢...结合 angular 使用 axios react 和 vue 框架开发的时,用的比较频繁。笔者使用的 angular 框架来开发,其中集成了 @angular/common/http 模块。

19210

浅谈Django前端后端值传递问题

page.paginator.num_pages }}&que={{ request.session.que }}” rel=”external nofollow” 最后一页</a 2、表单通过post请求传值 当前端通过post传值时,视图中可以通过...可以标签中定义一个属性动态生成值 <span id=”num_{{ good.id }}” </span 此时可以绑定的时间函数中传入一个同样的参数,就可以js中获取当前的被点击的标签...good.id }});" +</button function addToCart(good_id){ $('#num_'+ good_id).html(data.data.c_num) } ajax中不能通过...$(this)获得当前触发的标签,但是可以ajax之外将对象获取,ajax中的函数中使用。...规定联通请求发送到服务器的数据 success(response,status,xhr):可选。当请求成功时执行的函数。

4.2K20

Vue常见面试题--简书01

为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象?...实例化的过程中,通过Object.defineProperty()会对a.b添加getter和setter,同时Vue.js会对模板做编译,解析生成一个指令对象(这里是v-text指令),每个指令对象都会关联一个...,这样就完成了数据改变到视图更新的一个自动过程 5.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点。...而Vue则采用的是 Object.defineProperty特性(这在ES5中是无法slim的,这就是为什么vue2.0不支持ie8以下的浏览器) Vue可以说是尤雨溪从Angular中提炼出来的,又参照了...你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。 *独立开发。

75730

前端三大框架vue,angular,react大杂烩

一、为什么前端会被vue,angular,react瓜分?    不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...因此, NG框架是DOM加载完成之后, 才开始起作用的。 React    React 的渲染建立 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。...从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是构建方式、缓存、图片加载、网络链路、HTTP/2 等方面 4、模块化与组件 Angular1...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。

3K90

前端三大框架大杂烩

一、为什么前端会被vue,angular,react瓜分?   不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...因此, NG框架是DOM加载完成之后, 才开始起作用的。 React React 的渲染建立 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。...从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是构建方式、缓存、图片加载、网络链路、HTTP/2 等方面 4、模块化与组件 Angular1...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue   Vue中指令和组件分得更清晰。

2.6K50

前端三大框架vue,angular,react大杂烩

一、为什么前端会被vue,angular,react瓜分?    不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...因此, NG框架是DOM加载完成之后, 才开始起作用的。 React    React 的渲染建立 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。...从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是构建方式、缓存、图片加载、网络链路、HTTP/2 等方面 4、模块化与组件 Angular1...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。

2.1K60

vue响应式原理(数据双向绑定的原理)

比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西: - 必须使用它的模块机制 - 必须使用它的依赖注入 - 必须使用它的特殊形式定义组件(这一点每个视图框架都有...Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图...,这样就完成了数据改变到视图更新的一个自动过程 实现数据双向绑定的方法: 发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性,HTML代码中指明绑定。...脏值检查(angular.js) angular.js是通过脏值检测的方式,对比数据是否有变更,从而决定是否更新视图。最简单的方式就是通过setInterval()定时轮询检测数据变动。...angular.js只有指定的事件触发时,进入脏值检测,大致如下: - DOM事件,譬如用户输入文本,点击按钮等(ng-click) - XHR响应事件($http) -

2.7K40

redux 中集成 angular di 机制

众所周知,angular是一个大而全的框架,想和redux一起使用,需要摒弃一些angular中常用的开发理念与模式,仅仅将它作为一个视图层框架使用,就和react一样,不在将类似domain state...那么问题来了,angular中有一个大家很熟悉的机制,叫做依赖注入(简称di),因为这种机制的存在,angular中,我们一般使用一个服务是不关心它的实例化过程的,我们所做的,仅仅是声明它,告诉模块...计算机科学中,没有什么问题是不能通过增加一个中间件来解决的。...是的,但是中间件它的确可以集成di功能,为什么呢,因为中间件的实例化逻辑是通过ng-reduxangular内部进行的,而中间件本身呢,有仅仅是一个函数而已,那么我们完全可以把中间件的实现,声明成一个...angular中的factory或者service,之后在其中使用angular的di机制,动态的实例化action中依赖服务的实例,关于这一点呢,ng-redux的文档中有提及,但是没有说的特别的清楚

81430

jQuery VS JavaScript原生API

jQuery的温柔乡里,是否还能记得原生她javascript原生?如果仅为使用个选择器($)或者类似的东西,是否真的有必要加载jQuery?故此了解下JS常用原生写法还是蛮有必要的。...jQuery,拥抱原生JavaScript一文中提到,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式; React、Angular...dom, event, handle) { dom['on' + event] = handle; } } })(); 原生-DOM绑定事件-优化2 //DOM绑定事件-之惰性加载...= new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function (data) { }...xhr.send(); // post var xhr = new XMLHttpRequest() xhr.open('POST', url); xhr.onreadystatechange

1.6K60

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

Angular 中的数据绑定是自动从模型和视图间同步数据,Angular的这种数据绑定实现让你可以将应用中的模型和视图的数据看作一个源, 视图在任何时候都是对模型的一个投影,当模型发生变化,相关的视图也会发生变化...首先,模板通过浏览器编译, 这个编译步骤生成一个实时视图.对该视图所做的任何更改会立即反映在模型,模型的任何更改都会传播到视图....这种类型的指令表达式发生变化的时候会被通知用来更新视图。 监听指令,像是ng-click,注册一个监听器dom上。...当接收到一个扩展事件(像是用户操作,定时器,XHR事件),这个相关的表达式必须通过$apply方法应用到作用域以便所有的监听器都正确的更新。...angular离开这个执行上下文,并且结束keydown时间js框架中的使用。 浏览器重新渲染这个视图基于更新的文本。

13.2K20

深度解析 Vue MVVM 原理实现

MVVM其实表示的是 Model-View-ViewModel Model:模型层,负责处理业务逻辑以及和服务器端进行交互 View:视图层:负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面...ViewModel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁 MVVM的架构下,View层和Model层并没有直接联系,而是通过ViewModel层进行交互。...实现数据绑定的做法有大致如下几种: 脏值检查(angular.js) 数据劫持(vue.js) 发布者-订阅者模式(backbone.js) 这里大致说下脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更...,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,angular只有指定的事件触发时进入脏值检测,大致如下: DOM事件,譬如用户输入文本,点击按钮等。...( ng-click ) XHR响应事件 ( $http ) 浏览器Location变更事件 ( $location ) Timer事件( $timeout , $interval ) 执行 $

1.4K20

AngularDart4.0 高级-组件样式 顶

此外,Angular可以将组件样式与组件捆绑在一起,从而实现比常规样式表更多的模块化设计。 本页介绍如何加载和应用这些组件样式。 运行此页面中显示的代码的实例(查看源代码)。...有关更多信息,请参阅控制视图封装部分。 加载样式到组件 这里有几种加载样式到组件的方法: 通过设置styles或styleUrls元数据. HTML模板内链样式. CSS导入....Emulated视图封装 (默认) 仿真shadow DOM的行为通过预处理 (和重命名)CSS代码到有效的CSS到组件视图. 更多信息, 查看附录1. None意味着Angular没有视图封装....支持仍然有限, 那就是为什么Emulated视图封装是默认的模型并且大多数例子中被推荐....附录 1: 检查在emulated视图封装模型产生的CSS 当使用emulated视图封装时, Angular预处理所有组件样式以致接近标准shadow CSS 作用域规则.

2.2K20
领券