AngularJs application page switching optimization solution

AngularJs application page switching optimization solution
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 SPA applications. 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. 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 the image is run, the page is displayed immediately, however, the area where the phone list should be displayed is blank, and the list data is not displayed 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. When using resolve to request data in advance, I first thought of adding a loading prompt: display the loading mask image before the network request, and hide it after the network request is complete. Therefore, when you click to enter the detail page of your mobile phone, the page displays a loading image, as shown in the following figure: clip_image002. 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. This routing rule is defined in the source code of the phonecat project as follows: image executes some tasks before page Jump, you can configure the resolve parameter in the routing rule. 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. I modified the routing configuration code on the mobile phone details page as follows: image in the above code, I can only use $ route. current. to obtain the phoneId parameter, because the page is not redirected yet, $ routeParams cannot get any value. After configuring the resolve parameter, I can inject an object named phoneDetailsService in PhoneDetailCtrl. The Code of PhoneDetailCtrl is as follows: image so that you can get the requested data 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 DOM elements change, AngularJs will add a specific class: · ng-enter to the element, which will be applied when the element is added; · ng-move, when an element is moved, it is applied. · ng-leave. When an element is deleted, it is applied. We can apply angularjsanimation to 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 ,. the view-frame.ng-leave {background: white; position: absolute; top: 0; left: 0; right: 0 ;}. view-frame.ng-enter {-webkit-animation: 0.5 s fade-in;-moz-animation: 0.5 s fade-in;-o-animation: 0.5 s fade-in; animation: 0.5 s fade-in; z-index: 100 ;}. view-frame.ng-leave {-webkit-animation: 0.5 s fade-out;-mo Z-animation: 0.5 s fade-out;-o-animation: 0.5 s fade-out; animation: 0.5 s fade-out; z-index: 99 ;} summary in Web applications, in order to get a good user experience, we 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.