My previous question highlighted caching possibilities in my services.
The documentation for ngResource (v1.3.0-build.2417 (snapshot) at the time of writing this) shows a cache flag.
However, the cache will only be populated after the first call to service.get(id). I want to be able to pre-populate the resource cache with an item that was retrieved from elsewhere
(It's perfectly reasonable to have the same item be available from 2+ endpoints. E.g. you can have a task available at /task/5 and as part of a collection at /projects/99/tasks if task 5 is part of project 99)
I've tried this, but it is very ugly:
// return the API in the project service
return {
project: null, // my own hand-rolled cache
get: function (id) {
// check cache
if (this.project != null && this.project.id == id) {
console.log("Returning CACHED project", this.project);
var future = $q.defer();
future.resolve(this.project);
// UGLY: for consistent access in the controller
future.$promise = future.promise;
return future;
} else {
return Projects.get({
id: id
});
}
}, // etc
And in the controller:
$q.when(projectService.get($routeParams.id).$promise).then(function(project) {
// etc
How do I pre-populate the cache using AngularJS idioms?
You can put the cache value manually into the cache factory. Inject $cacheFactory, get the http cache, and put the object into the cache with the key being the path of the resource.
For example:
var task = {
// ... task object here ...
};
var httpCache = $cacheFactory.get('$http');
httpCache.put('/projects/99/tasks/5', task);
httpCache.put('/task/5', task);
One thing to note, if you set the cache flag in your resource to true, it'll default to use the $http cache. You can also set it to a custom cacheFactory instance. In that case, you'd just put the value to your custom cache instead.
Related
This question already has answers here:
AngularJS : Initialize service with asynchronous data
(10 answers)
Closed 7 years ago.
I have a link generator service that is able to generate links to specific content types (users' details page, content items' details pages etc).
This service is really easy to use and has synchronous functions:
links.content(contentInstance); // /items/123
links.user(userInstance); // /users/234
I now have to introduce separate routing for logged in user to change from /users/id to /users/me.
The only change I'd need to add to my link generator service is to check whether userInstance.id == loggedInUser.id and return a different route URL. This is not a problem as long as my logged-in user's info would be synchronously available. but it's not...
I have a userService.getMyInfo() that returns a promise. The first time it's called it actually makes a server request but subsequent calls return a resolved promise with already cached data.
So how should I implement my user link URL generation in my link generator service?
Edit
Ok. So to see better what I have at the moment and where I'm having the problem. I'm pretty aware that async will stay async and that it can't be converted to synchronous (and it shouldn't be).
This is some more of my code, that will make it easier to understand.
linkGenerator.user
angular
.module("App.Globals")
.factory("linkGenerator", function(userService) {
...
user: function(userInstance) {
// I should be calling userService.getMyInfo() here
return "/users/{0}/{1}".format(userInstance.id, userInstance.name);
},
...
});
userService.getMyInfo
angular
.module("App.Globals")
.service("userService", function($q, cacheService, userResource) {
...
getMyInfo: function() {
if (cacheService.exists("USER_KEY"))
// return resolved promise
return $q.when(cacheService.get("USER_KEY"));
// get data
return userResource
.getCurrentUser()
.$promise
.then(function(userData) {
// cache it
cacheService.set("USER_KEY", userData);
});
},
...
});
Controller
angular
.module("App.Content")
.controller("ItemDetailsController", function(linkGenerator, ...) {
...
this.model = { ... };
this.helpers = {
...
links: linkGenerator,
...
};
...
});
View
View uses ItemDetailsController as context notation.
...
<a ng-href="{{::context.helpers.links(item.author)}}"
ng-bind="::item.author.name">
</a>
...
Notes
As you can see my view generates links to item authors. The problem is that my linkGenerator (as you can see from the code may not have the information yet whether it should generate one of the correct links to user details view.
I know I can't (and don't want to) change my async code to synchronous, but what would be the best way to make this thing work as expected?
One possible solution
For the time being I've come up with a solution that does the trick, but I don't really like it, as I have to supply my logged in user's ID to linkGenerator.user(userInstance, loggedInUserId) function. Then I set up my routing so that I add resolve to my route where I call userService.getMyInfo() which means that my controller is not being instantiated until all promises are resolved. Something along this line:
routeProvider
.when("...", {
templateUrl: "path/to/my/details/template",
controller: "ItemDetailsController".
controllerAs: "context",
resolve: {
myInfo: function(userService) {
return userService.getMyInfo();
}
}
})
...
Then I also add an additional helper to my controller
this.helpers = {
...
links: linkGenerator,
me: myInfo.id,
...
};
And then I also change link generator's function by adding the additional parameter that I then supply in the view.
linkGenerator.user = function(userInstance, loggedInUserId) {
if (userInstance.id === loggedInUserId)
return "users/me";
return "users/{0}/{1}".format(userInstance.id, userInstance.name);
}
and in the view
<a ng-href="{{::context.helpers.links.user(item.author, context.helpers.me)}}"...
And I don't to always supply logged in user's ID. I want my service to take care of this data on its own.
There is no way to make anything in JavaScript that is asynchronous at some point synchronous again. This is a ground rule of how concurrency works - no blocking for waiting for stuff is allowed.
Instead, you can make your new method return a promise and use the regular tools for waiting for it to resolve.
links.me = function(){
var info = userService.getMyInfo();
return info.then(info => { // or function(info){ if old browser
// generate link here
return `/users/${info.id}`; // or regular string concat if old browser
});
}
Which you'd have to use asynchronously as:
links.me().then(function(link){
// use link here
});
In my Angular app, I have some resource modules, each containing some cache factories.
For example,
projectRsrc.factory('getProjectCache', ['$cacheFactory', function($cacheFactory){
return $cacheFactory('getProjectCache');
}]);
I have a few of these to cache values received from the servers.
The problem is that at times I'd like to clear all the caches. So I want to put all the cacheFactories into one CacheCentralApp module and delete all the caches with a single call.
The trouble is, I don't know of any way to access other factories inside my module. So for instance, if I create a module CacheCentralApp, and in it, declare factories that provide cacheFactorys, how can I create a function in there that calls removeAll() on every cacheFactory?
I don't think it is possible to target all the factories of a certain module. I think however that another solution to your problem is to send a event that all factories has to be cleared. This will prevent that you will have to loop through all your factories and call a .clear() function on everyone.
You could send a event request with the following code:
$scope.$broadcast('clearAllCaches');
And listen to this event in every factory with:
$scope.$on('clearAllCaches', function() {
clearCache();
}
In a separate module you might create a factory for that:
var cacheModule = angular.module('CacheCentralApp', []);
cacheModule.factory('MyCacheFactory', ['$cacheFactory', function($cacheFactory) {
var cacheKeys = [];
return {
clearAll: function() {
angular.forEach(cacheKeys, function(key) {
$cacheFactory.get(key).removeAll();
});
},
get: function(key) {
if(cacheKeys.indexOf(key) == -1) {
cacheKeys.push(key);
return $cacheFactory(key);
} else {
return $cacheFactory.get(key);
}
}
}
}]);
To create new or get existing Cache you simply call MyCacheFactory.get(cacheName). To clear all the caches ever created in the factory you call MyCacheFactory.clearAll().
Note: I am not quite sure that Array.indexOf is available in every browser, you might want to use Lo-Dash or another library to make sure your code works.
I have an application that when it starts gets a list of admin users.
The data looks something like this:
var users =
[
{"id":"527ddbd5-14d3-4fb9-a7ae-374e66f635d4","name":"x"},
{"id":"966171f8-4ea1-4008-b6ac-d70c4eee797b","name":"y"},
{"id":"de4e89fe-e1de-4751-9605-d6e1ec698f49","name":"z"}
]
I have a call that gets this data:
os.getUserProfiles($scope);
and the function:
getUserProfiles: function ($scope) {
$http.get('/api/UserProfile/GetSelect')
.success(function (data, status, headers, config) {
$scope.option.userProfiles = data;
});
},
I would like to avoid the admin users having to continuously issue the requests to get
the user list. I was looking at the $cacheFactory in Angular but this does not really
seem to meet my needs.
The angular-cache that's on github looks interesting but I'm not quite sure how to use
it with objects like this and then have the data stored using the LocalStorageModule.
Can someone give me an example of how they have used this product with the LocalStorageModule.
I would suggest check the extended angular-cache.
As described in documentation: http://jmdobry.github.io/angular-cache/guide.html#using-angular-cache-with-localStorage
app.service('myService', function ($angularCacheFactory) {
// This cache will sync itself with localStorage if it exists, otherwise it won't. Every time the
// browser loads this app, this cache will attempt to initialize itself with any data it had
// already saved to localStorage (or sessionStorage if you used that).
var myAwesomeCache = $angularCacheFactory('myAwesomeCache', {
maxAge: 900000, // Items added to this cache expire after 15 minutes.
cacheFlushInterval: 3600000, // This cache will clear itself every hour.
deleteOnExpire: 'aggressive', // Items will be deleted from this cache right when they expire.
storageMode: 'localStorage' // This cache will sync itself with `localStorage`.
});
});
Or we can inject custom Local storage implementation
storageImpl: localStoragePolyfill // angular-cache will use this polyfill instead of looking for localStorage
I am using this plugin https://github.com/grevory/angular-local-storage, which is really simple to use, while providing full API.
Also check a local storage usage for caching the templates: how to cache angularjs partials?
NOTE: This article Power up Angular's $http service with caching, and mostly the section:
Advanced caching, was for me the reason to move to angular-cache
How to create a custom Polyfill? (Adapter pattern)
As documented here, we need to pass the localStoragePolyfill implementing this interface:
interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};
angular-cache cares only about these three methods:
setItem
getItem
removeItem
I.e.: Implement a wrapper talking with local-storage API, transforming it to the advanced cache api. That's it. Nothing else
I have an Angular constant which I need to configure after the config phase of the app.
It's basically a collection of endpoints, some of which are finalized after the app makes a few checks.
What I am currently doing is returning some of them as functions where I can pass in the part that changes: (Example code, not production code.)
angular.module('...',[]).constant('URL',(function()
{
var apiRoot='.../api/'
return {
books:apiRoot+'books',//No env needed here - Property (good)
cars:function(env){//But needed here - Method (bad, inconsistent)
return env+apiRoot+'/cars';
}
};
}()));
But that's rather inefficient because I only need to compile that URL once, not each time I need it.
URL.books
URL.cars('dev');
I was thinking of turning it into an Angular provider and configure it prior to instantiation, but I don't know if it's possible to configure it outside the config block, when it would be too early because I don't have env yet for example.
How can I do it?
You could use a promise for each entry (books,cars,...). When you have all info (e.g. env) for the cars entry, you can resolve the promise.
angular.module('...',[]).constant('URL',(function()
{
var apiRoot='.../api/'
var carsPromise = function() {
var deferred = $q.defer();
getEnv().then(function(env) { // getEnv also returns a promise
deferred.resolve(env+apiRoot+'/cars');
});
return deferred.promise;
}
return {
books: instantlyResolvedPromise(apiRoot+'books'),
cars: carsPromise();
};
}()));
Of course, this adds some complexity as promises tend to spread like a disease but you will end up with a consistent api.
I'm implementing a system that require access to Google Places JS API. I've been using rails for most of the project, but now I want to inject a bit of AJAX in one of my views. Basically it is a view that displays places near your location. For this, I'm using the JS API of Google places. A quick workflow would be:
1- The user inputs a text query and hits enter.
2- There is an AJAX call to request data from Google Places API.
3- The successful result is presented to the user.
The problem is primarily in step 2. I want to use backbone for this but when I create a backbone model, it requests to the 'rootURL'. This wouldn't be a problem if the requests to Places was done from the server but it is not.
A place call is done like this:
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
Passing a callback function:
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
Is it possible to override the 'fetch' method in backbone model and populate the model with the successful Places result? Is this a bad idea?
It is possible to override the fetch method of your backbone model.
var mapModel = Backbone.Model.extend({
fetch: function (options) {
// do your call to google places here
},
callBackFunctionForGoogleMaps: function (results, status) {
// call back function here would set model properties
}
});
return mapModel;
This way you override fetch and remove the defaults behavior of Backbone to make an ajax call.
Just as an FYI if you want to override Backbone models fetch but still have the default behavior of model.fetch you can do the following. Note the return calling Backbone.Model.fetch.
var mapModel = Backbone.Model.extend({
fetch: function (options) {
// do any pre-fetch actions here
return Backbone.Model.fetch.call(options);
}
});
return mapModel;
It is probably not a bad idea to override the fetch method here because you are still fetching data for your model, just not through ajax calls on your end. It would be smart though to leave comments noting that you are overriding fetch in this manner for a reason.