Angularjs solution to deal with page flickering

summary

When using {{}} to bind data, the page loading will be full of {{xxx}}. The data has not responded yet, but the page has been rendered. This is because both the browser and angularjs rendering pages take a certain amount of time. This interval may be very small, and it is not even felt. Everything is normal in this situation, but the time may also be very long. At this time, the user may see the screen full of {{xxxx}}. This situation is called "Flash Of Unrendered Content (FOUC)(K)? and is always unwanted."

question

For convenience, we like to use the following method

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

But this also laid a pit for the 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 for angularjs, and its function is to hide all elements contained by it. After the browser loading and compiling and rendering is completed, angularjs will automatically delete the ngCloak element attribute, so that the element will become visible.

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

2、ng-bind

This directive is a built-in angularjs directive for binding page data. This directive can be used instead of {{}} to bind data to the page. Using ng-bind prevents unrendered {{}} from being displayed to users. As shown below:

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

3、resolve

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

Can refer to

https:///article/

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

The resolve item requires a key/value object. The key is the name of the resolve dependency. The 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 injectable dependencies:

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

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

('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/',
 resolve: {
  account: function($http) {
  return $('/')
  }
 }
 })

It is recommended to define a separate service to use resolve key and use the service to return the required data accordingly (this method is easier to test). To handle this, we need to create a service:

First, take a look at accountService.

('app')
.factory('accountService', function($http, $q) {
 return {
 getAccount: function() {
  var d = $();
  $('/account')
  .then(function(response) {
  ()
  }, function err(reason) {
  (reason);
  });
  return ;
 }
 }
})

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

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