AngularJS prevents page flashes and angularjs flashes

AngularJS prevents page flashes and angularjs flashes

We know that when the page or component of an application needs to load data, it takes a certain amount of time for the browser and angular to render the page. The interval here may be very small, and it may not even make people feel the difference; but it may also be very long, which will cause our users to see the pages that have not been rendered.

This is called Flash Of Unrendered Content (FOUC) (K )? And is always unwanted. Below we will introduce several different ways to prevent this from happening to our users.

1. ng-cloak

The ng-cloak command is an angular built-in command to hide all elements contained by it:

<div ng-cloak> 
After the browser is loaded and compiled and rendered, angular automatically deletes the ngCloak element attribute so that the element becomes visible.
The security method for using ng-cloak in IE7 is to add an ng-cloak class to the element.
<div ng-cloak class="ng-cloak"> 
2. ng-bind
Ng-bind is another built-in instruction in angular for binding page data. We can use ng-bind instead of {} to bind elements to the page;
Replacing {} with ng-bind can prevent the unrendered {} from being displayed to the user, replacing {} with an empty element rendered by ng-bind is much more friendly.
The preceding example can be rewritten as below to prevent the page from appearing {}.
<div> 
3. resolve
When routes (Routing) is used between different pages, we have another way to prevent pages from being rendered before the data is fully loaded into the route.
Using resolve in a route (route) allows us to obtain the data we need to load before the route (route) is fully loaded. After the data is loaded successfully, the route changes and the page is displayed to the user. If the data is not loaded successfully, the route does not change. the $ routeChangeError event will get fired. [$ routeChangeError event (NO) will be activated?]
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 item requires a key/value object. The key is the name of the resolve dependency, and the value can be a string (as a service) or a method to return dependencies.
Resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.
When a route is loaded, the keys in the resolve parameter can be used as injection dependencies:
angular.module('myApp').controller('AccountCtrl',  function($scope, account) {  $scope.account = account;});
We can also use the resolve key to pass the results returned by the $ http method, as $ http returns promises from it's method CILS:
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')   }  } })});
We recommend that you define an Independent service to use the resolve key and use the service to return the required data (this method is easier to test ). To do this, we need to create a service:
First, let's take a 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 the service, we can use this service to replace the $ http Method in the code above:
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(accountService) {    return accountService.getAccount()   }  } })});
The above is a small series of AngularJS methods to prevent page flashes, I hope to help you, if you have any questions, please leave a message, the small series will reply to you in a timely manner. Thank you very much for your support for the help House website!