AngularJS가 개발 시스템에서 부분 캐시를 사용하지 않도록 설정함
Angular에서 부분 캐시에 문제가 있습니다.JS.
HTML 페이지에는 다음이 있습니다.
<body>
<div ng-view></div>
<body>
내 파셜이 들어 있는 곳이지
부분 HTML 코드를 변경해도 브라우저는 여전히 오래된 데이터를 로드합니다.
회피책이 있나요?
개발을 위해 브라우저 캐시를 비활성화할 수도 있습니다. 오른쪽 아래의 Chrome Dev Tools에서 기어를 클릭하고 옵션을 선택합니다.
캐시 사용 안 함(DevTools가 열려 있는 동안)
업데이트: Firefox에서는 [디버거]-> [설정]-> [상세설정]섹션에도 같은 옵션이 있습니다(버전 33에서 확인).
업데이트 2: Firefox에 이 옵션이 표시되지만 일부 보고가 작동하지 않습니다.나는 화충을 사용하고 hadaytullah의 답을 따를 것을 제안한다.
@Valentyn의 답변을 바탕으로 ng뷰 콘텐츠가 변경될 때마다 캐시를 자동으로 클리어하는 방법이 있습니다.
myApp.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
다른 답변에서 설명한 바와 같이 캐시는 다음과 같이 클리어할 수 있습니다.
$templateCache.removeAll();
단, 코멘트에서 gatoatigrado에 의해 제시된 바와 같이 이것은 html 템플릿이 캐시 헤더 없이 서비스된 경우에만 동작하는 것으로 보입니다.
이 정도면 충분합니다.
각도:
app.run(['$templateCache', function ( $templateCache ) {
$templateCache.removeAll(); }]);
다양한 방법으로 캐시 헤더를 추가할 수 있지만 다음과 같은 몇 가지 솔루션이 도움이 됩니다.
「 」를 하고 있는 IIS을 webconfig:web.config 에합니다.
<location path="scripts/app/views">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
</system.webServer>
</location>
Nginx 를 사용하고 있는 경우는, 다음과 같이 설정에 추가할 수 있습니다.
location ^~ /scripts/app/views/ {
expires -1;
}
편집
것은 그 에 대해 언급되어 것입니다.dev기계지만 이게 누군가를 도울 수 있기를 바라며...
페이지 전체를 새로고침하지 않고 템플릿 캐시에 사용되는 캐시에 대해 말하는 경우 다음과 같은 방법으로 페이지를 비울 수 있습니다.
.controller('mainCtrl', function($scope, $templateCache) {
$scope.clearCache = function() {
$templateCache.removeAll();
}
});
그리고 마크업:
<button ng-click='clearCache()'>Clear cache</button>
캐시를 지우려면 이 버튼을 누르십시오.
Firebug(22.0.6)를 사용한 Firefox(33.1.1)용 솔루션
- [ Tools ] > [ Web - Tools ]> [ Firebug ]> [ Open Firebug ]를 선택합니다.
- Firebug 보기에서 "Net" 보기로 이동합니다.
- 드롭다운 메뉴 기호가 "Net"(보기 제목) 옆에 나타납니다.
- 드롭다운 메뉴에서 "브라우저 캐시 사용 안 함"을 선택합니다.
이 스니펫은 템플릿 캐시를 제거하는 데 도움이 되었습니다.
app.run(function($rootScope, $templateCache) {
$rootScope.$on('$routeChangeStart', function(event, next, current) {
if (typeof(current) !== 'undefined'){
$templateCache.remove(current.templateUrl);
}
});
});
다음의 스니펫의 상세한 것에 대하여는, http://oncodesign.io/2014/02/19/safely-prevent-template-caching-in-angularjs/ 를 참조해 주세요.
다른 어떤 솔루션도 나에게 효과가 없었기 때문에 모든 가능성을 커버하기 위해 이 글을 올렸습니다(다른 솔루션 중에서도 앵글 부트스트랩 템플릿 의존관계로 인해 오류가 발생했습니다).
특정 템플릿을 개발/디버깅하는 동안 다음과 같은 타임스탬프를 경로에 포함시킴으로써 템플릿이 항상 새로 고쳐지도록 할 수 있습니다.
$modal.open({
// TODO: Only while dev/debug. Remove later.
templateUrl: 'core/admin/organizations/modal-selector/modal-selector.html?nd=' + Date.now(),
controller : function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
}
});
해 주세요.?nd=' + Date.now() templateUrl★★★★★★ 。
다른 사람들이 말했듯이 개발 목적을 위해 캐시를 완전히 무효화하는 것은 코드를 변경하지 않고도 쉽게 할 수 있습니다. 브라우저 설정이나 플러그인을 사용합니다.개발 외부에서 루트 기반 템플릿의 각도 템플릿 캐시를 해제하려면 $routeChangeStart(또는 $state) 중에 템플릿 URL을 캐시에서 삭제합니다.Change Start, UI 라우터용)를 선택합니다.단, ng-include에 의해 로드된 템플릿의 캐싱에는 영향을 주지 않습니다.이는 이러한 템플릿은 라우터를 통해 로드되지 않기 때문입니다.
ng-include에 의해 로드된 템플릿을 포함한 모든 템플릿을 핫픽스로 수정하여 페이지 전체를 새로고침할 필요 없이 사용자에게 브라우저로 핫픽스를 빠르게 받을 수 있도록 하고 싶었습니다.또한 템플릿의 HTTP 캐싱을 무효화하는 것에 대해서도 염려하지 않습니다.해결책은 앱이 하는 모든 HTTP 요청을 가로채고, 내 앱의 .html 템플릿이 아닌 요청을 무시한 다음, 템플릿의 URL에 매개 변수를 추가하는 것입니다.경로 확인은 앱 템플릿의 경로에 따라 다릅니다.다른 간격을 가져오려면 매개 변수의 계산을 변경하거나 %를 완전히 제거하여 캐시를 가져오지 마십시오.
// this defeats Angular's $templateCache on a 1-minute interval
// as a side-effect it also defeats HTTP (browser) caching
angular.module('myApp').config(function($httpProvider, ...) {
$httpProvider.interceptors.push(function() {
return {
'request': function(config) {
config.url = getTimeVersionedUrl(config.url);
return config;
}
};
});
function getTimeVersionedUrl(url) {
// only do for html templates of this app
// NOTE: the path to test for is app dependent!
if (!url || url.indexOf('a/app/') < 0 || url.indexOf('.html') < 0) return url;
// create a URL param that changes every minute
// and add it intelligently to the template's previous url
var param = 'v=' + ~~(Date.now() / 60000) % 10000; // 4 unique digits every minute
if (url.indexOf('?') > 0) {
if (url.indexOf('v=') > 0) return url.replace(/v=[0-9](4)/, param);
return url + '&' + param;
}
return url + '?' + param;
}
UI 라우터를 사용하는 경우 데코레이터를 사용하여 $templateFactory 서비스를 업데이트하고 쿼리 문자열 파라미터를 templateUrl에 추가하면 브라우저는 항상 서버에서 새 템플릿을 로드합니다.
function configureTemplateFactory($provide) {
// Set a suffix outside the decorator function
var cacheBust = Date.now().toString();
function templateFactoryDecorator($delegate) {
var fromUrl = angular.bind($delegate, $delegate.fromUrl);
$delegate.fromUrl = function (url, params) {
if (url !== null && angular.isDefined(url) && angular.isString(url)) {
url += (url.indexOf("?") === -1 ? "?" : "&");
url += "v=" + cacheBust;
}
return fromUrl(url, params);
};
return $delegate;
}
$provide.decorator('$templateFactory', ['$delegate', templateFactoryDecorator]);
}
app.config(['$provide', configureTemplateFactory]);
$routeProvider에서 "when" 메서드를 장식하면 동일한 결과를 얻을 수 있을 것입니다.
HTTP 인터셉터 방식은 매우 잘 작동하며 유연성과 제어성이 향상된다는 것을 알게 되었습니다.또한 릴리스 해시를 버스터 변수로 사용하여 각 프로덕션 릴리스에 대해 캐시 버스트를 수행할 수 있습니다.
은 dev를 사용하는 입니다.Date.
app.factory('cachebustInjector', function(conf) {
var cachebustInjector = {
request: function(config) {
// new timestamp will be appended to each new partial .html request to prevent caching in a dev environment
var buster = new Date().getTime();
if (config.url.indexOf('static/angular_templates') > -1) {
config.url += ['?v=', buster].join('');
}
return config;
}
};
return cachebustInjector;
});
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('cachebustInjector');
}]);
여기 크롬의 또 다른 옵션이 있습니다.
누르면 개발자 도구가 열립니다.다음으로 [Resources]> [ Cache Storage ]> [ Refresh Caches ]의 순서로 선택합니다.
다른 응답과 같이 캐시를 비활성화할 필요가 없기 때문에 이 옵션을 좋아합니다.
브라우저/프록시 캐시를 제어할 수 없으므로 이를 방지하는 솔루션은 없습니다.
사용자에게 새로운 콘텐츠를 강제로 HTML 파일의 이름을 바꾸도록 하는 다른 방법도 있습니다.https://www.npmjs.com/package/grunt-filerev의 자산과 동일하게.
언급URL : https://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine
'programing' 카테고리의 다른 글
| mongodb에서 ISODate를 사용한 날짜 쿼리가 작동하지 않는 것 같습니다. (0) | 2023.03.11 |
|---|---|
| "True"(JSON)를 Python 등가 "True"(참)로 변환 (0) | 2023.03.11 |
| 모서리가 있는 석공JS (0) | 2023.03.11 |
| 이벤트 개체에서 데이터 속성에 액세스하는 방법 (0) | 2023.03.11 |
| 페이지 번호 장식을 사용하지 않고 ngTable을 렌더링하려면 어떻게 해야 합니까? (0) | 2023.03.11 |