我们都知道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当中的授权模块和全球化资源,其实是可以直接在服务器端处理好再返回的。而且我也偷了一个懒,没有把这些放在客户去实现。

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

  1. Ember.js实现单页面应用程序

    1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...

  2. 通过Blazor使用C#开发SPA单页面应用程序(1)

    2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...

  3. 单页面应用程序(SPA)

    一.概念 ①在一个页面上实现网站的大部分功能,就是单页面应用程序,是一种常见的网页开发模式. ②整个网站就只有一个Html文件,每次在切换页面时,不需要请求服务器,只要通过本地的js来切换即可.这样可 ...

  4. 单页面应用程序(SPA)的优缺点

    我们通常所说的单页面应用程序通常通过前端框架(angular.react.vue)进行开发,单页面应用程序将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScr ...

  5. SPA 单页面应用程序。

    看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚 自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过ajax请求获取数据达到异步更新视图的按钮,原理的实现 ...

  6. 通过Blazor使用C#开发SPA单页面应用程序(3)

    今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...

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

    单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...

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

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:SPA.单个 HTML 文件.全靠 JS 操作.Virtual DOM.hash/history api 路由跳转.ajax 响应.按需加载 ...

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

    单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把W ...

  10. 通过Blazor使用C#开发SPA单页面应用程序(2)

    今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...

随机推荐

  1. IPFS:世界正在悄然发生变化

    世界正在悄然发生变化(IPFS) 2015-05-05 Juan Benet 在自己的终端里面敲入了下面的文字: > echo "hello worlds" | ipfs a ...

  2. c++趣味之shared_ptr额外好处

    shared_ptr(sp)额外好处是什么?即使被转为基类,析构函数也可以正常执行. 已知两个类 class foo{}; class bar:foo{public:~bar(){}}; 先来看不用s ...

  3. 06_java 时间获取练习_Date\SimpleDateFormat\Calendar类练习

     1.获取当前的日期,并把这个日期转换为指定格式的字符串,如2088-08-08 08:08:08 import java.text.SimpleDateFormat; import java.uti ...

  4. MYSQL数据库学习十四 存储过程和函数的操作

    14.1 为什么使用存储过程和函数 一个完整的操作会包含多条SQL语句,在执行过程中需要根据前面SQL语句的执行结果有选择的执行后面的SQL语句. 存储过程和函数的优点: 允许标准组件式编程,提高了S ...

  5. 数据系统的未来------《Designing Data-Intensive Applications》读书笔记17

    终于来到这本书最后的一章了<Designing Data-Intensive Applications>大部头,这本书应该是我近两年读过最棒的技术书籍.作者Martin Kleppmann ...

  6. Webpack的加载器

    一.什么是加载器(loaders)loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用load ...

  7. python3.X中的循环

    获取数字范围: range() 在python3.x中使用range(): >>> list(range(7)) [0, 1, 2, 3, 4, 5, 6] >>> ...

  8. 源码实现 --> atoi函数实现

    atoi函数实现 atoi()函数的功能是将一个字符串转换为一个整型数值. 例如“12345”,转换之后的数值为12345,“-0123”转换之后为-123. #include <stdio.h ...

  9. pat 抢红包

    L2-009. 抢红包 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 没有人没抢过红包吧-- 这里给出N个人之间互相发红包.抢 ...

  10. centos安装包选择--liveCD、liveDVD、bin-DVD、netinstall和minimal

    在Centos官方选择下载centos的时候有好几个文件可供下载,包括liveCD.liveDVD和bin-DVD等等.这些文件都有什么区别,我们应该选择哪个文件下载呢? liveDVD版本:它就是一 ...