アプリをデプロイするときに、gulp-angular-templatecacheを使用してすべての.htmlファイルを$ templateCacheに配置しています。
問題は、ルートの名前が$ templateCacheがファイルの保存に使用している名前とまったく同じであっても、Angular（およびui-router）がこれを無視してサーバーにリクエストを送信していることです。
1つの状態の例：
.state('app', {
url: '/app',
templateUrl: '/base/view/app.html',
controller: 'AppController as appCtrl'
});
そして$ templateCache：
$templateCache.put('/base/view/app.html', '<div>...</div>');
これは機能しません。まだapp.htmlをリクエストしています。
ただし、templateUrlを削除し、代わりに$ templateProviderを使用すると、機能します。このような：
.state('app', {
url: '/app',
templateProvider: ['$templateCache', function($templateCache) {
if ($templateCache.get('/base/view/app.html')) {
return $templateCache.get('/base/view/app.html');
}
}],
controller: 'AppController as appCtrl'
});
しかし、州や指令はたくさんあり、それらすべてを手動で置き換える必要があります。そこで、httpリクエストのインターセプターを作成して、.htmlをリクエストしているかどうかを確認し、キャッシュされているかどうかを確認して返します。それ以外の場合は、リクエストを行います。
ただし、リクエストを停止して、必要なものを返すことができません。私はそれを止めることしかできませんが、それに「偽の」応答を置くことはできません。
私が試したこと：
'request': function(config) {
var url = angular.copy(config.url);
if (url.indexOf('.html') !== -1) {
var cachedData = $templateCache.get(url);
if (!_.isUndefined(cachedData)) {
var cachedPromise = $q.defer();
config.timeout = cachedPromise.promise;
cachedPromise.resolve();
// config.timeout is used to stop the request but it doesn't matter the response of the promise, it's probably ignored and just used to stop the request.
}
}
return config;
}
このインターセプターを機能させる方法はありますか？別のアイデアは、ui-routerソースコードを変更して、リクエストを送信する前に$ templateCacheをチェックするようにすることです（キャッシュをチェックするように見えますが、最初のリクエストの後でのみです。最初のリクエストの前でもチェックしたいです） 。それに加えて、私はアイデアがありません... ui-routerのソースコードを変更せずにこれを機能させる方法はありますか？
私は問題を見つけました。
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (typeof(toState) !== 'undefined') {
$templateCache.remove(toState.templateUrl);
}
});
それがインターセプターで動作していた理由です。上記のコードは$ templateCacheを無効にしていましたが、その後インターセプターが実行されます。したがって、ハンドラー、インターセプターなどを確認することを忘れないでください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加