AngularJSではテンプレートが既にキャッシュにロードされているかどうかを検出できますか？

Question

$ routeProviderを使用して異なる種類のテンプレートを読み込み、最適化のためにテンプレートで解析されるJSONデータを取得するためのjquery ajaxリクエストを使用しています。

ページの読み込み時に、キャッシュが既に設定されているかどうかによって、空のテンプレートまたは新しいテンプレートを含む前のテンプレートを非表示にするオーバーレイが必要です。だから今

、私が使用して件のデータのAJAX呼び出し中またはテンプレートのAJAX呼び出しでオーバーレイを設定している場合貴様に$ routeProviderからキャッシュされたテンプレートを取得する方法がある知っているかどうかを知りたい：

$scope.on('$routeChangeSuccess', function(scope, next, current){ 
if($cacheFactory.get('myurl') 
    /* dont use overlay here */ 
else 
    /* use overlay*/ }); 

しかし問題は、実際には、$ cacheProviderを使って$ cacheFactoryを動作させる方法が見つからないということです。

Answer 1

サーバーへの旅行中にテンプレートを非表示にしたい場合は、次の方法を使用します。

DOM（テンプレートをオフに先頭に追加）

<div ng-show="showLoading" class="loading"><h4>Loading&#8230;</h4></div>

CSS（縮小さ）

.loading,.loading:before{position:fixed;top:0;left:0}.loading:before,.loading:not(:required):after{content:'';display:block}.loading{z-index:999;height:2em;width:2em;overflow:show;margin:auto;bottom:0;right:0}.loading:before{width:100%;height:100%;background-color:rgba(0,0,0,.3)}.loading:not(:required){font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.loading:not(:required):after{font-size:10px;width:1em;height:1em;margin-top:-.5em;-webkit-animation:spinner 1.5s infinite linear;-moz-animation:spinner 1.5s infinite linear;-ms-animation:spinner 1.5s infinite linear;-o-animation:spinner 1.5s infinite linear;animation:spinner 1.5s infinite linear;border-radius:.5em;-webkit-box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.5) -1.5em 0 0 0,rgba(0,0,0,.5) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0;box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.75) -1.5em 0 0 0,rgba(0,0,0,.75) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}} 

範囲

$scope.showLoading = false; 
$scope.getData = function(){ 
    $scope.showLoading = true; 
    //Make server trip 
    //Once data is returned, set showLoading back to false 
    $scope.showLoading = false; 
}