Work with ngCordova in Cordova applications

    Good day to all.

    There is an application written in ionic and using Cordova. The essence of the application is to display some information from the site.
    There is nothing complicated. There is also an internet dependence. If there is Internet, display the latest data from the site, if not, you need to output the data “wired” to the application upon release. That was a wish.
    Problems arose when it was necessary to determine the availability of the Internet on the device.


    This article is not the only true solution to the problem. This is just my implementation. I could not find a more competent solution. Therefore, the main task of my post is to show how the problem was implemented by me, and it is possible to see, read the comments / suggestions / advice of other people. Which will help both me personally and others - in solving such problems.

    The application consists of a main screen and two options for secondary screens. When changing the route and loading the page, the resolve block is executed , which completely receives the data, and then displays the page.

    .config(function($stateProvider, $urlRouterProvider) {
            $stateProvider.state('main', {
                url: '/',
                templateUrl : "views/main.html",
                controller : "MainController",
                resolve :{
                    homepageData : function (appService){
                        return appService.getMainData();
                    }
                    ...
                }
            });
            ...
    });
    


    At the very beginning, for ease of obtaining information about the state of the Internet, I used the usual variable in true | false

    Everything worked perfectly. And here is the final chord - you need to find out if the Internet is on the device or not. Since I have no development experience in this direction, but I need to do it! I started googling. I found the ngCordova library - which implements the relationship with the Cordova API through the familiar angular.js. I need this information (about the Internet) at the stage of processing routes. But wherever I tried to insert this code, nothing worked. As they said: device not ready.

    Here is an example of one of the attempts.

    ...
    .run(function($ionicPlatform, $rootScope, $cordovaNetwork) {
            $ionicPlatform.ready(function() {
                if(window.cordova && window.cordova.plugins.Keyboard) {
                    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                }
                if(window.StatusBar) {
                    StatusBar.styleDefault();
                }
                //$rootScope.internetAccess = true;
                $rootScope.internetAccess =  $cordovaNetwork.isOnline();
            });
        });
    

    And as I said: Error device not ready. Again in google, those solutions (for working with ngCordova) that I found were for other plugins, or did not work at all. Attempts to do with the example of other plugins failed.

    The solution was to give the application many promises ... (: And it worked. By promising the mountains of gold, it (the application) believed and earned me. The
    promises looked like this:

    In resolve:
    ...
    resolve :{
                    homepageData : function (appService, $cordovaNetwork){
                        return appService.getMainData().then(function(data){
                            return data;
                        });
                    },
                    ....
                }
    ..
    


    and function in service

             angular.module('myModule').factory('appService', function($q, $http, config_data, $injector, $ionicPlatform) {
        var appData = {
            getMain : function() {
                var defer = $q.defer();
                $ionicPlatform.ready(function(){
                    var cordovaNetwork = $injector.get('$cordovaNetwork');
                    if(!cordovaNetwork.isOnline()){
                        defer.resolve($http({ method: 'GET', url: config_data.API_HOST + config_data.JSON_PREFIX + 'main.json' }).success(function(data, status, headers, config) {
                            return data;
                        }));
                    }else{
                        defer.resolve($http({ method: 'GET', url: 'json/' + config_data.JSON_OFFLINE_PREFIX + 'main.json' }).success(function(data, status, headers, config) {
                            return data;
                        }));
                    }
                });
                return defer.promise;
            },
        ...
        }
        return appData;
    });
    


    I am sure that the solution is probably not the most beautiful and correct, but it works. I would like to read other thoughts and opinions.

    Also popular now: