Angular. js method of dealing with page flicker

Preface

When you're using {{}} bound data, the page loads with a full screen of {{xxx}}. The data hasn't responded yet, but the page has been rendered. This is because both the browser and angularjs need to take 1 time to render the page. This interval may be small or even imperceptible. This situation is normal, but this time may also be long, at which time users may see a full screen full of {{xxxx}}. This situation is called "Flash Of Unrendered Content (FOUC) (K)? and is always unwanted.".

Problem

For the convenience of drawing, we like to use the following methods

 <div>
 {{name}}
 </div>

But it also buried a hole for the full screen. When the interface and network response speed are fast enough, it is difficult to find this problem, but when the mobile terminal 4g or the network environment is worse, this problem will occur frequently.

Solution

1. ng-cloak

This directive is a built-in directive of angularjs, and its function is to hide all the elements it contains. After the browser loads and compiles the rendering, angularjs automatically removes the ngCloak element attribute so that the element becomes visible.

 <div ng-cloak>
 {{name}}
 </div>

2. ng-bind

This instruction is built into angularjs for binding page data. You can use this directive to bind data to the page instead of {{}}. Using ng-bind prevents unrendered {{}} from being displayed to the user. As shown below:

 <div ng-bind="name"> 
 </div>

3. resolve

When using routes route, resolve can prevent us from getting the data we need to load before route route is completely loaded. When the data is successfully loaded, the route will change and the page will be presented to the user. route will not change without successful data loading.

For reference: https://www.ofstack.com/article/80523. htm

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
 // We specify a promise to be resolved
 account: function($q) {
 var d = $q.defer();
 $timeout(function() {
 d.resolve({
 id: 1,
 name: 'Ari Lerner'
 })
 }, 1000);
 return d.promise;
 }
 }
 })
});

The resolve entry requires an key/value object, key is the name of the resolve dependency, and value can be a string (as a service) or a method that returns the dependency.

resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.

When the route is loaded, the keys in the resolve parameter can be used as an injectable dependency:

ngular.module('myApp')
.controller('AccountCtrl', 
 function($scope, account) {
 $scope.account = account;
});

We can also use resolve key to pass the results returned by the $http method, as $http ES90promises from it 's method calls:

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
 account: function($http) {
 return $http.get('http://example.com/account.json')
 }
 }
 })

It is recommended to define a stand-alone service to use resolve key and use service to return the required data accordingly (this is easier to test). To do this, we need to create an service:

First, look at accountService,

angular.module('app')
.factory('accountService', function($http, $q) {
 return {
 getAccount: function() {
 var d = $q.defer();
 $http.get('/account')
 .then(function(response) {
 d.resolve(response.data)
 }, function err(reason) {
 d.reject(reason);
 });
 return d.promise;
 }
 }
})

After defining service, we can use this service instead of calling $http directly in the above code:

ngular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
 // We specify a promise to be resolved
 account: function(accountService) {
 return accountService.getAccount()
 }
 }
 })

Summarize