Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

SPA (single page application) Single page implementing method and system

An implementation method and single-page technology, applied in the Internet field, can solve problems such as unfriendly, ineffective browser back button failure, poor user experience, etc., and achieve the effect of reducing time waiting, improving page access efficiency, and eliminating stuttering.

Inactive Publication Date: 2018-09-04
JIANGNAN UNIV
View PDF4 Cites 17 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

This implementation method has the advantages of fast and convenient, so this method is often used in the industry, but at the same time, this processing method brings some unfriendly experiences to some new applications, such as repeated loading of public files, and there are pages in the process of page jumping. Poor user experience performance such as blank gaps
In order to realize the view switching mode without refreshing, the traditional method is to use AJAX to fetch data from the back and then render it in the HTML of the front page, but AJAX has a fatal shortcoming that it cannot realize the failure of the browser's back button

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • SPA (single page application) Single page implementing method and system
  • SPA (single page application) Single page implementing method and system

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0035]本发明实施例提供一种SPA单页面实现方法，参见图2，具体实现步骤包括：

[0036]步骤一：引用核心文件并注入；

[0037]步骤二：定义路由信息表；

[0038]步骤三：定义重新加载范围。

[0039]本发明实施例通过基于AngularJS以及其核心路由插件引用核心文件并注入、定义路由信息表实现灵活配置前端路由，并且定义重新加载范围，实现了灵活定义需要重新加载的范围，降低了重复加载公共文件的时间，从而提高了页面访问效率；因为降低了页面切换的时间等待，所以带来了更加优秀的用户体验，消除了卡顿、页面空白等不友好体验。

Embodiment 2

[0041]本发明实施例提供一种SPA单页面实现方法，参见图2，具体实现步骤包括：

[0042]步骤一：引用核心文件并注入；

[0043]首先需要在页面引入angular和angular-route，要在angular-route之前引入angular。

[0044]

[0045]

[0046] Because angularjs is an MVC front-end framework, one of its core ideas is to mount on demand, so it is not enough to introduce it on the page. It is also necessary to inject a dependency on ngRoute in the module declaration. The specific reference code:

[0047] var app = angular.module('MyApp',['ngRoute']);

[0048] After importing files and modules, you can use routing services and instructions in templates or controllers.

[0049] Step 2: define routing information table;

[0050] In the design mode of angularjs, defining the routing information table can be equivalent to the initial application of the program. The program will render the page according to the content of the routing information table, and at the same time load the page according to the address of the browser or the routing method.

[0051] The $routeProvide...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention discloses a SPA (single page application) Single page implementing method and system. A SPA mode is implemented through the use of Angular JS and router plugin of Angular JS core modulengRoute; a front-end router is flexibly configured; variation of a 'local' range is flexibly defined; therefore, another page opening mode is provided, which allows page switching to be achieved without reloading a whole page. 'Local' variation is implemented by means of routing; the whole local can be well packaged into a whole page switching mode through a front-end technique; however, reloadinga common module is not actually acquired; page switching can be achieved just by loading required modules and performing partial rendering according to needs; time to reloading common files is shortened; therefore, page accessing efficiency is improved, and time to wait for page switching is shortened. User experience is better, and the unfriendly experiences, such as lagging and blank page, canbe eliminated.

Description

technical field [0001] The invention relates to a method and system for realizing a SPA single page, belonging to the technical field of the Internet. Background technique [0002] SPA: Single Page Application refers to a web-based application or website. When this single page interacts with the user, it will not jump to other pages when the user clicks on an object or button. [0003] Ajax: "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), refers to a web development technology for creating interactive web applications. [0004] AngularJS: An excellent front-end JS framework, a library written in JavaScript. it can be passed <script>标签添加到HTML页面。最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。[0005]HTML：超文本标记语言，标准通用标记语言下的一个应用。"超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。[0006]在Web Service,Ajax,Web 2.0,REST等Web应用与技术话题热潮，带动许多第二代的Web开发技术成长之后，这些Web应用与技术话题也渐渐地消退。不过许多人可能不曾发现，其实这些技术名词，是在慢慢地显露一点：Web应用程序逐渐从Server Side转移到Client Side，也就是浏览器身上。时至今日，浏览器也发展至可以支持H5、Css3、ES5的基本标准，因此以...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
IPC IPC(8): G06F8/38G06F17/30
CPCG06F8/38
Inventor 孔祥智袁志玲李玲
Owner JIANGNAN UNIV
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com