I'm building a mobile app using Ionic in conjunction with ngCordova. In the hopes of developing in the browser as much as possible I want to override the ngCordova methods to return mock responses (since they depend on device features) using $provide in the config block of my app.js.
Something like this:
.config(function($stateProvider, $urlRouterProvider, $provide) {
if(!window.cordova) {
$provide.value('$cordovaCapture', {
captureImage: function() {
return {
end: 0,
fullPath: "http://static2.shop033.com/resources/18/160536/picture/A1/85135265.jpg",
lastModified: null,
lastModifiedDate: 1412269066000,
localURL: "cdvfile://localhost/temporary/device-specific-file.jpg",
name: "photo_013.jpg",
size: 440614,
start: 0,
type: "image/jpeg"
}
}
});
}
}
However, the ngCordova captureImage method returns a promise, and I can't simulate a promise with $q due to the fact that you can't inject $q in the .config block.
Is there a different place that I can use $provide to override these services in conjunction with $q?
You should use a factory instead of a value to have injections.
.config(function($stateProvider, $urlRouterProvider, $provide) {
if(!window.cordova) {
$provide.factory('$cordovaCapture', function($q){
return {
captureImage: function() {
// Use $q here
return {
end: 0,
fullPath: "http://static2.shop033.com/resources/18/160536/picture/A1/85135265.jpg",
lastModified: null,
lastModifiedDate: 1412269066000,
localURL: "cdvfile://localhost/temporary/device-specific-file.jpg",
name: "photo_013.jpg",
size: 440614,
start: 0,
type: "image/jpeg"
};
}
};
});
}
}
What you need to do is use the $provide.decorator(). As defined in the documentation:
A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
The code should be something like this:
.config(function($stateProvider, $urlRouterProvider, $provide) {
if(!window.cordova) {
$provide.decorator('$cordovaCapture', ['$delegate', '$q', function($delegate, $q) {
var createResolver = function(mockupOptions) {
return function(options) {
var deferred = $q.defer();
deferred.resolve(mockupOptions);
return deferred.promise;
};
};
$delegate.captureAudio = createResolver({
// captureAudio default options
});
$delegate.captureImage = createResolver({
// captureImage default options
});
$delegate.captureVideo = createResolver({
// captureVideo default options
});
return $delegate;
});
}
};
One more thing, the $delegate parameter is actually an injected instance of the original service, which is the $cordovaCapture in the example above.