Angular 单页应用

单页应用这个词初一听,还不知道是啥回事,没关系,这篇文章就一步一步地来揭开这个神秘的面纱。

在传统的web应用中,有一系列的hmtl,jps页面,每个页面可能会进行跳转,当然它的步骤是下面的:
1)A页面发起跳转请求;
2)服务器接受后将B页面展现给用户。

上面是目前主流web应用的模式,现在出现了一个单页应用,它又是什么一个意思呢?在讲之前,提提ajax,ajax是异步传输,它只加载了我们需要的数据,节省了很多流量,避免传输整个页面内容。

ok,明白了ajax的原理,其实单页应用就是利用类似的原理来实现的。引用一下老外的话:
Now if we try to understand what a single page application is, it can simply be defined as an application that will load a single HTML page in the browser and on each subsequent requests the new data and new HTML is pulled from the server using AJAX.

什么意思呢?就是将一个页面划分多个区域,如首页,左侧菜单,右侧内容区,底部,其实只有一个是变化的,那就是右侧内容区,所以每次点击不同的请求,只是加载右侧内容区的view。

整个页面的结构大概是这样的:
<div header>xxx</div>
<div navbar>xxx</div>
<div class="content">
<div ng-view></div>
</div>

请注意那个ng-view,那就是来加载不同的view的,单页其实就是上面的这个模板页。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值