Browser Development: Take Advantage of the Mocks

[mrzmyr]

We have a lot of problems and issues about the browser development workflow when using the ngCordova module on mobile and on browser at the same time. (Ref: #10)

Issues: #286, #232, #228, #188, #179, #165, #63, #24, #10, #178, #340, #373, #370 Stackoverflow: 23673186, 25242793, 25000064, 25836935, 24975225

Here is one possible solution to bring in the ngCordovaMocks with an API:

Usage (myApp.js)

angular.module('starter', ['ionic', 'ngCordova'])
.config(function($cordovaProvider) {
  // enable mocks automatically on desktop browsers 
  $cordovaProvider.useBrwoserCapabilities('auto');
});

index.html

<script src="lib/ngCordova/dist/ng-cordova-mocks.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Implementation (src/plugins/module.js):

angular.module('ngCordova', [
  'ngCordova.plugins'
])

.provider('$cordova', function ($provide) {

  var $mocksInjector = angular.injector(['ng', 'ngCordovaMocks']);

  var decorateNgCordova = function () {
    // iterate over all mocks services available 
    angular.forEach(angular.module('ngCordovaMocks')._invokeQueue, function (module) {
      // get the service name
      var serviceName = module[2][0];
      $provide.decorator(serviceName, function() {
        // replace / decorate the original service with the mocked one
        return $mocksInjector.get(serviceName);
      });
    });
  };

  this.useBrwoserCapabilities = function(useIt) {
    if(useIt === 'auto' && !window.cordova) {
      decorateNgCordova();
    } else if(useIt) {
      decorateNgCordova();
    }
  };

  this.$get = function() {
    return {};
  };
});

@pbernasconi, @mlynch what do you think about it ?

[screendriver]

A solution for this would be awesome! :+1: Is there are workaround at the moment until this will be implemented?

[tkempf]

Hi mrzmyr, i like your proposed solution, but when i try to use a factory which depends upon $q like cordovaFile Then i get the following error Error: [$injector:unpr] Unknown provider: $qProvider <- $q <- $cordovaFile Am i doing something wrong here ? Tom

[mrzmyr]

@tkempf yeah that was my fault, I think in the ngCordovaMocks module the usual angular services are not included so we have to declare them specifically.

Before: var $mocksInjector = angular.injector(['ngCordovaMocks']); After: var $mocksInjector = angular.injector(['ng', 'ngCordovaMocks']);

Let me know if it works for you.

[tkempf]

@mrzmyr works fine now for me. Thanks for your quick response!

[henry74]

Sorry for my ignorance. I'm a bit confused on how to implement this in my ionic/angular app. I'm trying to use it with the $cordovaPush plugin/service.

[gion]

Sounds like a nice workaround :+1: