Anglejs에서 페이지 템플릿 지우기를 사용하는 방법-JS 튜토리얼-php.cn

Anglejs에서 페이지 템플릿 지우기를 사용하는 방법

不言

풀어 주다： 2018-07-20 09:40:07

원래의

1456명이 탐색했습니다.

이 글에서는 Anglejs에서 페이지 템플릿 지우기를 사용하는 방법을 소개합니다. 필요한 친구가 참고할 수 있습니다.

며칠 전 프로젝트를 시작하는 동안 몇 가지 새로운 문제가 발생했습니다. 페이지가 전환되면 이전 페이지의 템플릿이 제때 정리되지 않아 페이지가 겹쳐지게 됩니다. 이 문제의 원인은 페이지 템플릿 캐시입니다. 즉, 이전 페이지가 종료될 때 브라우저가 이전 페이지의 템플릿을 적시에 지우지 않아 새 페이지가 로드될 때 이전 페이지 템플릿이 계속 존재하게 되어 결과적으로 발생합니다. 페이지가 겹칩니다.

템플릿 캐시 지우기:

템플릿 캐시 지우기에는 기존 HTML 태그 설정 캐시 지우기뿐만 아니라 AngleJs의 일부 구성 지우기 및 AngleJs 라우팅 전환 지우기도 포함됩니다.

1 다음은 전통적인 지우기입니다. 브라우저

HTMLmeta 태그 설정 캐시 지우기

<!-- 清除缓存 --><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

로그인 후 복사

클리어 폼 임시 캐시

<body onLoad="javascript:document.formName.reset()">

로그인 후 복사

2.AngularJs 구성 캐시 지우기

1. 라우팅 캐시 지우기 , $httpProvider 서비스를 삽입하고, $httpProvider 서비스를 구성하고, 라우팅 캐시를 지웁니다.

app.config(["$stateProvider","$urlRouterProvider",&#39;$locationProvider&#39;,&#39;$httpProvider&#39;,function ($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {    
if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }
    $httpProvider.defaults.headers.common["X-Requested-With"] = &#39;XMLHttpRequest&#39;;
    $httpProvider.defaults.headers.get[&#39;Cache-Control&#39;] = &#39;no-cache&#39;;
    $httpProvider.defaults.headers.get[&#39;Pragma&#39;] = &#39;no-cache&#39;;}]);

로그인 후 복사

2. 임의의 숫자를 사용하세요. 임의의 숫자도 캐싱을 방지하는 아주 좋은 방법입니다. 즉, 링크 URL 매개변수 뒤에 임의의 숫자(일반적으로 타임스탬프)를 추가하는 것입니다. 난수와 마찬가지로 난수를 사용합니다.

3. 상태 라우팅 구성에서 캐시 구성 항목을 false로 구성합니다.

.state("discountCoupon", {
    url: "/discountCoupon",    templateUrl: "discountCoupon.html?" + new Date().getTime(),　　　　//随机数
    controller: &#39;discountCoupon&#39;,    cache: false,　　　　//cache配置})
.state("customerPhone", {
    url: "/customerPhone",    templateUrl: "customerPhone.html?" + new Date().getTime(),　　　　//随机数
    controller: &#39;customerPhone&#39;,    cache: false,　　　　//cache配置})

로그인 후 복사

3.AngularJs의 경로 전환은 캐시를 삭제합니다

angularJs 기본 템플릿 로드가 캐시됩니다. 사용되는 캐시 서비스는 $tempalteCache이고, 템플릿 요청을 보내는 서비스는 $templateRequest입니다. 이전 페이지의 템플릿 지우기:

1. 각 $http 요청 템플릿이 전송된 후 $tempalteCache.remove(url) 또는 $tempalteCache.removeAll을 호출하여 모든 템플릿 캐시를 지울 수 있습니다.

$rootScope.$on(&#39;$stateChangeStart&#39;,     //路由开始切换
    function (event, toState, toParams, fromState, fromParams) {        
    //路由开始切换，清除以前所有模板缓存
        if (fromState.templateUrl !== undefined) {
            $templateCache.remove(fromState.templateUrl);            
            // $templateCache.removeAll();        }
    });

$rootScope.$on(&#39;$stateChangeSuccess&#39;,       
//路由切换完成
    function (event, toState, toParams, fromState, fromParams) {    
    //路由切换成功，清除上一个页面模板缓存
    if (fromState.templateUrl !== undefined) {
        $templateCache.remove(fromState.templateUrl);        
        // $templateCache.removeAll();    }
});

로그인 후 복사

2. $provide. decorator를 사용하여 기본 $templateRequest(angularJs는 $provide 서비스 $templateRequest: $TemplateRequestProvider와 함께 제공됨) 서비스를 다시 작성합니다. $TemplateRequestProvider 서비스에서는 $tempalteCache(본질적으로는 여전히 angleJs의 $cacheFactory 서비스) 서비스가 기본적으로 사용되는 것을 볼 수 있습니다.

this.$get = [&#39;$templateCache&#39;, &#39;$http&#39;, &#39;$q&#39;, &#39;$sce&#39;, function($templateCache, $http, $q, $sce) {    
function handleRequestFn(tpl, ignoreRequestError) {
        handleRequestFn.totalPendingRequests++;

로그인 후 복사

그리고 템플릿을 얻을 때 기본적으로 $templateCache가 캐시로 사용되며, 획득한 템플릿 데이터를 $templateCache에 저장합니다.

return $http.get(tpl, extend({    
cache: $templateCache,
    transformResponse: transformResponse
}, httpOptions))
    [&#39;finally&#39;](function () {
    handleRequestFn.totalPendingRequests--;
})
    .then(function (response) {        
    $templateCache.put(tpl, response.data);        
    return response.data;
    }, handleError);

로그인 후 복사

따라서 캐싱을 비활성화하고 $templateRequest의 소스 코드에서 $tempalteCache를 제거하여 템플릿 캐시를 지울 수 있습니다. 그러나 일반적으로 프레임워크 소스 코드를 직접 수정하는 것은 권장되지 않습니다.