离子型：用科尔多瓦检查互联网连接 [英] Ionic: Check Internet Connection using Cordova

问题描述

我的工作框架离子，面向使用的的Apache科尔多瓦网络API 检测Android应用程序的网络连接。
我已经提到本教程的，也创造了一个演示项目，该项目运行良好。

我按照下面的步骤。 [从教程]

1. 离子开始testApp sidemenu




2. 离子平台的android添加




3. 打开 testApp / WWW / JS / app.js




4. 复制粘贴此code

    如果（window.Connection）{  如果（navigator.connection.type == Connection.NONE）{
         警报（'没有可用的互联网连接'）;
     }其他{
         警报（navigator.connection.type）;
     }
   }其他{
         警报（'无法找到Window.Connection'）;
   }
    




5. 安装插件科尔多瓦科尔多瓦插件添加org.apache.cordova.network信息




6. 建立离子构建Android




7. 运行离子运行的Andr​​oid

这正常工作

问题

<醇开始=8>

复制粘贴 WWW 从 mainproject 到 testApp 和执行步骤6和7

我得到一个警报找不到Window.Connection

之后复制粘贴 app.js 看起来像这样

  .RUN（函数（$ ionicPlatform）{
  $ ionicPlatform.ready（函数（）{
    //默认隐藏附件栏（删除此显示键盘上方的附件栏
    //表单输入）
    如果（window.cordova＆安培;＆安培; window.cordova.plugins.Keyboard）{
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar（真）;
    }
    如果（window.StatusBar）{
      // org.apache.cordova.statusbar要求
      StatusBar.styleDefault（）;
    }
    //检查互联网连接
    //alert(window.Connection）;
    警报（'你好'）
    尝试{
       警报（'Naviagtor说'+ navigator.connection.type）;
     }
    赶上（错误）{
       警报（'错误'+ err.message）
       //这里我得到'错误无法读取未定义的属性类型
     }如果（window.Connection）{
    如果（navigator.connection.type == Connection.NONE）{
        警报（'没有可用的互联网连接'）;
    }其他{
        警报（navigator.connection.type）;
    }
}其他{
    警报（'无法找到Window.Connection'）;
}  }）;
}）
 

我复制粘贴的那一刻我的 app.js 和 controllers.js 到 testApp / WWW / JS 目录整件事炸毁。

在调试任何帮助是非常AP preciated。

谢谢，

注意

我确实有 cordova.js 在 index.html的。

我已经重新安装了平台和插件复制后粘贴为好。

解决方案

我用 ngcordova 。它给你身边的实现诺言的插件的角度包装。

通常科尔多瓦插件，当您试图打电话给他们，用承诺接口，你才能避免不确定的错误是没有准备好。

我偷的例子从ngcordova页面上的网络插件这里。

  module.controller（'MyCtrl'，函数（$范围，$ rootScope，$ cordovaNetwork）{ document.addEventListener（deviceready功能（）{    变种类型= $ cordovaNetwork.getNetwork（）    VAR isOnline = $ cordovaNetwork.isOnline（）    VAR IsOffline现= $ cordovaNetwork.isOffline（）
    //监听在线活动
    $ rootScope。在$（'networkOffline'，函数（事件，networkState）{
      VAR onlineState = networkState;
    }）    //监听脱机事件
    $ rootScope。在$（'networkOffline'，函数（事件，networkState）{
      VAR offlineState = networkState;
    }）  }，FALSE）;
}）;
 

I am working on Ionic Framework, and facing issues using the Apache Cordova Network API to detect internet connection in Android App. I have referred this tutorial and also created a demo project, which works fine.

I have followed the below steps. [from the tutorial]

1. ionic start testApp sidemenu

2. ionic platform add android

3. Open testApp/www/js/app.js

4. Copy paste this code

   if(window.Connection) {
   
     if(navigator.connection.type == Connection.NONE) {
         alert('There is no internet connection available');
     }else{
         alert(navigator.connection.type);
     }
   }else{
         alert('Cannot find Window.Connection');
   }
   

5. Install Cordova Plugin cordova plugin add org.apache.cordova.network-information

6. Build ionic build android

7. Run ionic run android

This works fine

Issue

8. Copy Paste www from mainproject to testApp and do steps 6 and 7

I get a alert Cannot find Window.Connection

After copy pasting the app.js looks like this

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    // check internet connection
    //alert(window.Connection);
    alert('Hi')
    try {
       alert('Naviagtor says'+navigator.connection.type);
     }
    catch(err) {
       alert( 'Error '+ err.message) 
       //here i get 'Error cannot read property type of undefined'
     }

if(window.Connection) {
    if(navigator.connection.type == Connection.NONE) {
        alert('There is no internet connection available');
    }else{
        alert(navigator.connection.type);
    }
}else{
    alert('Cannot find Window.Connection');
}

  });
})

The moment I copy paste my app.js and controllers.js to the testApp/www/js directory the whole thing blows up.

Any help in debugging is highly appreciated.

Thanks,

Note

I do have cordova.js in index.html.

I have re installed platforms and plugins after copy paste as well.

解决方案

I solved a similar issue by using ngcordova . It gives you an angular wrapper around the plugin that implements promises.

Often Cordova plugins aren't ready when you try to call them, using the promise interface you can avoid getting undefined errors.

I stole the example from the ngcordova page on the network plugin here.

module.controller('MyCtrl', function($scope, $rootScope, $cordovaNetwork) {

 document.addEventListener("deviceready", function () {

    var type = $cordovaNetwork.getNetwork()

    var isOnline = $cordovaNetwork.isOnline()

    var isOffline = $cordovaNetwork.isOffline()


    // listen for Online event
    $rootScope.$on('networkOffline', function(event, networkState){
      var onlineState = networkState;
    })

    // listen for Offline event
    $rootScope.$on('networkOffline', function(event, networkState){
      var offlineState = networkState;
    })

  }, false);
});

这篇关于离子型：用科尔多瓦检查互联网连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！