Working 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. Also, there is a dependence on the Internet. If there is Internet - display the latest data from the site, if not - you need to display the data "wired" in the application upon release. That was the wish.
Problems arose when it was necessary to determine the presence of the Internet on the device.


This article is not the only correct solution to the problem. This is just my implementation. I could not find a better 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 \ wishes \ advice of other people. That 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 you change the route, and the page loads, the resolve block, 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 fine. And here is the final chord - you need to know if there is Internet on the device or not. Since I have no development experience in this direction, I need to do it! I started to google. I found the ngCordova library - which implements the relationship with the Cordova API through the usual angular.js. I need this information (about the Internet) at the stage of route processing. But wherever I tried to insert this code - nothing worked. As stated: 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 make the example of other plugins, did not give anything.

The decision was to give the application a lot of promises ... (: And it worked. After promising the mountains of gold, it (the application) believed me and earned.
Promises were 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 decision is probably not the most beautiful and correct, but it works. I want to read other thoughts and opinions.