Solve the Problem of page flashes when accessing AngularJS pages. angularjs pages

Solve the Problem of page flashes when accessing AngularJS pages. angularjs pages

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> 
The Ng-cloak implementation principle is a direve ve. The page initialization adds a line of CSS code in the DOM heade, as shown below:
<pre class= “prettyprint linenums”>  [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{  Display:none ! important;}</pre><pre class= “prettyprint linenums”>   [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{   Display:none ! important; } </pre>
Angular sets the element with ng-cloak to display: none.
When angular resolves to a node with ng-cloak, the ng-cloak attribute and calss on the element are removed at the same time, thus preventing the node from blinking. As follows:
<script type =”text/ng-template” id =”scenario.js-150”>  It(‘should remove the template directive and css class',function(){ Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))  not().toBeDefined();   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).Not().toBeDefined();});</script><script type =”text/ng-template” id =”scenario.js-150”>   It(‘should remove the template directive and css class',function(){  Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))   not().toBeDefined();    Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')). Not().toBeDefined(); }); </script>


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()  } } })});

Articles you may be interested in:

  

 
   
AngularJS iframe: How to report an error when enabling cross-origin content
 
   
Summary of problems with adding animation effects to angular
 
   
Problems encountered by angularjs when using ng-model in ng-repeat
 
   
Solution to SpringMVC background failure to receive parameter values after angular post requests
 
   
Solution to the problem that the backend cannot receive the parameter value when angular $ http. post () submits data
 
   
Unconventional solution to AngularJS module Management Problems