Set HTTP Cache Expiration in Angular JS and Typescript

Create an Interceptor for every service calls

angular.module('app').factory("cacheInterceptor", ["$cacheFactory", function ($cacheFactory) {
 var httpTtlCache = {};
 return {
 request: function (config) {
 var expirationTime;
 if (config.expiration) {
 expirationTime = config.expiration;
 delete config.expiration;
 if (new Date().getTime() - (httpTtlCache[config.url] || 0) > expirationTime) {
 $cacheFactory.get("$http").remove(config.url);
 httpTtlCache[config.url] = new Date().getTime();
 }
 }
 return config;
 }
 };
}]);

Push the interceptor through config

angular.module('app', []).config(['$httpProvider', function ($httpProvider) {
 $httpProvider.interceptors.push('cacheInterceptor');
}]);

Pass the expiration when you call your httpservice

  var expirationTime = 60 * 60 * 1000;
            $http.get(url, { expiration: expirationTime,cache:true }).then(function (response) {
               
            });

Transclusion in Angular js

The best way of think about transclusion is a Picture Frame.A picture frame has its own design and
a space for adding the picture.We can decide what picture will go inside of it.
Picture1
When it comes to angular we have some kind of controller with its scope and inside of that we will place a directive that supports transclusion. This directive will have it’s own display and functionality . In non-transluded directive, content inside the directive is decided by the directive itself but with transclusion,just like a picture frame,we can decide what will be inside the directive.

<body ng-controller=”appController”>
<my-frame>
<span>My Frame content</span>
</my-frame>
</body>

Directive Template

<body ng-controller=”appController”>
<my-frame>
<span>My Frame content</span>
</my-frame>
</body>

Directive
angular.module("app").directive('myFrame', function () {
return {
restrict: 'E',
templateUrl:"frame.html",
controller:function($scope){
$scope.hidden=false;
$scope.close=function(){
$scope.hidden=true;
}
},
transclude:true;
}
});

Source Code : https://plnkr.co/edit/Cnoa7E?p=preview