Use AngularJS to develop a large-scale single-page application (SPA)-technical translation

Introduction to Translation

What does such a name contain? If you are a fan of the classic Seinfeld TV show, you must know the name of Donna Chang. When Jerry met Donna, Donna was not a Chinese, but he was talking about his inherent impressions of China, such as his interest in acupuncture and occasional pronunciation of a word with a Chinese accent, she reduced her end name to Chang Donna talking to George's mother over the phone (by referencing Confucius) and gave her some advice. When George introduced Donna to his parents, George's mother realized that Donna was not a Chinese and therefore did not accept Donna's advice.

SPA is defined to provide a smooth user experience for a single web page application or website that is close to a desktop application. in a SPA, all the necessary code-HTML, JavaScript, and CSS-are obtained when a single page is loaded, or related resources are dynamically loaded and added to the page as needed, which often happens in response to user actions. although modern Web technologies (such as those introduced in HTML5) provide independent logical pages in applications for mutual perception and navigation, the page does not reload any endpoints during the process, or the control is transferred to another page. interactions with single-page applications are often designed to dynamically interact with web servers located in the background.

So what if this technology is used to compare with the Master Pages of ASP. NET Master Pages? It is true that ASP. NET master pages allow you to create a consistent layout for pages in your application. A separate master page defines the appearance and standard actions of an application on all pages (or a set of pages) of the application. then you can create independent pages for the content you want to display. when a user initiates a request to the content page, they will combine the layout of the master page with the content from the content page to generate the output.

When you study SPA and ASP. NET master page to achieve the difference between the two, you will begin to realize that there are more and more identical places between them-that is, SPA can be seen as a simple shell page with content pages, like a master page, only the shell page in the SPA cannot be reloaded and executed according to every new page request as the master page.

Maybe the "single-page application" is an unlucky name (like donon'cheng). It makes you believe that this technology is not suitable for development and needs to be extended to the enterprise level, web applications that may contain hundreds of pages and thousands of users.

The goal of this article is to develop hundreds of pages of content based on a single page application, including authentication, authorization, session status, and other functions. It can support enterprise-level applications of thousands of users.

AngularJS-Overview

The examples in this article include creating/following new user accounts and creating/updating customers and products. In addition, it allows users to query all information, create and follow new sales orders. To implement these functions, this example is based onAngularJS. AngularJS is an open-source Web application framework maintained by developers in the Google and AngularJS communities.

AngularJS only requires HTML, CSS, and JavaScript to create a single page application on the client. It aims to make development and testing easier and enhance the performance of MVC Web applications.

This library reads other custom tag attributes contained in HTML, and then follows the instructions of this custom attribute to combine page I/O into a module with standard JavaScript variables. The values of these JavaScript standard variables can be set manually or obtained from static or dynamic JSON data sources.

Now, when you want to create a SPA application using AngularJS, the first two things you need to do are to set up a shell page and the route table used to obtain the content page. at the beginning, the shell page only needs a reference from the AngularJS JavaScript library, and an ng-view to tell AngularJS that the content page must be rendered at the place on the shell page.

AngularJS Shell Page example 

 
 

  
  
Add New Customer
  
  
Show MERs