CN108139890A - 软件应用架构 - Google Patents
软件应用架构 Download PDFInfo
- Publication number
- CN108139890A CN108139890A CN201680056904.3A CN201680056904A CN108139890A CN 108139890 A CN108139890 A CN 108139890A CN 201680056904 A CN201680056904 A CN 201680056904A CN 108139890 A CN108139890 A CN 108139890A
- Authority
- CN
- China
- Prior art keywords
- submodule
- spa
- application
- angularjs
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/34—Network arrangements or protocols for supporting network services or applications involving the movement of software or configuration parameters
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/50—Network services
- H04L67/60—Scheduling or organising the servicing of application requests, e.g. requests for application data transmissions using the analysis and optimisation of the required network resources
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L69/00—Network arrangements, protocols or services independent of the application payload and not provided for in the other groups of this subclass
- H04L69/22—Parsing or analysis of headers
Landscapes
- Engineering & Computer Science (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Computer Security & Cryptography (AREA)
- Information Transfer Between Computers (AREA)
Abstract
所述技术涉及允许创建在应用内具有多个单页面应用(SPA)的网络应用的软件应用架构。软件应用架构包括网络应用的每个页面所共用的组件,同时还具有被动态地加载以便迎合所述应用内的特定相应页面的组件。可动态加载的组件可以基于正使用网络浏览器应用浏览的路径中的标识符来标识。所述应用架构可以用在AngularJS的上下文以及其它SPA技术和非SPA技术中。
Description
对(一个或多个)相关申请的交叉引用
本申请涉及2016年7月26日提交的题为“Application Logging Framework(应用存录框架)”的共同转让申请(美国申请号15/220,047),并且藉此将该共同转让申请出于所有目的而通过引用并入。本申请还要求对2015年7月30日提交的印度专利申请号2343/DEL/2015的优先权,藉此将该印度专利申请的全部内容出于所有目的而通过引用并入。
背景技术
在传统网络应用设计中,网络应用由数个不同的网页构成。为了在应用内渲染特定网页,执行以下交互集合:客户端设备处的网络浏览器(使用超文本传输协议(HTTP)消息)从网络服务器请求特定网页;作为响应,网络服务器(使用HTTP)将用于页面的代码传输回给网络浏览器,所述代码包括例如超文本标记语言(HTML)、JavaScript®和层叠样式表(CSS)代码;网络浏览器然后加载代码并且渲染页面,由此使得用户能够查看页面并且与页面交互。当用户随后想要查看应用内的不同内容时,用户将点击页面上指向应用内的不同页面的超链接或输入,并且然后针对不同页面执行以上提及的请求/响应/加载/渲染过程。
单页面应用(SPA)是在单个网页内操作的网络应用。在SPA中,用于单个网页的内容由网络服务器发送给网络浏览器,并且如上文关于传统网络应用所描述的那样加载/渲染所述页面。随后,当用户想要查看应用内的不同内容时,用户将点击页面上的超链接或输入。但是,代替于以上文关于传统网络应用所描述的方式导航到不同页面,将保持加载同一页面,并且将动态地更新其内容。这种动态更新可以以数个不同的方式达成;它可以牵涉到例如网络浏览器执行后台HTTP提取以得到新内容,(经由JavaScript代码)更新页面的文档对象模型(DOM)和/或其它技术。
可以用于创建SPA的网络应用框架是AngularJS®。AngularJS是一种JavaScript框架。当开发AngularJS应用时,开发者根据AngularJS的模板语言创建HTML模板;HTML模板包括嵌入有AngularJS脚本和其它AngularJS编码构造(诸如指引)的HTML。在网络浏览器处,加载AngularJS JavaScript库,并且对HTML模板进行解译,使得所得页面看起来如在模板中定义的那样并且如在模板中定义的那样运转。
图1A示出了相关技术的样本SPA 150的数个不同方面。图1A示出了用于SPA 150的示例HTML代码块152(包括AngularJS代码的代码块152)、对应于SPA 154的数据模型154、以及由SPA 150产生的示例用户界面156。如将在下文更详细地描述的,HTML代码块152可以由网络浏览器处理;在该处理期间,可以根据所示出的数据模型154来表示SPA 150;并且可以基于数据模型154生成所得示例用户界面156并将其示出在网络浏览器的窗口中。
如在图1A中所示,代码块152将内容控制器(称为“contentCtrl”)定义为内容模块的部分;当代码块152正被处理时,SPA 150可以使用内容控制器来填充/生成所得用户界面156。
在图1A中示出的示例代码块152中,划分元素(即,<DIV>元素)通过“contentModule”的ID来标识并且包含具有文本“Today is”的串。附加地,该<DIV>元素与内容控制器(称为“contentCtrl”)相关联;并且contentCtrl被定义为具有称作“getDate()”的函数,“getDate()”使用“$scope”对象来定义。因而,当网络浏览器处理代码块152时,它将加载contentCtrl并且调用其getDate()函数。在处理期间,网络浏览器还将从<DIV>元素内读入“Today is”串,并且将getDate()函数的结果添附到“Today is”串,从而得到用户界面156中示出的示例“Today is 4/16/2015”串。
图1B示出了相关技术的非限制性示例系统140,系统140包括客户端设备100和服务器120。图1B还示出了当客户端设备100使用常规AngularJS技术请求加载托管于服务器120处的特定网页时按照相关技术中定义的那样发生的示例事件序列。
在动作101处,客户端设备100可以向服务器120传输HTTP请求消息。在动作102处,服务器120可以向客户端100传输包括原始/“未经编译”的HTML的对应HTTP响应消息。在动作103处,(在客户端设备100中运行的)网络浏览器可以提取包括SPA的各种AngularJS模块。在动作104处,客户端设备100可以执行加载SPA和相关联的模块的AngularJS引导程序阶段。
在动作105处,在完成引导程序阶段时,客户端设备100然后可以开始编译AngularJS SPA,由此产生用于页面的初始用户界面(其可以由可显示的代码/数据构成,诸如,HTML与CSS和其它代码的结合)。应当领会到,本文中提及的编译涉及AngularJS编译服务。AngularJS编译服务在两个阶段中操作。首先,编译服务将遍历DOM并且收集所有指引以创建链接函数。接下来,编译服务组合指引与作用域对象以产生将要显示的用户界面。作用域对象是可以掌握变量和函数的“所有权”的应用对象。例如,作用域对象掌握“getDate()”函数(如图1A中示出)的所有权,“getDate()”函数负责生成存储在变量“date”中的当前日期值。
在动作106处,页面进入运行时数据绑定阶段,在运行时数据绑定阶段期间,在客户端设备100处显示该页面的用户界面。在该阶段期间,客户端设备100的用户可以与页面的用户界面交互并且查看显示在用户界面中的数据。客户端设备100可以允许用户与SPA交互直至终止(动作107处),终止可以基于任何各种触发事件而发生(例如,页面被重载或者用户导航离开该页面)。
如上文指出,当用于SPA的页面被加载时,其内容可以通过动态更新而改变。在AngularJS中,AngularJS“路由”服务是用于结构化如何执行动态更新的一种机制。AngularJS路由服务一般如下操作:对于给定的Angular SPA,可以定义多个“视图”;每个视图与可以包括AngularJS编码构造的HTML模板相关联。在第一次加载页面/SPA时,HTML视图中的每一个与特定URL路径(或“路线”)相关联,并且利用路由服务来登记视图与URL路径之间的对应性。作为示例,用于页面/SPA的基线URL可以是“http://example.com/app”,并且可以包括两个视图,视图1和视图2。视图1可以具有“viewone”的路线,并且可在URL“http://example.com/app#viewone”处访问,而视图2可以具有“viewtwo”的路线,并且可在URL“http://example.com/app#viewtwo”处访问。在页面/SPA第一次加载时,它可以默认为视图1,并且由视图1产生的用户界面将被显示在网络浏览器应用中。然后,当用户点击指向URL“http://example.com/app#viewtwo”的链接时,页面/SPA将经由AngularJS路由服务动态地加载,并且然后显示由视图2产生的用户界面;这可以包括执行异步/后台HTTP提取以便获得用于视图2的内容,并且然后对应地更新用于页面的DOM。从用户的角度来看,可以看起来就像用户已经导航至完全不同的页面那样(并且事实上,在网络浏览器应用中示出的URL将已改变);然而,同一页面/SPA仍然被加载,而仅仅是底层视图改变了。
除AngularJS之外,开发了可以用于开发SPA的数个其它框架,包括但不限于Backbone.js、Ember.js和React。
尽管已经证明现存SPA框架是有用的,但是它们具有数种限制。因而,需要网络技术领域、SPA技术领域和相关技术领域中的改进。
版权声明
该专利文档的部分公开内容包含受到版权保护的素材。版权所有者并不反对任何人对专利文档或专利公开内容的拓制,因为它出现在专利与商标局的专利文件或记录中,但是以其它方式保留无论什么的所有版权。
发明内容
所述技术涉及一种允许创建在应用内具有多个SPA的单个网络应用的软件应用架构。所述软件应用架构包括所述网络应用的每个页面所共用的组件,同时还具有被动态地加载以便迎合所述应用内的特定相应页面的组件。可动态加载的组件可以基于正使用网络浏览器应用浏览的路径中的标识符来标识。
提供该发明内容来以简化形式引入以下在具体实施方式中进一步描述的概念的选集。该发明内容不旨在标识所要求保护的主题的关键特征或必要特征,也不旨在用于限制所要求保护的主题的范围;相反,该发明内容旨在提供对在该文档中描述的主题的概述。因而,将领会到,以上描述的特征仅仅是示例,并且本文描述的主题的其它特征、方面和优点将从以下具体实施方式、附图和权利要求书而变得显而易见。
附图说明
图1A例示了描绘相关技术的样本应用框架的非限制性示例图;
图1B示出了相关技术的客户端与服务器之间的非限制性示例通信过程;
图2示出了用于实施实现软件架构所需的过程的系统的非限制性示例图;
图3示出了软件框架的非限制性示例架构;
图4示出了应用框架的非限制性示例;
图5示出了根据本技术的示例性系统中的客户端与服务器之间的非限制性通信过程;
图6示出了用于加载子模块的非限制性方法;
图7A和7B示出了用于生成子模块的非限制性示例软件;以及
图8示出了包括图2中所示的系统的硬件组件的非限制性示例框图。
具体实施方式
遍及该具体实施方式单纯地使用章节标题以便为读者定向关于每个章节的大致主题;如将在以下文字中看到,许多特征的描述横跨多个章节,并且标题不应当被读作影响包括在任何章节中的描述的含义。
所选定义
当在该文档中被描述为“可以”、“能够”或者“可能”执行动作,特征或组件“可以”、“能够”或者“可能”包括在给定上下文中或者适用于给定上下文,给定项目“可以”、“能够”或者“可能”具有给定性质时,或者每当使用牵涉到术语“可以”、“能够”或者“可能”的任何类似短语时,应当理解的是,给定的动作、特征、组件、性质等存在于至少一个实施例中,尽管未必存在于所有实施例中。
如该文档中所使用的,术语“非暂时性计算机可读存储介质”包括寄存器、高速缓存存储器、ROM、半导体存储器设备(诸如D-RAM、S-RAM或其它RAM)、磁性介质(诸如闪速存储器、硬盘)、磁光介质、光学介质(诸如CD-ROM、DVD或蓝光盘)或者用于非暂时性电子数据存储的其它类型的设备。
如该文档中所使用的,术语“和/或”包括相关联的所列项目中的一个或多个中的任何以及其全部组合。
概述
本文描述的技术涉及多SPA网络应用架构。根据该架构,应用内的每个SPA至少包括全局模块、内容模块和子模块。相同的全局模块和内容模块可以跨应用使用(即,可以在包括该应用的每个SPA中是相同的);然而,用于每个SPA的子模块可以是独特的/不同的子模块。如将在下文进一步详细地描述的,每个子模块可以在软件开发过程期间基于初始文件(例如,XML文件)来定义;在开发过程期间将初始文件转换为包含JavaScript对象表示法(JSON)对象的对应JavaScript文件,并且作为应用的部分来部署所得JavaScript文件;JSON对象(称为“子模块配置对象”)可以表示相应的子模块。子模块配置对象可以指定数据,诸如,由子模块使用的脚本、与子模块相关联的视图/路线、和/或其它数据。当在网络浏览器处加载所述SPA中的一个时,可以执行以下过程:加载全局模块和内容模块,并且将对应于子模块(并且唯一地标识应用内的子模块)的参数(称为“子模块标识符”)提供给内容模块;然后,内容模块使用子模块标识符来加载对应的子模块。为了加载子模块,内容模块可以执行动作,诸如(i)获取对子模块配置对象的引用(基于子模块标识符),以及(ii)如子模块配置对象中指定的那样初始化和配置子模块。
利用该架构,共享的全局模块可以负责跨该应用中的所有SPA共用的网页内容(例如,诸如在该网络应用中的每个页面上作为特征的头部和底部之类的内容),内容模块可以负责诸如加载子模块之类的动作,并且子模块(以及潜在地,与子模块相关联的视图)可以负责提供对于网络应用内的每个SPA而言唯一/特定的信息。因而,例如,如果根据该架构定义的应用包括两个页面/SPA(页面1和页面2),页面1 SPA和页面2 SPA将包括相同的全局模块和内容模块,而不同的页面1和页面2的逻辑、表示和其它特征将由相应的不同子模块(以及对应地,与子模块相关联的视图)来处置。
图2示出了其中可以实现多SPA架构的示例系统,其中突显了系统的软件架构方面。图3是示出根据该多SPA架构定义的示例网络应用的架构图。图4示出了用于根据该多SPA架构定义的示例应用内的页面/SPA的HTML、数据模型和用户界面。图5示出了加载(根据该多SPA架构定义的)示例应用内的页面/SPA的过程。在一些实施例中,图5的过程可以牵涉子模块的加载;图6示出了用于执行该加载过程的示例过程。图7A示出了用于子模块的示例XML文件;图7B示出了对应于图7A的XML文件的示例文件,并且包括JSON子模块配置对象。以及,图8示出了其中可以实现多SPA架构的示例系统,其中突显了系统的硬件方面。
在该文档中的许多地方,描述了软件模块以及由软件模块执行的动作。这是为了描述的方便而做出的;应当理解到,每当在该文档中描述为软件模块执行任何动作时,该动作实际上由底层硬件组件(诸如处理器和存储器)根据包括所述软件模块的指令和数据来执行。
图2的描述
图2示出了其中可以实现多SPA应用架构的系统220的非限制性示例图。如将在下文描述的,根据该多SPA架构定义的一个或多个网络应用可以部署在系统220中,并且系统220中的各种组件(诸如客户端系统210和服务器系统200)可以执行涉及所部署的网络应用的不同功能。如将在下文讨论的,图2主要示出了在客户端系统210和服务器系统220处运行的软件模块(诸如网络浏览器应用211);关于可以用于执行这些软件模块的示例硬件组件的细节在下文参照图8以及在该文档中的其它地方提供。
在图2中示出的示例中,客户端系统210可以与服务器系统200(例如,经由网络240)进行通信。应当领会到,网络240可以包括互连计算设备的网络,诸如互联网。网络240还可以包括局域网(LAN)或者可以包括客户端系统210与服务器系统200之间的点对点连接。
服务器系统200可以包括网络服务器204,网络服务器204执行诸如实现HTTP协议以及经由HTTP与客户端系统210中的网络浏览器应用211(在下文进一步详细地描述)通信之类的功能性。服务器系统200还可以包括应用服务器205,应用服务器205可以例如针对根据所述架构实现的应用来执行服务器侧(或“后端”)指令。服务器系统200还可以包括数据库206,数据库206管理在服务器系统200处使用的数据的持久性存储。数据库206可以是或者包括以下中的一个或多个:关系数据库管理系统(RDBMS);面向对象的数据库管理系统(OODBMS);对象关系数据库管理系统(ORDBMS);不只结构化查询语言(NoSQL)数据仓库;对象高速缓存;分布式文件系统;数据群簇(基于诸如Hadoop之类的技术);和/或任何其它适当类型的数据存储系统。
客户端系统210可以包括用于执行涉及根据该多SPA架构定义的应用的处理的软件组件。作为非限制性示例,客户端系统210可以具有网络浏览器应用211,其至少包括渲染模块212、联网模块213和JavaScript模块214。当然,这些模块是非限制性示例,并且应用211可以包括若干个更多的模块和/或与图2中示出的那些不同的模块。
渲染模块212可以实现用于网页用户界面的图形显示和渲染的功能性。它例如可以生成对应于HTML和/或DOM的图形数据,所述HTML和/或DOM定义由网络浏览器应用211处理的网页;该图形数据可以潜在地在通过客户端系统210的操作系统的进一步修改/变换之后被显示在客户端系统210的显示器上。替换地或附加地,每当在该文档中描述为客户端系统210渲染/显示网页时,渲染/显示模块212可以执行涉及网页的渲染/显示的功能性。
联网模块213可以实现HTTP协议,并且用于处置服务器系统200中的网络服务器204与客户端系统210之间的各种HTTP消息。替换地或附加地,每当在该文档中描述为客户端系统210使用HTTP通信时,联网模块213可以处置这样的通信的HTTP方面。
JavaScript模块214可以用于执行JavaScript脚本、操控JavaScript对象、修改在网络浏览器应用211处加载的网页的DOM以及执行涉及JavaScript的其它功能性。JavaScript模块可以例如是JavaScript引擎、JavaScript虚拟机、JavaScript运行时或者能够执行JavaScript指令的任何其它类型的软件模块。替换地或附加地,每当在该文档中描述为客户端系统210执行涉及JavaScript的功能性时,这样的功能性可以由JavaScript模块214处置。
图3的描述
图3示出了用于多SPA网络应用的非限制性示例架构。图3示出了示例的多SPA网络应用300,其包括多个SPA、页面1 301-1、页面2 301-2到页面N 301-n。
如图3中所示,SPA 301-1、301-2、301-n中的每一个包括全局模块302。全局模块302可以定义跨应用300内的多个页面重复使用的内容。例如,全局模块302可以定义具有项目(诸如页面标志)的母版页,所述项目包含全局项目,包括搜索框、设置标签和/或登入/登出标签。
同样如图3中所示,SPA 301-1、301-2、301-n中的每一个还包括内容模块(例如,内容模块303)。内容模块303可以用于填充网页的主体部分。例如,内容模块303可以定义页面的头部、底部和/或主体,以及这些部分中的每一个内的各种子部分。每个内容模块303然后可以与不同的子模块(例如,子模块1)304-1至304-n相关联,并且从每个子模块生成的数据可以显示在用户界面上,如在下文更详细地讨论的。在一些实施例中,子模块可以与一个或多个不同的视图/路线相关联,使得由子模块生成的内容(至少部分地)由底层视图来生成。
图4的描述
图4示出了用于根据该多SPA架构定义的示例应用内的页面/SPA的HTML、数据模型和用户界面的非限制性示例。
在图4的示例中,示例应用包括两个SPA;一个是“图形(graph)”SPA,并且一个是“报价(quotes)”SPA。在图4中,图形代码块401、图形数据模型402和图形用户界面403对应于图形SPA;报价代码块404、报价数据模型405和报价用户界面403对应于报价SPA。
如上文所指出的,用于页面/SPA的URL中的子模块标识符可以被提供给内容模块,并且内容模块然后可以使用该子模块标识符来加载对应的子模块。在图4的示例中,图形SPA可在URL“http://example.com/graph”处获得;在该示例中,子模块标识符值是该URL中的“graph”段。类似地,报价SPA可以在URLhttp://example.com/quotes处可得;在该示例中,子模块标识符值是该URL中的“quotes”段。
图形代码块401包括对全局模块(标识为“全局模块(SPA)”)、内容模块和内容控制器(标识为“contentController”)的引用。当图形代码块401被网络浏览器应用处理时,内容模块可以加载对应于图形SPA的子模块,并且图形SPA可以被表示为如在图形数据模型402中所示的数据结构。附加地,网络浏览器可以基于图形数据模型402而生成图形用户界面403,并且在网络浏览器的窗口中显示图形用户界面403。网络浏览器可以以相同或者类似的方式执行涉及报价SPA的类似组件的处理(即,可以执行涉及报价代码块404、报价数据模型405和报价用户界面406的处理)。
如可以在图4中看到的,数据模型402、405二者包含共用的全局模块和内容模块。然而,图形数据模型402与报价数据模型405的不同之处在于,它们各自利用分离的子模块。例如,图形数据模型402利用的是填充有该模块所使用的图形数据的“图形子模块”,而数据模型405利用的是填充有该模块所使用的报价数据的“报价子模块”。因此,并且如图4中所示,图形用户界面403示出了图形,并且报价用户界面406示出了不同的报价(例如,股票报价)。
图5的描述
图5示出了系统540中的客户端系统500和服务器系统520之间的非限制性通信过程。图5涉及使用本文描述的多SPA架构的示例网络应用。在该示例中,并且如将在下文更详细地描述的,在客户端系统500处加载用于该应用内的两个页面/SPA(第一页面和第二页面,出于解释的目的而标记为“页面1”和“页面2”)的模块。
附加地,以下描述将构建在上文关于图4提供的示例上;关于该示例,并且如将在下文详细说明的,页面1对应于“图形”子模块,并且在URL“http://example.com/graph”处可得,而页面2对应于“报价”子模块,并且在URL“http://example.com/quotes”处可得。
尽管没有在图5中示出,但是客户端系统500运行包括渲染模块、联网模块和JavaScript模块的网络浏览器应用(例如,其可以对应于网络浏览器应用211),并且服务器系统520可以运行诸如网络服务器、应用服务器和数据库模块(例如,它们可以分别对应于网络服务器204、应用服务器205和数据库206)之类的软件模块。而且,尽管图2的网络240也未在图5中示出,但是在图5中示出并且描述为发生在客户端系统210和服务器系统520之间的通信可以经由网络240而发生。
在动作501处,客户端系统500中的网络浏览器应用可以将用于页面1的HTTP请求消息发送给服务器系统520。该HTTP请求消息可以包括字段,诸如:请求行,其可以指示信息,诸如(i)请求的类型(例如,请求是“GET(获取)”请求还是“POST(张贴)”请求),(ii)资源字段(即,指示所请求的资源的字段),和/或(iii)所使用的HTTP的版本;一个或多个头部字段(其可以指示“主机”头部字段,所述“主机”头部字段指示请求正被发送至的主机);和/或消息主体。资源字段可以包括子模块标识符值,所述子模块标识符值随后用在用于页面1的子模块的加载中,如将在下文进一步详细地描述的。在动作501处,客户端系统500可以存储子模块标识符值以供后续使用。
如在图5中示出的,作为示例,用于页面1的URL可以是“http://example.com/graph”,并且在动作501处传送的HTTP请求消息可以指定该URL。关于该示例,HTTP请求消息可以被格式化为如下:
此处要指出,在该示例中,“graph”是子模块标识符值(并且处在资源字段中),并且“graph”将用在“graph”子模块的加载中,如将在下文进一步详细地描述的。
在动作502处,服务器系统520可以响应于动作501的HTTP请求消息而向客户端系统500中的网络浏览器应用发送用于页面1的HTTP响应消息。该HTTP响应消息可以包括字段,诸如:状态行;一个或多个头部字段;和/或消息主体。消息主体可以包括HTML代码、JavaScript代码(其可以标识在页面1中使用的AngularJS模块)以及对应于页面1的其它代码。
在动作503处,客户端系统500中的网络浏览器应用然后可以提取(即,使用HTTP而经由网络240从服务器系统520接收)包括定义在页面1中使用的不同AngularJS模块的代码的数据以及相关代码和/或数据。可以在此处提取的数据可以包括用于全局模块的代码、用于内容模块的代码、用于子模块的代码、子模块配置对象(即,包括配置数据的数据结构,所述配置数据指定子模块的特性以及子模块将如何操作)和/或由全局模块、内容模块和/或子模块使用的其它模块。替换地或附加地,在一些实施例中,子模块配置对象可以由网络浏览器应用作为JSON对象来接收。
子模块配置对象可以包括信息,所述信息指示(i)由子模块使用的AngularJS控制器、(ii)由子模块使用的AngularJS服务、(iii)由子模块使用的AngularJS指引、(iv)由子模块使用的AngularJS过滤器、(v)由子模块使用的视图、(vi)由子模块使用的脚本和/或(vii)其它信息。对于由子模块使用的每个视图,子模块配置对象可以指示信息,诸如,对应于该视图的路线、指向用于该视图的模板的URL、和/或其它信息。替换地或附加地,在一些实施例中,子模块配置对象可以是具有如在图7B中示出的JSON文件中所示的性质的对象。
在接收到子模块配置对象之后,它可以由网络浏览器应用存储在客户端系统500中的存储器中以供后续使用。子模块配置对象可以被存储成使得可以基于子模块标识符搜索和检索它;在各种实施例中,它可以被存储为全局变量、局部变量和/或被存储在各种数据结构中,诸如,散列表或阵列。
接下来,在动作504处的引导程序阶段处,客户端系统500中的网络浏览器应用可以加载上文关于动作503所提及的各种模块;各种模块的加载可以包括下述动作,诸如,初始化模块、将模块加载到客户端系统500中的存储器中以及执行关于模块的配置操作。这可以如下执行:加载全局模块和内容模块;然后,内容模块使用如之前在例如动作501处存储的子模块标识符值来加载子模块。为了加载子模块,内容模块还可以使用如在动作503处接收到的子模块配置对象。替换地或附加地,在一些实施例中,内容模块可以执行在图6中示出并且在下文描述的方法来加载子模块。
利用该框架,并且为了总结动作504的前述描述,可以基于在所加载的页面/SPA的URL中定义的参数(如上文指出的“子模块标识符”)的值来动态地加载子模块;因而,SPA中的每个页面可以使用相同的全局和内容模块,并且应用中的各个SPA中的内容由不同的子模块(并且在一些实施例中,与子模块相关联的视图)处置。
在动作505处的编译阶段期间,产生用于页面1的初始用户界面以用于显示。为了产生用于页面1的初始用户界面,网络浏览器应用可以执行动作,诸如:遍历用于页面1的DOM、标识DOM中的AngularJS指引;基于指引生成链接函数;执行链接函数以产生包括页面1的初始用户界面的HTML;以及将构成子模块(以及其它所加载的模块)的任何事件侦听器附加到DOM,由此产生动态DOM。在其中页面1包括一个或多个底层视图的实施例中,用于页面1的初始用户界面可以基于底层视图而产生。
在动作506处的运行时绑定阶段(或“运行时阶段”)期间,网络浏览器应用将显示用于页面1的用户界面。在其中页面1包括一个或多个底层视图的实施例中,该阶段可以包括客户端系统500中的网络浏览器应用在不同视图之间导航;当从第一(所显示的视图)移动到第二视图时,网络浏览器应用可以执行异步/后台HTTP请求以获得用于第二视图的数据,并且然后渲染由第二视图产生的用户界面。该运行时数据绑定阶段将继续,直至发生导致客户端系统500中的网络浏览器应用关闭页面1的事件(例如,用户重载页面1、关闭页面1、或者导航离开页面1至另一页面)。
继续上文提及的示例,其中页面1对应于“图形”子模块,在该运行时数据绑定阶段中,客户端系统500中的网络浏览器应用可以使用图4的图形数据模型402来表示页面1,并且显示图4的图形用户界面403;并且在显示图形用户界面403的同时,客户端系统500的用户可以查看、访问和操控在图形用户界面403上示出的数据。
接下来,在动作507处,客户端系统中的网络浏览器应用可以向服务器系统520发送用于页面2的HTTP请求消息。该HTTP请求消息可以具有与上文关于动作501描述的HTTP请求消息相同和/或相似的特性,除了被改变成反映动作507的HTTP请求消息涉及页面2之外。
在动作508处,服务器系统520可以响应于动作507的HTTP请求消息而向客户端系统500中的网络浏览器应用发送用于页面2的HTTP响应消息。该HTTP响应消息可以具有与上文关于动作502描述的HTTP响应消息相同和/或相似的特性,除了被改变成反映动作508的HTTP响应消息涉及页面2之外。
在动作509处,客户端系统500和服务器系统520可以执行与上文参照动作503、动作504、动作505和动作506描述的动作相同和/或相似的动作,除了被改变成反映动作509涉及页面2之外。换言之,在动作509处,客户端系统500和服务器系统520重复动作503到动作508,加上必要的变更以涉及页面2而不是页面1。
继续上文提及的示例,其中页面2对应于“报价”子模块并且在URL“http://example.com/quotes”处可得,动作507的HTTP请求消息可以依据该示例而指示针对在“http://example.com/quotes”处可得的资源的请求。与该示例一致,子模块标识符值将是“quotes”,内容模块将使用该子模块标识符值来加载“报价”子模块,并且网络浏览器应用将使用图4的报价数据模型405,并且在运行时数据绑定阶段期间显示图4的报价用户界面406。
应当理解到,尽管动作501到动作509在上文被描述为具有给定次序的分离的动作,但这是出于描述的方便而做出的。应当理解到,在各种实施例中,以上提及的动作可以以各种次序执行;替换地或附加地,以上描述的动作(动作501到动作509)的部分可以与其它动作(动作501到动作509)的部分并发地执行和/或交错。
图6的描述
图6示出了可以由内容模块(其在客户端系统500中的网络浏览器应用内执行)执行以用于加载子模块的非限制性示例方法。如上文指出的,图6的方法可以在一些实施例中在图5的动作504处执行。替换地或附加地,图6的方法可以在任何其它适当的上下文中执行。
当图6的方法开始时,内容模块可以已经接收到子模块标识符值和子模块配置对象,其中子模块标识符值和子模块配置对象具有以上关于图5描述的特性。
在动作601处,内容模块可以基于对应子模块的名称(即,基于子模块标识符)来获取对子模块配置对象的引用(或者在一些实施例中,指针)。在各种实施例中,这可以包括执行针对子模块配置对象的查找,和/或执行包括对子模块配置对象的引用的一个或多个数据结构的搜索。
在一些实施例中,子模块配置对象可以被配置成使得其名称具有两个部分;每个名称的第一部分可以等价于针对与子模块配置对象对应的子模块的子模块标识符,并且每个名称的第二部分可以是指示该对象为子模块配置对象的串(诸如“Config”)。例如,用于“graph”子模块的子模块配置对象可以命名为“graphConfig”,并且用于“quotes”子模块的子模块配置对象可以命名为“quotesConfig”;在这些示例中,子串“graph”和“quotes”对应于相应的子模块,并且子串“Config”指示所述对象为子模块配置对象。在这样的实施例中,内容模块可以引用子模块标识符(例如,“graph”)并且将配置对象串(例如,“Config”)添附到子模块标识符以生成对应子模块配置对象的名称(例如,“graphConfig”);内容模块然后可以在子模块配置对象的所生成的名称上进行搜索以获得对子模块配置对象的引用。在一些实施例中,针对子模块配置对象的搜索可以包括调用Javascript eval()函数,其中所生成的名称是传递给eval()函数的变元。替换地或附加地,在其中子模块配置对象由客户端系统500中的网络浏览器应用存储在可搜索数据结构(例如,散列表或阵列)中的实施例中,获取对子模块配置对象的引用可以包括使用所生成的名称作为查找线索来搜索数据结构。
在动作602处,内容模块可以初始化子模块。这可以包括动作,诸如,加载定义子模块的代码、为子模块分配存储器(客户端系统500中的存储器中)、将子模块对象实例加载到所分配的存储器中、初始化子模块的性质和/或其它相关活动。
在动作603处,内容模块可以基于包括在子模块配置对象中的配置数据来配置子模块。动作603可以包括从子模块配置对象读取性质,以及基于已读取的性质来初始化与已初始化的子模块相关联的构造。例如,就子模块配置对象指示控制器、服务、指引、过滤器、视图、脚本和/或其它构造而言,内容模块可以与子模块相关联地初始化(以及登记和/或配置,如果适当的话)这样的控制器、服务、指引、过滤器、视图、脚本和/或其它构造。例如,就子模块配置对象包括与子模块相关联的视图而言,内容模块可以配置视图以及用于所述视图的路径/路线。
应当理解到,尽管动作601、动作602和动作603在上文被描述为具有给定次序的分离的动作,但这是出于描述的方便而做出的。应当理解到,在各种实施例中,以上提及的动作可以以各种次序执行;替换地或附加地,以上描述的动作601、602、603的部分可以与其它动作601、602、603的部分并发地执行和/或交错。
图7A和图7B的描述
图7A和7B示出了例证性、非限制性示例软件代码700和701。图7A示出了对应于特定子模块的非限制性示例XML文件700;图7B示出了具有至少一个JSON对象的Javascript文件701,其可以在根据所述多SPA架构的应用的开发过程期间从图7A的XML文件700生成。如所指出的,Javascript文件701包括JSON对象;该Javascript文件是可以在图5的动作503处接收的数据的示例;并且在加载时,该JSON对象是可以如上文描述的那样在图5的动作504处以及图6的方法中使用的示例子模块配置对象。
如图7A中所示,XML文件700可以包含涉及“firm”子模块的信息。包括在XML中的信息可以包括信息,诸如页面标识符(“100000”,其是用于页面/SPA/子模块的标识符)、用于模块的名称(“firm”,其是用于页面/SPA/子模块的另一标识符)、子应用名称(“IR”,引用在其内存在firm子模块的较大应用内的子应用)、以及子应用标识符(“10000000”;如此处所使用的,用于“IR”子应用的标识符)。XML文件700附加地包括关于与子模块相关联的视图的信息。例如,XML文件700包括关于“overview”视图(其将在应用内的“/overview”路径/路线处可得)和“firmContacts”视图(其将在“/firmContacts”路径/路线处可得)的信息。
如在图7B中示出的,示例JavaScript文件701具有用于“firm”子模块的结构,其中参数和参数值与在图7A的XML文件700中示出的那些匹配;但是替代于XML格式(如在图7A的XML文件中使用的),JavaScript文件701使用JSON格式来表示“firm”子模块。
图8的描述
图8示出了用于系统820的硬件架构的非限制性示例框图。在图8中示出的示例中,客户端系统810经由网络840与服务器系统800通信。网络840可以包括互联计算设备的网络,诸如互联网。网络840还可以包括局域网(LAN),或者可以包括客户端系统810与服务器系统800之间的点对点连接。
示例客户端系统810和服务器系统800可以对应于如图2中示出的客户端系统210和服务器系统200,和/或图5中示出的客户端系统500和服务器系统520。亦即,在图8中描述的硬件元件可以用于实现本文中参照图2到图7B以及在其它地方示出和描述的各种软件组件和动作。
例如,图8中的客户端系统810可以包括处理器811、存储器812、输入/输出设备813(其还可以称为“网络接口设备”)和显示设备814。
处理器811可以是或者包括例如单核或多核处理器、多个微处理器、数字信号处理器(DSP)、与DSP核相关联的一个或多个微处理器、一个或多个专用集成电路(ASIC)、一个或多个现场可编程门阵列(FPGA)电路或者片上系统(SOC)。替换地或附加地,处理器811可以被配置成使用指令集架构,诸如x86、ARM和/或任何其它指令集架构。
存储器812可以是或者可以包括一个或多个设备,诸如,RAM(诸如D-RAM或S-RAM)、硬盘、闪速存储器、磁光介质、光学介质、或者用于易失性或非易失性数据存储的其它类型的设备。
I/O设备813可以包括一个或多个设备,诸如,基带处理器和/或有线或无线收发器。I/O设备813可以传送本文中被描述为由图5的客户端系统500和/或示例网络浏览器应用211所传送的数据中的任何(包括但不限于HTTP消息)。I/O设备813根据众多格式、标准、协议或技术来实现用于通信的层1、层2和/或其它层,所述格式、标准、协议或技术诸如但不限于,以太网(或IEEE 802.3)、ATP、蓝牙、和TCP/IP、TDMA、CDMA、3G、LTE、高级LTE(LTE-A),并且由I/O设备813执行的通信可以使用这样的技术来执行。
显示设备814可以是液晶显示(LCD)显示器、发光二极管(LED)显示器或者其它类型的显示器。尽管在上文被描述为显示设备814可以被包括在客户端系统810中,但是显示设备814也可以在各种实施例中处于客户端系统810的外部并且连接到客户端系统810;例如,显示设备814可以是外部监控器、投影仪或者其它类型的显示设备。
应当领会到,客户端系统810中的元件811、812、813、814的组合可以用于实现本文中描述为由图2的示例网络浏览器应用211和/或图5的客户端系统500执行的动作、活动或特征中的每一个或其任何组合。例如,存储器812可以加载与SPA相关联的文件(例如,HTML、XML、JavaScript文件),和/或存储在本文中被描述为由网络浏览器应用211和/或客户端系统500处理和/或以其它方式处置的数据;并且处理器811可以用于操作渲染模块212、联网模块213和JavaScript模块214,和/或以其它方式处理在本文中被描述为由网络浏览器应用211和/或客户端系统500处理的数据。
替换地或附加地,客户端系统810中的存储器812可以存储指令,所述指令在由处理器811执行时使处理器811(在适当的情况下,与客户端系统810中的其它元件812、813、814结合地)实行在本文中被描述为由图2的客户端系统210、图2的示例网络浏览器应用211和/或图5的客户端系统500实行的动作、活动或特征中的每一个或其任何组合。
尽管已经在上文将客户端系统810描述为具有单个处理器811、单个存储器812和单个输入/输出设备813,但是在各种实施例中,客户端系统810可以包括具有相应特性和/或能够执行以上被描述为由单个处理器811、存储器812和输入/输出设备813执行的相应活动的一个或多个处理器(即,至少一个处理器)、一个或多个存储器(即,至少一个存储器)和/或一个或多个输入/输出设备(即,至少一个输入/输出设备)。
服务器系统800还包括用于实现针对图2的服务器系统200和/或图5的服务器系统520的软件元件的各种硬件组件。如图8中所示,服务器系统800可以包括硬件组件,诸如,处理器801、存储器802和输入/输出设备803。处理器801、存储器802和输入/输出设备803可以是分别与如上文参照客户端系统810描述的处理器811、存储器821和输入/输出设备813相同类型的设备、具有相同或相似的性质和/或执行类似的功能性。
服务器系统800中的存储器802可以用于存储涉及根据所述多SPA架构定义的应用的数据。例如,存储器802可以存储数据库206中的信息以及由网络服务器204和应用服务器205利用的组件和文件,和/或以其它方式存储本文中被描述为由服务器系统200和/或服务器系统520处理和/或以其它方式处置的数据中的任何。处理器801可以在执行对于生成相应模块而言必要的软件中使用,所述相应模块由客户端系统810请求并且被传输给客户端系统810。例如,处理器801可以用于处理涉及由应用服务器205处置的模块的数据。
同样地,I/O设备803可以由网络服务器204用于将不同的SPA应用元件传输给客户端系统810,和/或由服务器系统800利用以传送本文中被描述为由服务器系统200和/或服务器系统520传送的数据中的任何(包括但不限于HTTP消息)。
替换地或附加地,服务器系统800中的存储器802可以存储指令,所述指令在由处理器801执行时使处理器801(在适当的情况下,与客户端系统810中的其它元件802、803结合地)实行本文中被描述为由图2的服务器系统200和/或图5的服务器系统520实行的动作、活动或特征中的每一个或其任何组合。
尽管已经在上文将服务器系统800描述为具有单个处理器801、单个存储器802和单个输入/输出设备803,但是在各种实施例中,服务器系统800可以包括具有相应特性和/或能够执行以上被描述为由单个处理器801、存储器802和输入/输出设备803执行的相应活动的一个或多个处理器(即,至少一个处理器)、一个或多个存储器(即,一个或多个存储器)和/或一个或多个输入/输出设备(即,一个或多个输入/输出设备)。
当然,在图8中示出的硬件配置是非限制性示例,并且本文描述的主题可以与各种各样不同的硬件架构和元件结合地利用。例如:在该文档中的附图中的许多中(包括但不限于在图5和图6中)示出了单独的功能/动作块;在各种实施例中,那些块的功能可以使用(i)单独的硬件电路,(ii)使用专用集成电路(ASIC),(iii)使用一个或多个数字信号处理器(DSP),(iv)使用以上参照图8描述的硬件配置,(v)经由其它硬件布置、架构和配置,和/或经由在(i)到(v)中描述的技术的组合来实现。
所述主题的技术优点
传统SPA技术的一个普遍理解到的限制在于,难以开发大SPA(即,难以开发具有许多不同视图和/或许多不同类型的内容的SPA)。所述多SPA架构可以在一些实施例中被看作解决这一问题,因为在给定共用的全局模块和内容模块的情况下,开发者能够主要关注于开发其自己的子模块。与此相关,所述架构允许开发者容易地利用应用范围的元素(诸如,可重复使用的AngularJS指引的集合(例如,用户界面元素,诸如,日期检出器、预先输入等)、跨页面的错误存录和追踪特征、导航和辅助程序函数、通用脚本辅助程序和扩展)。附加地,由于可以利用配置文件定义客户端模块(以及基于所开发的配置文件对应加载)的方式,开发者能够容易地改变任何给定子模块的构成,由此允许灵活的应用开发。
另外,根据所述多SPA架构定义的应用在一些实施例中可以享有性能益处,诸如,改进的页面加载时间,以及在由应用使用的存储器的量上的改进。因为用于特定页面/SPA的存储器可以在该页面/SPA关闭之后被释放,并且因为图5和/或图6中(以及在其它地方中)描述的用于加载页面的方案允许页面/SPA的高性能的加载,因此使用所述多SPA架构构建的应用可以使用较少的存储器并且提供与其它应用架构相比更具响应性的用户体验,所述其它应用架构诸如包括单个SPA和许多视图的架构。
应当领会到,在该文档中描述的技术包括许多优点,并且以上提及的优点是非穷举性的;附加地,还应当领会到,尽管一些优点或者优点的组合可以存在于一些实施例中,但是一些优点或者优点的组合可以不存在于其它实施例中;并且包括以上描述的那些的特定实施例的优点不应当被解读为限制其它实施例或权利要求书。
所述主题的进一步应用
如上文所指出的,在本文中描述的所述多SPA架构中,可以针对应用中的每个单独的页面/SPA动态地加载不同的子模块,同时应用中的所有页面/SPA使用相同的全局模块和内容模块。作为关于此的变形,在一些实施例中,可以将应用定义为仅具有单个页面/SPA。在这样的实施例中,使用单个全局模块和内容模块;当加载应用中的第一页面时,加载全局模块和内容模块,并且然后由内容模块加载子模块(如上文关于图5、图6以及其它地方所描述的,加上必要的变更)。随后,当用户导航到应用内的不同区域时,不同子模块由相同的全局模块和内容模块来加载。
另外,作为关于在前面的段落中描述的内容的另一变形,单个内容模块可以能够处置多SPA架构和单SPA架构二者。在这样的实施例中,内容模块被配置成在多SPA或单SPA模式中操作;在定义内容模块如何加载子模块的代码中,内容模块就其是在多SPA模式中还是单SPA模式中操作进行检查,并且相应地加载子模块。在这样的实施例中,子模块可以在多SPA模式或单SPA模式二者中被利用(即,相同的子模块可以用在多SPA应用和单SPA应用二者中,并且将由不同应用中的内容模块相应地加载)。
在本文描述的示例中,出于解释而非限制的目的,阐述了具体细节,诸如特定节点、功能实体、技术、协议、标准等,以便提供对所描述的技术的理解。对于本领域技术人员将显而易见的是,可以实践除所描述的具体细节之外的其它实施例。在其它实例中,省略了公知的方法、设备、技术等的详细描述,以便不以不必要的细节使描述模糊不清。
尽管已经关于Javascript技术、AngularJS技术和其它具体技术描述了该文档的主题,但这是出于描述的方便而做出的;要理解到,在该文档中描述的主题适用于任何其它适当的技术的上下文中,包括但不限于,其它SPA技术、其它脚本化技术和/或语言、和/或其它网络技术的上下文中。
尽管已经结合当前被视为是最实际且优选的实施例的内容描述了上面的主题,但是要理解到,所述主题不应限于所公开的实施例,而是相反地,所述主题应被视为覆盖各种修改和等同布置。
Claims (21)
1.一种方法,包括:
在包括处理器、存储器和网络接口设备的客户端设备处:
向网络服务器并且经由所述网络接口设备传输超文本传输协议(HTTP)请求消息,其中:
所述HTTP请求消息指示用于单页面应用(SPA)的统一资源定位符(URL);
所述SPA是包括多个SPA的网络应用的部分;
所述SPA包括所述网络应用中的所述多个SPA所共用的全局模块以及特定于所述SPA的子模块;以及
所述URL的一部分是唯一地标识所述网络应用内的所述SPA的子模块标识符;
从所述网络服务器并且经由所述网络接口设备接收一个或多个HTTP响应消息,其中所述HTTP响应消息包括:
定义所述全局模块的Javascript代码;
定义所述子模块的Javascript代码;以及
包括用于所述子模块的配置数据的子模块配置对象;
加载所述全局模块;以及
加载所述子模块,其中加载所述子模块包括:
使用所述子模块标识符来获取对所述子模块配置对象的引用;
初始化所述子模块;以及
基于所述子模块配置对象来配置所述子模块。
2.根据权利要求1所述的方法,其中所述客户端设备进一步包括显示设备,所述方法进一步包括:
基于所述全局模块和所述子模块而生成用户界面;以及
在所述显示设备上显示所述用户界面。
3.根据权利要求1所述的方法,其中,所述全局模块和子模块是AngularJS模块。
4.根据权利要求1所述的方法,其中,在所述一个或多个HTTP消息中作为JavaScript对象表示法(JSON)对象接收所述子模块配置对象。
5.根据权利要求1所述的方法,
其中所述子模块配置对象指示与所述子模块相关联的一个或多个AngularJS视图,
其中所述AngularJS视图中的每一个与相应的超文本标记语言(HTML)模板和路线相关联,并且
其中所述方法进一步包括:
利用AngularJS路由服务来登记所述AngularJS视图。
6.根据权利要求5所述的方法,进一步包括:
基于所述子模块和所述AngularJS视图来生成用户界面;以及
在显示设备上显示所述用户界面。
7.一种客户端设备,包括:
至少一个处理器;
至少一个存储器;以及
至少一个网络接口设备;
其中所述至少一个处理器、至少一个存储器和至少一个网络接口设备被配置成执行包括以下的动作:
向服务器传输包括统一资源定位符(URL)的请求消息,其中:
单页面应用(SPA)被托管在所述URL处;
所述SPA是包括多个SPA的应用的部分;以及
所述SPA包括所述多个SPA所共用的全局模块以及特定于所述SPA的子模块;
从所述服务器接收一个或多个响应消息,其中所述一个或多个响应消息包括子模块配置对象,所述子模块配置对象包括用于所述子模块的配置数据;
加载所述子模块,其中加载所述子模块包括:
初始化所述子模块;以及
基于所述子模块配置对象来配置所述子模块;以及
基于所述全局模块和所述子模块来生成用户界面;以及
在显示设备上显示所述用户界面。
8.根据权利要求7所述的客户端设备,
其中所述URL的一部分是唯一地标识所述SPA的子模块标识符,并且
其中所述动作进一步包括:
使用所述子模块标识符来获取对所述子模块配置对象的引用。
9.根据权利要求7所述的客户端设备,其中所述动作进一步包括:
基于所述全局模块和所述子模块来生成用户界面;以及
在显示设备上显示所述用户界面。
10.根据权利要求7所述的客户端设备,其中,所述全局模块和子模块是Javascript模块。
11.根据权利要求10所述的客户端设备,其中,所述全局模块和子模块是AngularJS模块。
12.根据权利要求11所述的客户端设备,
其中所述子模块配置对象指示与所述子模块相关联的一个或多个AngularJS视图,
其中所述AngularJS视图中的每一个与相应的超文本标记语言(HTML)模板和路线相关联,并且
其中所述动作进一步包括:
利用AngularJS路由服务来登记所述AngularJS视图。
13.根据权利要求10所述的客户端设备,其中,在所述一个或多个HTTP消息中作为JavaScript对象表示法(JSON)对象接收所述子模块配置对象。
14.一种具有存储在其上的指令的非暂时性计算机可读存储介质,所述指令在包括至少一个处理器、至少一个存储器和至少一个网络接口设备的客户端设备处执行时使所述至少一个处理器实行包括以下的动作:
向服务器传输包括统一资源定位符(URL)的请求消息,其中:
单页面应用(SPA)被托管在所述URL处;
所述SPA是包括多个SPA的应用的部分;
所述SPA包括特定于所述SPA的子模块;以及
所述URL的一部分是唯一地标识所述SPA的子模块标识符;
从所述服务器接收一个或多个消息,所述一个或多个消息包括:
定义所述子模块的代码;以及
包括用于所述子模块的配置数据的子模块配置对象;以及
基于所述子模块标识符和所述子模块配置对象来加载所述子模块。
15.根据权利要求14所述的非暂时性计算机可读存储介质,其中加载所述子模块包括:
使用所述子模块标识符来获取对所述子模块配置对象的引用;以及
基于所述子模块配置对象来配置所述子模块。
16.根据权利要求15所述的非暂时性计算机可读存储介质,其中,所述子模块是Javascript模块。
17.根据权利要求16所述的非暂时性计算机可读存储介质,其中,所述子模块配置对象被包括在作为JavaScript对象表示法(JSON)对象从所述服务器接收的数据中。
18.根据权利要求16所述的非暂时性计算机可读存储介质,其中,所述子模块是AngularJS模块。
19.根据权利要求14所述的非暂时性计算机可读存储介质,
其中所述子模块配置对象指示与所述子模块相关联的一个或多个视图,
其中所述视图中的每一个与相应的模板和路线相关联,并且
其中所述动作进一步包括:
利用路由服务来登记所述视图。
20.根据权利要求19所述的非暂时性计算机可读存储介质,其中所述动作进一步包括:
基于所述子模块和所述视图来生成用户界面;以及
在显示设备上显示所述用户界面。
21.一种方法,包括:
在包括至少一个处理器和至少一个网络接口设备的服务器系统处:
从客户端设备接收包括统一资源定位符(URL)的请求消息,其中:
单页面应用(SPA)由所述服务器系统托管在所述URL处;
所述SPA是包括多个SPA的应用的部分;
所述SPA包括特定于所述SPA的子模块;以及
所述URL的一部分是唯一地标识所述SPA的子模块标识符;
响应于所述请求消息并且向所述客户端设备传输信息,所述信息包括:
定义所述子模块的代码;以及
包括用于所述子模块的配置数据的子模块配置对象。
Applications Claiming Priority (5)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
IN2343/DEL/2015 | 2015-07-30 | ||
IN2343DE2015 | 2015-07-30 | ||
US15/219913 | 2016-07-26 | ||
US15/219,913 US20170034306A1 (en) | 2015-07-30 | 2016-07-26 | Software application architecture |
PCT/US2016/044219 WO2017019749A1 (en) | 2015-07-30 | 2016-07-27 | Software application architecture |
Publications (2)
Publication Number | Publication Date |
---|---|
CN108139890A true CN108139890A (zh) | 2018-06-08 |
CN108139890B CN108139890B (zh) | 2019-11-01 |
Family
ID=57883244
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201680056904.3A Active CN108139890B (zh) | 2015-07-30 | 2016-07-27 | 软件应用架构 |
Country Status (6)
Country | Link |
---|---|
US (7) | US20170034306A1 (zh) |
CN (1) | CN108139890B (zh) |
AU (2) | AU2016298101A1 (zh) |
CA (1) | CA2994274C (zh) |
HK (1) | HK1256485A1 (zh) |
WO (1) | WO2017019749A1 (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109634647A (zh) * | 2018-12-25 | 2019-04-16 | 苏州思必驰信息科技有限公司 | 大型前端项目的构建方法及系统 |
CN109739604A (zh) * | 2018-12-28 | 2019-05-10 | 北京城市网邻信息技术有限公司 | 页面渲染方法、装置、服务器及存储介质 |
CN113326043A (zh) * | 2021-05-26 | 2021-08-31 | 上海哔哩哔哩科技有限公司 | 网页渲染方法、网页制作方法及网页渲染系统 |
Families Citing this family (30)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US11847040B2 (en) | 2016-03-16 | 2023-12-19 | Asg Technologies Group, Inc. | Systems and methods for detecting data alteration from source to target |
CN108810045B (zh) * | 2017-04-28 | 2021-03-16 | 武汉斗鱼网络科技有限公司 | 基于Json文件的Flash应用更新方法及系统 |
CN107786630B (zh) * | 2017-09-06 | 2020-08-28 | 阿里巴巴集团控股有限公司 | 一种web应用包处理方法、装置及设备 |
US11057500B2 (en) | 2017-11-20 | 2021-07-06 | Asg Technologies Group, Inc. | Publication of applications using server-side virtual screen change capture |
US11611633B2 (en) | 2017-12-29 | 2023-03-21 | Asg Technologies Group, Inc. | Systems and methods for platform-independent application publishing to a front-end interface |
US10812611B2 (en) | 2017-12-29 | 2020-10-20 | Asg Technologies Group, Inc. | Platform-independent application publishing to a personalized front-end interface by encapsulating published content into a container |
US10877740B2 (en) * | 2017-12-29 | 2020-12-29 | Asg Technologies Group, Inc. | Dynamically deploying a component in an application |
US10397304B2 (en) | 2018-01-30 | 2019-08-27 | Excentus Corporation | System and method to standardize and improve implementation efficiency of user interface content |
CN109240673B (zh) * | 2018-08-03 | 2021-11-05 | 福建天泉教育科技有限公司 | 一种基于react-native的视图动态加载更新方法及系统 |
US10839037B2 (en) | 2018-09-21 | 2020-11-17 | Microsoft Technology Licensing, Llc | Connected application experience |
US11418621B2 (en) | 2018-09-21 | 2022-08-16 | Microsoft Technology Licensing, Llc | Cloud-based composable data layer |
CN110968824B (zh) * | 2018-09-30 | 2023-08-25 | 北京国双科技有限公司 | 页面数据处理方法和装置 |
US10983767B2 (en) * | 2019-01-04 | 2021-04-20 | T-Mobile Usa, Inc. | Microservice-based software development |
US11068259B2 (en) | 2019-01-04 | 2021-07-20 | T-Mobile Usa, Inc. | Microservice-based dynamic content rendering |
US10963230B2 (en) | 2019-02-14 | 2021-03-30 | International Business Machines Corporation | Single page application continuous integration, build, and deployment |
US10678600B1 (en) | 2019-03-01 | 2020-06-09 | Capital One Services, Llc | Systems and methods for developing a web application using micro frontends |
US11762634B2 (en) | 2019-06-28 | 2023-09-19 | Asg Technologies Group, Inc. | Systems and methods for seamlessly integrating multiple products by using a common visual modeler |
CN110377274B (zh) * | 2019-07-08 | 2023-05-05 | 紫光云技术有限公司 | 基于Single-Spa的微前端架构系统及开发、部署方法 |
US11080354B2 (en) * | 2019-08-29 | 2021-08-03 | Capital One Services, Llc | Systems and methods for presenting web application content |
US11941137B2 (en) | 2019-10-18 | 2024-03-26 | Asg Technologies Group, Inc. | Use of multi-faceted trust scores for decision making, action triggering, and data analysis and interpretation |
US11886397B2 (en) | 2019-10-18 | 2024-01-30 | Asg Technologies Group, Inc. | Multi-faceted trust system |
US11055067B2 (en) | 2019-10-18 | 2021-07-06 | Asg Technologies Group, Inc. | Unified digital automation platform |
US11693982B2 (en) | 2019-10-18 | 2023-07-04 | Asg Technologies Group, Inc. | Systems for secure enterprise-wide fine-grained role-based access control of organizational assets |
US11553030B2 (en) * | 2020-06-01 | 2023-01-10 | Microsoft Technology Licensing, Llc | Service worker configured to serve multiple single page applications |
US11449186B2 (en) * | 2020-06-30 | 2022-09-20 | Cognizant Technology Solutions India Pvt. Ltd. | System and method for optimized generation of a single page application for multi-page applications |
US11849330B2 (en) | 2020-10-13 | 2023-12-19 | Asg Technologies Group, Inc. | Geolocation-based policy rules |
CN112612539B (zh) * | 2020-12-18 | 2024-02-13 | 北京达佳互联信息技术有限公司 | 数据模型卸载方法、装置、电子设备及存储介质 |
US11789963B2 (en) | 2021-03-18 | 2023-10-17 | Capital One Services, Llc | Systems and methods for presenting web application content |
US11734495B2 (en) | 2021-09-20 | 2023-08-22 | Capital One Services, Llc | Systems and methods for integrating application components in a web application |
CN116578299B (zh) * | 2023-07-12 | 2023-09-08 | 成都数默科技有限公司 | 一种基于AngularJS框架的大数据列表实现方法 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103399693A (zh) * | 2013-07-08 | 2013-11-20 | 北京华胜天成科技股份有限公司 | 单页面整体刷新后菜单重新定位方法及系统 |
US20130332917A1 (en) * | 2012-06-08 | 2013-12-12 | Shawn A. Gaither | Out of Band Services Updates |
US20150188779A1 (en) * | 2013-12-31 | 2015-07-02 | Jut, Inc. | Split-application infrastructure |
Family Cites Families (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7882174B2 (en) * | 2008-09-29 | 2011-02-01 | Microsoft Corporation | Multiple parallel user experiences provided by a single set of internet hosting machines |
GB2578840B (en) * | 2012-10-08 | 2020-09-02 | Fisher Rosemount Systems Inc | Dynamically reusable classes |
US20150007278A1 (en) * | 2013-06-28 | 2015-01-01 | Business Objects Software Ltd. | Authentication for single page web interfaces |
US9244660B2 (en) * | 2013-08-13 | 2016-01-26 | Salesforce.Com, Inc. | Responsive self-service website template |
-
2016
- 2016-07-26 US US15/219,913 patent/US20170034306A1/en not_active Abandoned
- 2016-07-27 AU AU2016298101A patent/AU2016298101A1/en not_active Abandoned
- 2016-07-27 WO PCT/US2016/044219 patent/WO2017019749A1/en active Application Filing
- 2016-07-27 CN CN201680056904.3A patent/CN108139890B/zh active Active
- 2016-07-27 CA CA2994274A patent/CA2994274C/en active Active
-
2018
- 2018-11-28 US US16/202,373 patent/US10554785B2/en active Active
- 2018-12-05 HK HK18115523.4A patent/HK1256485A1/zh unknown
-
2019
- 2019-04-05 AU AU2019202412A patent/AU2019202412B2/en active Active
-
2020
- 2020-01-07 US US16/736,133 patent/US11082533B2/en active Active
-
2021
- 2021-07-20 US US17/380,123 patent/US11375046B2/en active Active
-
2022
- 2022-05-27 US US17/826,852 patent/US11546436B2/en active Active
- 2022-11-22 US US17/992,136 patent/US11785099B2/en active Active
-
2023
- 2023-08-30 US US18/458,228 patent/US20230412697A1/en active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20130332917A1 (en) * | 2012-06-08 | 2013-12-12 | Shawn A. Gaither | Out of Band Services Updates |
CN103399693A (zh) * | 2013-07-08 | 2013-11-20 | 北京华胜天成科技股份有限公司 | 单页面整体刷新后菜单重新定位方法及系统 |
US20150188779A1 (en) * | 2013-12-31 | 2015-07-02 | Jut, Inc. | Split-application infrastructure |
Non-Patent Citations (1)
Title |
---|
HUNG HO NGOC: "single page web applications with restful API and AngularJS", 《HTTP://WWW.THESEUS.FI/BITSTREAM/HANDLE/10024/84236/THESIS_SPA.PDF?SEQUENCE=1》 * |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109634647A (zh) * | 2018-12-25 | 2019-04-16 | 苏州思必驰信息科技有限公司 | 大型前端项目的构建方法及系统 |
CN109634647B (zh) * | 2018-12-25 | 2022-02-01 | 思必驰科技股份有限公司 | 大型前端项目的构建方法及系统 |
CN109739604A (zh) * | 2018-12-28 | 2019-05-10 | 北京城市网邻信息技术有限公司 | 页面渲染方法、装置、服务器及存储介质 |
CN109739604B (zh) * | 2018-12-28 | 2022-04-15 | 北京城市网邻信息技术有限公司 | 页面渲染方法、装置、服务器及存储介质 |
CN113326043A (zh) * | 2021-05-26 | 2021-08-31 | 上海哔哩哔哩科技有限公司 | 网页渲染方法、网页制作方法及网页渲染系统 |
CN113326043B (zh) * | 2021-05-26 | 2022-05-03 | 上海哔哩哔哩科技有限公司 | 网页渲染方法、网页制作方法及网页渲染系统 |
Also Published As
Publication number | Publication date |
---|---|
US20230412697A1 (en) | 2023-12-21 |
US20210352162A1 (en) | 2021-11-11 |
CN108139890B (zh) | 2019-11-01 |
US20200213420A1 (en) | 2020-07-02 |
CA2994274C (en) | 2021-02-16 |
AU2019202412A1 (en) | 2019-05-02 |
US11082533B2 (en) | 2021-08-03 |
WO2017019749A1 (en) | 2017-02-02 |
US20170034306A1 (en) | 2017-02-02 |
HK1256485A1 (zh) | 2019-09-27 |
AU2016298101A1 (en) | 2018-03-08 |
US20230093439A1 (en) | 2023-03-23 |
US20190098115A1 (en) | 2019-03-28 |
US11785099B2 (en) | 2023-10-10 |
US20220294864A1 (en) | 2022-09-15 |
US11375046B2 (en) | 2022-06-28 |
CA2994274A1 (en) | 2017-02-02 |
AU2019202412B2 (en) | 2021-04-15 |
US10554785B2 (en) | 2020-02-04 |
US11546436B2 (en) | 2023-01-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108139890B (zh) | 软件应用架构 | |
US10048949B2 (en) | Methods and systems for providing a user interface | |
Khanna et al. | Ionic: Hybrid Mobile App Development | |
Alber et al. | Beginning app development with parse and PhoneGap | |
Hussain | Learning PHP 7 High Performance | |
Gupta | Java 11 and 12–New Features: Learn about Project Amber and the latest developments in the Java language and platform | |
Arif et al. | Adopting. NET 5: Understand modern architectures, migration best practices, and the new features in. NET 5 | |
Ramgir et al. | Java 9 High Performance: Practical techniques and best practices for optimizing Java applications through concurrency, reactive programming, and more | |
Rajput | Designing Applications with Spring Boot 2.2 and React JS: Step-by-step guide to design and develop intuitive full stack web applications | |
Padilla et al. | Pro PHP application performance: tuning PHP Web projects for maximum performance | |
Padmanabhan | Java EE 8 and Angular: A practical guide to building modern single-page applications with Angular and Java EE | |
Steyer | Forms and Form Data Binding: Interaction with the User | |
Khan | JavaScript for. NET Developers | |
Narayn | JavaScript Before You React | |
Nguyen | How JavaScript ecosystem and open-source tooling enable a modern era of Single-Page Applications | |
Joshi et al. | Introduction to ASP. NET Core | |
Troelsen et al. | ASP. NET MVC and Web API | |
Sreekumar | Cross Platform Lightweight Social Networking Application for Next Generation E-Commerce | |
Joshi et al. | XML in WCF and Web API | |
Moroney | Foundations of Atlas: Rapid Ajax Development with ASP. NET 2.0 | |
Joshi et al. | Structural Patterns: Façade, Flyweight, and Proxy | |
Robinson et al. | Introducing Meteor | |
Ambler et al. | Knockout | |
Leinecker | ASP. Net Solutions: 23 Case Studies: Best Practices for Developers |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 1256485 Country of ref document: HK |
|
GR01 | Patent grant | ||
GR01 | Patent grant |