angular-单页面应用程序

我们都知道angularjs是单一页面应用程序,那什么是单一页面应用程序呢?单一页面应用程序到底有什么好处呢?

下面我们来看一下:

首先我觉得可以把页面的响应模式分成这样大概3个阶段:

1. 最传统的阶段:什么都得刷新

  最传统的web站点中,客户端向服务器发送请求,服务器响应之后把生成好的HTML通过Response返回给客户端,这样一来一往。体验当然是最不好的,同时对服务器来说也需要处理的更多。

2. 页面局部刷新

  至从Ajax火起来之后,大家就想起了这一点。页面某一块局部的数据可以在页面在客户端加载完之后,再从新发起一个请求去把某一块的HTML代码再拿下来显示到页面中。这里面有两种做法,一种是后台直接把HTML生成好了直接返回,另一种做法是服务器只返回数据,客户端再拼出HTML。采取第二种做法的时候,有人可能已经用上了先进的模板技术,有人可能还在使用强大的字符串拼接技术。 不管怎么说,我们进步了,用户可以先看到页面,然后某一块慢慢加载,用户感觉爽了,再也不是一片空白在那里转啊转啊的了。

3. 整站单页

  整站单页的时代到来最早是在2005年,当然那时候还只是一个术语。具体的例子,我最早接触到的是Gmail,当然最简单的单页其实很简单比如说某Q邮箱,整了个Frame在页面里面,不管你怎么点,它懒是感觉没有刷新呀。这里先简单说说我们要实现的这个单页和用Frame实现的单页相比有什么优势。

  • 拥有良好定义的URL,对用户和搜索引擎都更友好。
  • 可以实现衔接动画,这一点在移动设备上特别重要。
  • 页面生命周期对比。

优势

  • 对于用户而言,更好的用户体验,特别体现在可移动端和可触摸设备上
  • 对于开发都而言,在定义了良好的分层架构之后,UI与数据可以完全分离,只要后台的数据接口不改变,后台的逻辑可以随意的改动页不影响前端展示,而在加上前端MVVM框架之后,我们前端的数据也可以与UI完成分离。

难题

  • 最大的难题是Javascript部分,由于全部在一个页面,我们需要处理变量覆盖,变量作用域,对于前端开发人员来说要求会更上一层楼
  • 对于全球化,授权等模块都需要重新考虑和设计以便更适合这种单页程序的开发。

View Container

  这是一个客户端的模板容器,在requireJS的基础封装了一下,第一次调用某个模板的时候会去服务器上拿,后来就直接用客户端的了。

为什么模板不直接用html的?

  这个问题我也想过,用纯html的就不必走mvc那一套生命周期了,服务器压力减少不小。但是考虑到我们view当中的授权模块和全球化资源,其实是可以直接在服务器端处理好再返回的。而且我也偷了一个懒,没有把这些放在客户去实现。

时间: 2024-10-12 17:02:00

angular-单页面应用程序的相关文章

【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)

练习2:创建SPA界面 在本练习中,你将首先创建Geek Quiz的web前端,使用AngularJS专注于单页面应用程序的交互.然后你将使用CSS3来执行丰富的动画和提供一个当从一个问题转换到另一个问题时切换上下文的可视化效果以加强用户体验. 任务1:使用AngularJS来创建SPA界面 在本任务中,你将使用AngularJS来实现Geek Quiz应用程序的客户端.AngularJS是一个开源的JavaScript框架,它能够搭配MVC以加强基于浏览器的应用程序,使其对于开发和测试都更加便

Oracle JET 单页面应用程序Router 使用(上)

单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重新绘制. ojModule 仅用于分离的 view 和 viewMode ,使之与页面通过 Knockout绑定.另外,ojModule 可选,当不使用分离视图与模型时,可直接在元素上响应变化. 1.简单模型: 当选择 Chapter1 或其他时,将显示新内容,并且URL更改以反映用户在页面上当前的

SPA 单页面应用程序。

看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚 自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过ajax请求获取数据达到异步更新视图的按钮,原理的实现由两种, 其一,通过hash值的变化,绑定onhashchange的回调函数更新视图,因为hash值的变化不会让页面失去响应,不会向服务器发送请求.下面列出几种可能改变hash值的方法,改变url中的hash.浏览器回退按钮可能出现历史记录中的url包含的hash值不一样,都将触发该事件:还有触发带

Vue系列(1):单页面应用程序

前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:SPA.单个 HTML 文件.全靠 JS 操作.Virtual DOM.hash/history api 路由跳转.ajax 响应.按需加载.MVVM SPA 我们先来看一下在百科上面的解释吧,emmmm,一般呢,我每次搜索一些不懂的词,都会习惯先去看百科里面的解释,反正我从来都不奢望能看懂,只是指望有个大概的框架的,哈哈~ "单页面应用(SPA:single-page application),就是只有一张Web页面的应用,是加载单个

Angular——单页面与路由的使用

单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用包一个壳,这个壳本质上是浏览器)变成一个"原生"应用. 在PC端也有广泛的应用,通常情况下使用Ajax异步请求数据,然后实现内容局部刷新,局部刷新的本质是动态生成DOM,新生成的DOM元素并没有真实存在于文档中,所以当再次刷新页面时新添加的DOM元素会"丢失",

通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design Button

前面学习了Blazor的特点.环境搭建及基础知识,现在我们尝试的做个实际的组件. Ant Design是蚂蚁金服是基于Ant Design设计体系的 UI 组件库,主要用于研发企业级中后台产品.目前官方是基于React和Angular实现的,今年也推出了Vue的实现.其组件涵盖面较广,其组件风格及交互效果还是比较惊艳的,后面准备利用Ant Design的样式文件利用Blazor模仿几个组件的实现. 由于也是新学的Blazor开发,可能实现的方式有些笨拙,希望高手提出宝贵意见,先看看实现的Butt

phantomjs和angular-seo-server实现angular单页面seo

1.下载phantomjs,并配置环境变量为   eg:E:\phantomjs-2.1.1-windows\bin 2.下载angular-seo-server 3.windows下:cmd eg:phantomjs --disk-cache=no D:\nginx-1.10.0\angular-seo-server.js 9090 http:127.0.0.1/fengdai_pc 4.git命令下:eg:curl 'http://localhost:9090/?_escaped_fragm

[后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App

vue单页面条件下添加类似浏览器的标签页切换功能

在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现......... 简直郁闷到爆炸,后来和同学谈起的时候,说起生命周期这个才恍然大悟, 对于vue的生命周期,因为用的少,本身多用的是created,mounted这两个,都忘记beforeDestroy这些了,然后抓瞎了好久 实现方式是 每次销毁组件之前   缓存数据    能够用到的是 this.$d

SPA设计与架构-理解单页面Web应用 (埃米顿.A斯科特) 中文pdf扫描版

SPA 开发技术的运用是当今Web 开发领域的热门趋势,但真正全面掌握该技术的开发者并不多.本书详尽阐述单页面Web 应用(SPA)开发技术,从SPA 构建基础入手,通过MV*.模块化编程.路由.模块间通信.服务器端交互等概念的阐述,全面介绍SPA 的设计与架构,帮助读者正确掌握SPA 开发的各方面知识要素.同时,<SPA设计与架构:理解单页面Web应用>中还讨论了SPA 的单元测试及客户端任务自动化,覆盖了从开发到部署的一系列任务,让读者在阅读完<SPA设计与架构:理解单页面Web应用