android - Connection is not defined in cordova network information plugin -
i have followed article:
to network information of device in ionic app android.
it works fine on browser when install compiled apk in android phone, gives error says reference error : connection not defined. @ line use $cordovanetwork.isonline();
i have been banging head around , have done due research , tried uninstalling , installing in order suggested no help.
help me fix issue. problem not issue code , may need clever fix working.
this same issue being discussed here have not understood given piece of code coming from.
index.html :
<!doctype html> <html ng-app="starter" > <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <meta http-equiv="content-security-policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <!-- <link href="lib/ionic/css/angular-datepicker.min.css" rel="stylesheet"> --> <link href="css/style.css" rel="stylesheet"> <!-- if using sass (run gulp sass first), uncomment below , remove css includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- angular date picker css--> <link href="lib/datepicker/css/angular-pickadate.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/ionic/js/highcharts-ng.js"></script> <script src="lib/ionic/js/jquery.min.js"></script> <script src="lib/ionic/js/highcharts.js"></script> <script src="lib/ionic/js/ngstorage.min.js"></script> <script src="lib/ngcordova/dist/ng-cordova.min.js"></script> <!-- cordova script (this 404 during development) --> <script src="cordova.js"></script> <!-- app's js --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="loginctrl"> <ion-nav-bar class="mob-bar-balanced"> <!-- <ion-nav-back-button> </ion-nav-back-button> --> </ion-nav-bar> <ion-nav-view></ion-nav-view> </body> </html> app.js:
app.factory('connectivitymonitor', ['$rootscope', '$cordovanetwork', function($rootscope, $cordovanetwork){ return { isonline: function(){ if(ionic.platform.iswebview()){ $rootscope.online = $cordovanetwork.isonline(); return $cordovanetwork.isonline(); } else { $rootscope.online = navigator.online; return navigator.online; } }, isoffline: function(){ if(ionic.platform.iswebview()){ $rootscope.online = $cordovanetwork.isonline(); return !$cordovanetwork.isonline(); } else { $rootscope.online = navigator.online; return !navigator.online; } }, startwatching: function(){ if(ionic.platform.iswebview()){ $rootscope.$on('$cordovanetwork:online', function(event, networkstate){ $rootscope.online =true; console.log("went online"); }); $rootscope.$on('$cordovanetwork:offline', function(event, networkstate){ $rootscope.online =false; console.log("went offline"); }); } else { window.addeventlistener("online", function(e) { $rootscope.online =true; console.log("went online"); }, false); window.addeventlistener("offline", function(e) { $rootscope.online =false; console.log("went offline"); }, false); } } } }]); .config(function($stateprovider,$urlrouterprovider){ $stateprovider .state('login',{ url:'/login', onenter:["$state","$localstorage", '$rootscope' , '$ionicviewswitcher',function($state,$localstorage, $rootscope, $ionicviewswitcher){ if((typeof($localstorage.userinfo)!== 'undefined') && (object.keys($localstorage.userinfo).length !== 0)) { $ionicviewswitcher.nexttransition('none'); $state.go("deployment"); } }], templateurl:'templates/login.html', controller:'loginctrl', resolve: { online: function(connectivitymonitor){ return connectivitymonitor.isonline(); } } })
i don't know tutorial you're mentioning, however, may want check post wrote goes literally step step telling , why should put piece of code (may useful if you're starting ionic): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/.
also, made example code available freely on github: https://github.com/hitman666/ionicnetworkinfo. can download project (if don't want go through steps yourself) build device , test on device.
here steps blog posts:
start new ionic project doing:
ionic start ionicnetworkinfo blank then, change directory newly created ionicnetworkinfo:
cd ionicnetworkinfo install ngcordova bower:
bower install ngcordova if chance don’t have bower installed, can install npm:
npm install bower -g open www/index.html file in favorite editor, , add reference ngcordova (just above cordova.js script):
<!-- should add, cordova below you'll have --> <script src="lib/ngcordova/dist/ng-cordova.min.js"></script> <!-- cordova script (this 404 during development) --> <script src="cordova.js"></script> install ngcordova network plugin executing following command in terminal/command prompt (you should root directory of app; so, in our case ionicnetworkinfo directory):
cordova plugin add org.apache.cordova.network-information to check if have installed plugin, can run following command (from root directory – won’t repeating anymore; when should run command terminal/command prompt that, in case, means root directory of application):
cordova plugin list you should see following output:
> cordova plugin list com.ionic.keyboard 1.0.4 "keyboard" org.apache.cordova.network-information 0.2.15 "network information" open www/js/app.js file , add ngcordova dependencies list, first line looks this:
angular.module('starter', ['ionic', 'ngcordova']) create new controller in www/js/app.js file called myctrl, following content:
.controller('myctrl', function($scope, $cordovanetwork, $rootscope) { document.addeventlistener("deviceready", function () { $scope.network = $cordovanetwork.getnetwork(); $scope.isonline = $cordovanetwork.isonline(); $scope.$apply(); // listen online event $rootscope.$on('$cordovanetwork:online', function(event, networkstate){ $scope.isonline = true; $scope.network = $cordovanetwork.getnetwork(); $scope.$apply(); }) // listen offline event $rootscope.$on('$cordovanetwork:offline', function(event, networkstate){ console.log("got offline"); $scope.isonline = false; $scope.network = $cordovanetwork.getnetwork(); $scope.$apply(); }) }, false); }) in controller attach event listener on deviceready event (because device not have been yet initialized when code runs) , network information with:
$cordovanetwork.getnetwork(); the information, weather you’re connected internet obtained following line:
$scope.isonline = $cordovanetwork.isonline(); then, register 2 events $cordovanetwork:online , $cordovanetwork:online trigger when device gets online/offline. in them update $scope variables (). reference, whole content of www/js/app.js file should be:
// ionic starter app // angular.module global place creating, registering , retrieving angular modules // 'starter' name of angular module example (also set in <body> attribute in index.html) // 2nd parameter array of 'requires' angular.module('starter', ['ionic', 'ngcordova']) .run(function($ionicplatform, $cordovanetwork, $rootscope) { $ionicplatform.ready(function() { // hide accessory bar default (remove show accessory bar above keyboard // form inputs) if(window.cordova && window.cordova.plugins.keyboard) { cordova.plugins.keyboard.hidekeyboardaccessorybar(true); } if(window.statusbar) { statusbar.styledefault(); } }); }) .controller('myctrl', function($scope, $cordovanetwork, $rootscope) { document.addeventlistener("deviceready", function () { $scope.network = $cordovanetwork.getnetwork(); $scope.isonline = $cordovanetwork.isonline(); $scope.$apply(); // listen online event $rootscope.$on('$cordovanetwork:online', function(event, networkstate){ $scope.isonline = true; $scope.network = $cordovanetwork.getnetwork(); $scope.$apply(); }) // listen offline event $rootscope.$on('$cordovanetwork:offline', function(event, networkstate){ console.log("got offline"); $scope.isonline = false; $scope.network = $cordovanetwork.getnetwork(); $scope.$apply(); }) }, false); }); in index.html file, inside ion-content tag paste following content:
<div class="card"> <div class="item item-text-wrap"> <h1>network: {{network}}</h1> </div> </div> <div class="card"> <div class="item item-text-wrap"> <ion-toggle ng-model="isonline" ng-checked="item.checked"> <h1 ng-show="isonline">i'm online</h1> <h1 ng-show="! isonline">i'm offline</h1> </ion-toggle> </div> </div> basically here show contents of network variable (which attached $scope via controller). also, using ion-toggle component show “i’m online” / “i’m offline” notifications.
just reference, content of whole index.html file should this:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- if using sass (run gulp sass first), uncomment below , remove css includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/ngcordova/dist/ng-cordova.min.js"></script> <!-- cordova script (this 404 during development) --> <script src="cordova.js"></script> <!-- app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter" ng-controller="myctrl"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">ionic blank starter</h1> </ion-header-bar> <ion-content padding="true"> <div class="card"> <div class="item item-text-wrap"> <h1>network: {{network}}</h1> </div> </div> <div class="card"> <div class="item item-text-wrap"> <ion-toggle ng-model="isonline" ng-checked="item.checked"> <h1 ng-show="isonline">i'm online</h1> <h1 ng-show="! isonline">i'm offline</h1> </ion-toggle> </div> </div> </ion-content> </ion-pane> </body> </html> in order test application should run on device (because can’t disable network in ios simulator). if have android device plugged computer (and sdks in place) can run following commands application running on android device:
ionic build android && ionic run android 
Comments
Post a Comment