[caching] AngularJS는 dev 컴퓨터에서 부분 캐싱을 비활성화합니다.

Program / 글쓴이

AngularJS에서 부분을 캐싱하는 데 문제가 있습니다.

내 HTML 페이지에는 다음이 있습니다.

<body>
 <div ng-view></div>
<body>

내 부분이로드되는 곳.

부분적으로 HTML 코드를 변경해도 브라우저는 여전히 오래된 데이터를로드합니다.

해결 방법이 있습니까?

답변

개발을 위해 브라우저 캐시를 비활성화 할 수도 있습니다-오른쪽 하단의 Chrome 개발자 도구에서 톱니 바퀴를 클릭하고 옵션을 선택하십시오

캐시 비활성화 (DevTools가 열려있는 동안)

업데이트 : Firefox의 디버거-> 설정-> 고급 섹션에 동일한 옵션이 있습니다 (버전 33 확인)

업데이트 2 :이 옵션은 Firefox에 표시되지만 일부 보고서에서는 작동하지 않습니다. 방화범을 사용하고 hadaytullah 답변을 따르는 것이 좋습니다.

답변

@Valentyn의 대답을 약간 바탕으로 ng-view 컨텐츠가 변경 될 때마다 항상 캐시를 자동으로 지우는 한 가지 방법이 있습니다.

myApp.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

답변

다른 답변 here 및 here 에서 언급했듯이 캐시는 다음을 사용하여 지울 수 있습니다.

$templateCache.removeAll();

그러나 주석 에서 gatoatigrado 가 제안한 것처럼 html 템플릿이 캐시 헤더없이 제공 된 경우에만 작동하는 것으로 보입니다.

그래서 이것은 나를 위해 작동합니다 :

각도로 :

app.run(['$templateCache', function ( $templateCache ) {
    $templateCache.removeAll(); }]);

다양한 방법으로 캐시 헤더를 추가 할 수 있지만 여기에 도움이되는 몇 가지 솔루션이 있습니다.

를 사용하는 경우 IIS이것을 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) 용 솔루션

  1. 도구> 웹 도구> Firebug> Open Firebug.
  2. Firebug보기에서 “Net”보기로 이동하십시오.
  3. 드롭 다운 메뉴 기호가 “Net”(보기 제목) 옆에 나타납니다.
  4. 드롭 다운 메뉴에서 “브라우저 캐시 비활성화”를 선택하십시오.

답변

이 스 니펫은 템플릿 캐싱을 제거하는 데 도움이되었습니다.

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.