ANGULARJS Application page Switching optimization scheme

Grape city is still in the development of the product, the external name is tentatively x project. Which used the listed Wijmo in the Spreadjs products, in addition, in the research and development process to collate a number of research and development summary to share to everyone. such as this article in the process of page switching optimization, welcome to the exchange of threads.

Objective

ANGULARJS is used to develop a single-page application (SPA) that uses Ajax calls to match the local refresh of the page to reduce page jumps for a better user experience. Angular's ngview and its corresponding powerful routing mechanism are the core modules for implementing SPA applications. The page switching referred to in this article refers to this routing mechanism, which shows different views based on different URLs.

There is a very common scenario: after switching to a new page, you need to request some data from the server through an Ajax call and then present the page based on that data. If nothing is done, the page will load the HTML template for the new page, but the data model is not yet requested, so there will be a period of time when the empty data is displayed, which greatly affects the user experience.

Scene

Let us illustrate this problem with the Phonecat Tutorial app, which is officially given by angular.

On the GitHub home page of the Phonecat project, there was this passage: "There is no dynamic backend (no application server) for this application. Instead we fake the application server by fetching static JSON files. " That is, the example project just simulates a server, so when the page requests Phones.json and the detailed data for each phone, the requests are completed in a very short time, and we don't feel any problem with the display page.

In a real-world network environment, requesting these JSON files can take a relatively long time. Let's simulate a longer response time for network requests. Here I use express instead of the original Http-server, and then respond with a delay of 5 seconds when the client requests the data:

After running it can be seen that the page will appear immediately, but the area that should have shown the phone list is blank until 5 seconds before the list data is displayed. Click on a phone name to go to the details page, and the content of the HTML template is displayed at the beginning, before the parameter data is populated on the page. There is a jitter in the page that affects the user experience.

Use resolve to request data in advance

The first thing I thought of when I encountered this problem was to add a loading hint: Display the loading mask picture before the network request, and then hide it after the network request is over. Then clicking on the Detail page of the mobile phone will render a loading image, like this:

As you can see, the page should show blank space in the area of the phone's detailed data, resulting in a very bad user experience. This is because the Phonedetailctrl code is executed after the page jump occurs, and the cell phone information data has not been obtained from the server, that is to say $scope.phone this model has not been assigned value. Is there a way to get this data ready before switching to this page?

The answer is of course there is, that is, this article to introduce the protagonist--resolve. We know that Ng-view is a custom page routing rule through $routeprovider, which is defined in the PHONECAT project source code:

To do something before the page jumps, we can configure the resolve parameter in the routing rule.

The resolve parameter can be injected into a set of service-to-route-bound controllers. If one or more of the service is an asynchronous object ($q. Defer), then the page jumps only when these asynchronous operations are complete. With this, we can request the phone details data to be local before the page jumps. After the jump, the target page will immediately display the data normally.

I modified the routing configuration code for the phone details page as follows:

In the above code, I can only use $route.current.params to get the Phoneid parameter, because the page has not yet jumped, $routeParams is not getting any value. After configuring the Resolve parameter in this way, I can inject an object named Phonedetailsservice in the Phonedetailctrl. The code for Phonedetailctrl is as follows:

In this way, you can get the requested data before the page jumps.

Toggle animations for page joins

To make the transitions between pages smoother, transition animations can be added to the page switch. ANGULARJS has animated support for a number of commonly used directives such as ngrepeat, Ngswitch, and Ngview.

Angularjs uses CSS to define animations, so it's easy to animate DOM elements. When DOM elements change, Angularjs adds a specific class to the element:

· Ng-enter is applied when the element is added;

· Ng-move is applied when the element is moved;

· Ng-leave is applied when the element is deleted.

We can apply Angularjs animations to Ng-view, in the Phone-cat project, the following code in ANIMATION.CSS implements the fade-out animation of the switch page:

. 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-inch; -moz-animation:0.5s fade-inch; -o-animation:0.5s fade-inch; Animation:0.5s fade-inch; 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;}

Summarize

In a Web application, in order to get a good user experience, it is necessary to use some techniques on the interface to make the user not feel abrupt. This article presents a two-point technique to make the ANGULARJS application more natural and smoother when the page is switched.

Full DEMO:ANGULARJS Application page switching optimization scheme

ANGULARJS Application page Switching optimization scheme