AngularJs application page switching optimization solution, angularjs page Switching

AngularJs application page switching optimization solution, angularjs page Switching

The name of a product under research and development in Grape city is tentatively set to Project X. Among them, SpreadJS products in wijmo are used. In addition, some R & D summaries are sorted out during the R & D process and shared with you. For example, in this article, we will discuss the optimization scheme during page switching.

Preface

AngularJs is used to develop a single page application (SPA). Using AJAX call and partial page Refresh can reduce page jumps for a better user experience. Angular ngView and its powerful routing mechanism are the core modules for implementing SPA applications. The page switch mentioned in this Article refers to this routing mechanism, that is, displaying different views based on different URLs.

There is a very common scenario: After switching to a new page, you need to call AJAX to request some data from the server and then display the page based on the data. If no processing is done, the page loads the html template of the new page first, but the data model in the template is not requested yet. Therefore, empty data will be displayed for a period of time, which affects the user experience.

Scenario

Let's use the PhoneCat Tutorial App officially provided by Angular to illustrate this problem.

On the github homepage of the PhoneCat project, There is a saying: "There is no dynamic backend (no application server) for this application. instead we fake the application server by fetching static json files. that is to say, this example project only simulates a server, so when the page requests phones. json and the detailed data of each mobile phone, these requests will be completed in a very short time, and we do not feel any problems on the display page.

In a real network environment, it may take a relatively long time to request these json files. Let's simulate a long response time for network requests. Here I use express to replace the original http-server, and wait for 5 seconds for the client to respond to the request:

After running, you can see that the page is displayed immediately, but the area of the phone list should be displayed blank until 5 seconds later. Click a mobile phone name to go to the details page. At the beginning, only the html template content is displayed, and then the parameter data is filled to the page. Page jitter occurs during the process, which affects the user experience.

Use resolve to request data in advance

When this problem occurs, the first thing I think of is to add a loading prompt: display the loading mask image before the network request, and hide it after the network request ends. So after you click to enter the phone's detail page, the page will display a loading image, like this:

As you can see, the page should display a blank area of detailed mobile phone data, resulting in a very bad user experience. This is because the code of PhoneDetailCtrl is executed only after the page Jump occurs. At this time, the mobile phone information data has not been obtained from the server, that is, the model $ scope. phone has not been assigned a value. Is there a way to prepare the data before switching to this page?

The answer is, of course, resolve, the main character to be introduced in this article. We know that ng-view uses $ routeProvider to customize page routing rules, which are defined in the phonecat project Source Code as follows:

To perform some operations before page Jump, We can configure the resolve parameter in the routing rules.

The Resolve parameter can be injected into a group of services to the controller bound to the route. If one or more services are asynchronous objects ($ q. defer), the page will jump only after these asynchronous operations are completed. With this, we can request the detailed information of the mobile phone to the local device before the page Jump. After the jump, the data will be displayed on the target page immediately.

Modify the routing configuration code on the mobile phone details page as follows:

In the above code, I can only use $ route. current. params to obtain the phoneId parameter, because the page is not redirected yet, and $ routeParams cannot get any value. After configuring the resolve parameter, I can inject an object named phoneDetailsService in PhoneDetailCtrl. The PhoneDetailCtrl code is as follows:

In this way, the requested data can be obtained before the page Jump.

Add a switching animation to the page

To make the switching between pages smoother, you can add a transition animation to the page switching. AngularJs provides animation support for common commands such as ngRepeat, ngSwitch, and ngView.

AngularJs uses CSS to define animations. It is very easy to implement DOM element animations. When the DOM element changes, AngularJs will add a specific class to the element:

· Ng-enter, which will be applied when an element is added;

· Ng-move: the element will be applied when it is moved;

· Ng-leave: the element will be applied when it is deleted.

We can apply angularjs for ng-view. in the phone-catproject, the following code in animation.css implements the fade-in and fade-out animation for switching pages:

.view-frame.ng-enter,.view-frame.ng-leave {  background: white;  position: absolute;  top: 0;  left: 0;  right: 0;}.view-frame.ng-enter {  -webkit-animation: 0.5s fade-in;  -moz-animation: 0.5s fade-in;  -o-animation: 0.5s fade-in;  animation: 0.5s fade-in;  z-index: 100;}.view-frame.ng-leave {  -webkit-animation: 0.5s fade-out;  -moz-animation: 0.5s fade-out;  -o-animation: 0.5s fade-out;  animation: 0.5s fade-out;  z-index: 99;}

Summary

In Web applications, in order to achieve a good user experience, you need to use some tips on the interface so that users do not feel abrupt. This article provides two tips to make AngularJs applications more smooth during page switching.

 

Complete demo: AngularJs application page switching optimization solution