Does angular js support URL + data caching?

[Brandon Harris]

Im trying to cache weather results being returned in jsonp through an $http request. However I seen on your  site that in order to test if your retrieving cached results there will be no XHR calls in dev tools.

However even though I implemented angular cache i still see the calls. Note: I am very new to angular JS and know that I might be missing an important step.

Any response would be highly appreciated.

Thanks

--------------------------------------------

App Declaration

--------------------------------------------

var WWOApp = null;

WWOApp = angular.module("WWOApp", ["jmdobry.angular-cache"]);

----------------------------------------

Factory/Service

-----------------------------------------

WWOApp.config(['$httpProvider', function ($httpProvider) {

    delete $httpProvider.defaults.headers.common["X-Requested-With"]

}]);

WWOApp.factory('LocalWeatherService', function ($http, $angularCacheFactory) {

        // optionally set cache defaults

   var dataCache = $angularCacheFactory('dataCache', {  

            maxAge: 3600000,

            deleteOnExpire: 'aggressive'

        });

    return {

      

        getLocalWeather: function (local) {

            var userCity = TWWeather.Settings.UserCity;

            var _FreeApiBaseURL = '//api.worldweatheronline.com/free/v1/';

            var _FreeApiKey = 't725x2q355kuzfbrqqbpsg4n';

            var input = {

                

                query: userCity,

                format: 'JSON',

                num_of_days: '2',

                date: '',

                fx: '',

                cc: '',

                includelocation: '',

                show_comments: '',

                callback: 'JSON_CALLBACK'//'LocalWeatherCallback'

            };

            var LocationUrl = _FreeApiBaseURL + 'weather.ashx?q=' + input.query + '&format=' + input.format + '&extra=' + input.extra + '&num_of_days=' + input.num_of_days + '&date=' + input.date + '&fx=' + input.fx + '&cc=' + input.cc + '&includelocation=' + input.includelocation + '&show_comments=' + input.show_comments + '&key=' + _FreeApiKey + '&callback=' + input.callback;

  

            $http.jsonp(LocationUrl, { cache: dataCache }).success(function localWeather(data, status, headers, config)

            {

                local(data)

             }).

                error(function (data, status, headers, config) {

                    alert("No data!!!!!!");

                }

                );

        },

        getSearchWeather: function (search) {

            var userCity = TWWeather.Settings.UserCity;

            var _FreeApiBaseURL = '//api.worldweatheronline.com/free/v1/';

            var _FreeApiKey = 't725x2q355kuzfbrqqbpsg4n';

            var input2 = {

            query: userCity,

            format: 'JSON',

            timezone: 'yes',

            popular: '',

            num_of_results: '',

            callback: 'JSON_CALLBACK'//'LocalWeatherCallback'

        };

           

        var SearchURL = _FreeApiBaseURL + "search.ashx?q=" + input2.query + "&format=" + input2.format + "&timezone=" + input2.timezone + "&popular=" + input2.popular + "&num_of_results=" + input2.num_of_results + "&key=" + _FreeApiKey + '&callback=' + input2.callback;

            $http.jsonp(SearchURL, { cache: dataCache }).success(function searchWeather(search_api, status, headers, config)

        {

            search(search_api)

        }).

            error(function (search_api, status, headers, config) {

                alert("No data!!!!!!");

            }

            );

         

        }

    }

});

           

--------------------------------------------

Controller

------------------------------------------

function MainCtrl($scope, $http, LocalWeatherService)

    LocalWeatherService.getLocalWeather(function (local)

    {

        $scope.WeatherTemp = local.data.current_condition[0].temp_F;

        $scope.WeatherDesc = local.data.current_condition[0].weatherDesc[0].value;

        var currentCode = local.data.current_condition[0].weatherCode;

        var IUrl = "~/_layouts/TW.Portal14.WorldWeather/day/";

        if (currentCode == "113") {$scope.imgsrc = IUrl + "clear.png";}

        if (currentCode == "116") { $scope.imgsrc = IUrl + "PartlyCloudy.png";}

        if (currentCode == "119" || currentCode == "122" ) { $scope.imgsrc = IUrl + "clouds.png"; }

        if (currentCode == "143" || currentCode == "248" || currentCode == "260") { $scope.imgsrc = IUrl + "mist.png"; }

        if (currentCode == "176" || currentCode == "185" || currentCode == "263" || currentCode == "266" || currentCode == "281" || currentCode == "284" || currentCode == "293" || currentCode == "296" || currentCode == "299" || currentCode == "302" || currentCode == "305" || currentCode == "308" || currentCode == "311" || currentCode == "314" || currentCode == "317" || currentCode == "320" || currentCode == "353" || currentCode == "356" || currentCode == "359") { $scope.imgsrc = IUrl + "rain.png"; }

        if (currentCode == "179" || currentCode == "227" || currentCode == "230" || currentCode == "323" || currentCode == "326" || currentCode == "329" || currentCode == "332" || currentCode == "335" || currentCode == "338" || currentCode == "350" || currentCode == "368" || currentCode == "371" || currentCode == "374" || currentCode == "377" || currentCode == "386" || currentCode == "389" || currentCode == "392" || currentCode == "395") { $scope.imgsrc = IUrl + "snow.png"; }

        if (currentCode == "200" || currentCode == "386" || currentCode == "389" || currentCode == "392" || currentCode == "395") { $scope.imgsrc = IUrl + "storm.png"; }

   

    })

    

    LocalWeatherService.getSearchWeather(function (search)

    {

        $scope.CityName = search.search_api.result[0].areaName[0].value;

        $scope.StateName = search.search_api.result[0].region[0].value;

    })

  

           

           

}

[Jason Dobry]

I believe Angular only supports automatic caching of GET requests. You'll need to manually cache the results of your first request. See the third example in the $http section of the angular-cache guide for more info on manually caching the result.