CODEWITHSUNDEEP
javascriptangularjscordovaionic-frameworkngcordova
Jason
Jason

Reputation: 2617

$cordovaBLE not defined when using ngCordova in an Ionic/Angular project

I have an AngularJS/Ionic app built on top of Phonegap. I am trying to use ngCordova with the cordova-plugin-ble-central plugin ($cordovaBLE in ngCordova). No matter what I try, $cordovaBLE is undefined. The call is in a service which is called in an event handler for a button.

My index.html includes are

<script src="js/thirdparty/ionic.bundle.min.js"></script>
<script src="js/thirdparty/ng-cordova.js"></script>
<script src="cordova.js"></script>

My app injection is

angular.module('myapp', [
    'ionic',
    'ngCordova',
    'myapp.controller',
    'myapp.service'
]);

My controller definition is

angular.module('myapp.controller')

.controller('settingsCtrl', ['commServ', function (commServ) {
    var controller = this;

     // Bluetooth ------------
    controller.scan = function () {
        commServ.getDevices()
    };
}])

And my service definition is (myapp.service is defined elsewhere)

angular.module('myapp.service')

.factory('commServ', [function ($cordovaBLE) {
    // Get bluetooth devices
    service.getDevices = function () {
        console.log($cordovaBLE);

        return { error: null, success: true, value: [{ name: "Steve's Device" }] };
    };
}

The output in the console is always "undefined".

Upvotes: 1

Views: 1200

Answers (1)

LeftyX
LeftyX

Reputation: 35587

I guess you have installed the plugin:

cordova plugin add com.megster.cordova.ble

I've noticed a few things in your code.

When you create a new module, as you're doing with myapp.service and myapp.controller, you have to use this format:

angular.module('myapp.service', [])

notice the square brackets after the service module name.

Your controller's module is called awire.controller but you inject it in the main module like myapp.controller.

There's another problems with your service. When you register a service you always have to return it as in the documents.

You are returning an object

return { error: null, success: true, value: [{ name: "Steve's Device" }] };

but you're not instantiating the service:

The service factory function generates the single object or function that represents the service to the rest of the application. The object or function returned by the service is injected into any component (controller, service, filter or directive) that specifies a dependency on the service.

I use this pattern from john papa's style guides and your service would look like this:

(function() {

    'use strict';

    angular
        .module('myapp.service', [])
        .factory('commServ', commServ);

    commServ.$inject = ['$cordovaBLE'];

    /* @ngInject */
    function commServ($cordovaBLE) {

        console.log("factory => commServ => CREATE");

        var service = {
            getDevices: getDevices
        };

        return (service);

        function getDevices() {
            console.log($cordovaBLE);
            return {
                error: null,
                success: true,
                value: [{
                    name: "Steve's Device"
                }]
            };
        }
    }

})();

I've tested it on my android device and it works properly.

enter image description here

Upvotes: 0

Related Questions