How to handle page flashes in Angular. js and angular. js

How to handle page flashes in Angular. js and angular. js

Preface

When you use {} to bind data, a full screen of {xxx} appears during page loading. The data has not yet responded, but the page has been rendered. This is because the browser and angularjs both consume a certain amount of time to render the page. This interval may be very small, or even invisible. This situation is normal, but it may take a long time, at this time, you may see {xxxx} full screen }}. This is called "Flash Of Unrendered Content (FOUC) (K )? And is always unwanted .".

Problem

For the convenience of the image, we like the following practices.

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

However, this also laid a hole in the full screen. It is difficult to find this problem when the network response speed of the interface is fast enough, but this problem occurs frequently when the 4G network on the mobile end or the network environment is worse.

Solution

1. ng-cloak

This command is a built-in command of angularjs. It is used to hide all elements contained by it. After the browser is loaded and compiled and rendered, angularjs automatically deletes the ngCloak element attribute so that the element becomes visible.

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

2. ng-bind

This command is a built-in command for angularjs to bind page data. You can use this command to bind data to the page instead. Use ng-bind to prevent the unrendered {} from being displayed to the user. As follows:

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

3. resolve

When using a routes route, resolve can prevent us from getting the data we need to load before the route is fully loaded. After the data is loaded successfully, the route is changed and the page is displayed to the user. If the data is not loaded successfully, the route does not change.

See http://www.bkjia.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 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:

ngular.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:

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

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.