AngularJS にアクセスするときのページのちらつき問題の解決策 page

AngularJS にアクセスするときのページのちらつき問題の解決策 page_AngularJS

WBOY

リリース： 2016-05-16 15:11:58

オリジナル

1590 人が閲覧しました

アプリケーションページまたはコンポーネントがデータをロードする必要がある場合、ブラウザーと Angular の両方がページをレンダリングするのに一定の時間がかかることがわかっています。ここでのギャップは非常に小さいため、違いが目立たない場合もあります。また、ギャップが長いため、ユーザーにはレンダリングされないページが表示される場合もあります。

この状況は、Flash Of Unrendered Content (FOUC) (K) と呼ばれます。これは常に望ましくないことです。以下では、これがユーザーに起こらないようにするためのいくつかの方法を説明します。

1. ng-マント
ng-cloak ディレクティブは Angular の組み込みディレクティブであり、その機能はそれに含まれるすべての要素を非表示にすることです。

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

ログイン後にコピー

Ng-cloak の実装原理は、次のように CSS コードを DOM のヘッダーに追加するディレクティブです。

<pre class= “prettyprint linenums”>

  [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{

  Display:none ! important;

}

 
  [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
 
  Display:none ! important;
 
}

ログイン後にコピー

Angular は、ng-cloak を使用して要素を display:none に設定します。

Angular が ng-cloak を使用してノードを解析すると、ng-cloak 属性が削除され、同時に要素が実行されるため、ノードのちらつきが防止されます。以下のように:

<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 バインド

ng-bind は、バインドされたページデータを操作するために使用される、Angular の別の組み込み命令です。 {{ }} の代わりに ng-bind を使用して要素をページにバインドできます。
{{ }} の代わりに ng-bind を使用すると、レンダリングされていない {{ }} がユーザーに表示されないようにすることができます。{{ }} を置き換えるために ng-bind によってレンダリングされた空の要素を使用すると、より使いやすくなります。

ページに {{ }} が表示されないようにするために、上記の例を次のように書き換えることができます

<div>
 <h1>Hello <span ng-bind="name"></span></h1>
</div>

ログイン後にコピー

3. 解決します

異なるページ間でルートを使用する場合、データがルートに完全に読み込まれる前にページがレンダリングされないようにする別の方法があります。
ルートでresolveを使用すると、ルートが完全にロードされる前に、ロードする必要があるデータを取得できます。データが正常にロードされると、ルートが変更され、ページがユーザーに表示されます。データが正常にロードされない場合、ルートは変更されず、$routeChangeError イベントが発生します。活性化されますか？】

解決アイテムにはキー/値オブジェクトが必要です。キーは解決依存関係の名前です。値は文字列 (サービスとして) または依存関係を返すメソッドです。

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

ログイン後にコピー

resolve は、解決値が解決または拒否された Promise を返す場合に非常に便利です。

ルートがロードされると、resolve パラメーター内のキーを注入可能な依存関係として使用できます。

$http はメソッド呼び出しから Promise を返すため、解決キーを使用して $http メソッドによって返された結果を渡すこともできます。

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

ログイン後にコピー

解決キーを使用する独立したサービスを定義し、そのサービスを使用して必要なデータをそれに応じて返すことをお勧めします (この方法はテストが簡単です)。この方法で処理するには、サービスを作成する必要があります:

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

ログイン後にコピー

まず、accountService を見てください。

サービスを定義した後、このサービスを使用して、上記のコード内の $http への直接呼び出しを置き換えることができます。

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

ログイン後にコピー

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

ログイン後にコピー