对于那些初次访问并且在尝试使用Armed10的答案时遇到问题的人，您可能想查看我编写的帖子，该帖子字字珠玑地一步一步告诉您应该放置某段代码的位置和原因（如果您刚开始使用Ionic，这可能会有所帮助）：
http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/。
此外，我已经在Github上免费提供了示例代码：
https://github.com/Hitman666/IonicNetworkInfo。
编辑：根据StackOverflow的规定，我也在这里添加了文章内容：
一步一步教您如何自己做：
通过以下方式启动新的Ionic项目：
ionic start IonicNetworkInfo blank
接下来，将目录切换到新创建的IonicNetworkInfo目录:
cd IonicNetworkInfo
使用Bower安装ngCordova：
bower install ngCordova
如果您没有安装bower，可以使用npm进行安装：
npm install bower -g
在您喜欢的编辑器中打开www/index.html文件，并添加对ngCordova的引用（就在cordova.js脚本上方）：
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
在终端/命令提示符中执行以下命令安装ngCordova网络插件（您应该从应用程序的根目录执行此操作；因此，在我们的情况下是IonicNetworkInfo目录）：
cordova plugin add org.apache.cordova.network-information
要检查插件是否成功安装，您可以运行以下命令（从根目录运行 - 我不会再重复了；当我说您应该从终端/命令提示符运行某个命令时，这意味着从应用程序的根目录运行）:
cordova plugin list
您应该看到以下输出：
> cordova plugin list
com.ionic.keyboard 1.0.4 "Keyboard"
org.apache.cordova.network-information 0.2.15 "Network Information"
打开www/js/app.js文件，将ngCordova添加到依赖项列表中，这样基本上第一行看起来像这样：
angular.module('starter', ['ionic', 'ngCordova'])
在www/js/app.js文件中创建一个名为MyCtrl的新控制器，内容如下：
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
document.addEventListener("deviceready", function () {
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
})
在这个控制器中，你会在deviceready事件上附加一个事件监听器（因为在代码运行时设备可能尚未初始化），并通过以下方式获取网络信息：
$cordovaNetwork.getNetwork();
以下是检查您是否连接到互联网的代码：
$scope.isOnline = $cordovaNetwork.isOnline()
然后，你需要注册两个事件 $cordovaNetwork:online 和 $cordovaNetwork:offline，它们会在设备上线/离线时触发。在这些事件中，你只需要更新 $scope 变量 ()。
仅供参考，www/js/app.js 文件的整个内容应该是:
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
$ionicPlatform.ready(function() {
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();
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
});
在index.html文件中，在ion-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>
我们在这里做的基本上是展示网络变量的内容（该变量通过控制器与 $scope 相关联）。此外，通过使用 ion-toggle 组件，我们展示“我在线”/“我离线”的通知。
仅供参考，整个 index.html 文件的内容应如下所示：
<!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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<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>
为了测试此应用程序，您应该在设备上运行它（因为您无法在iOS模拟器中禁用网络）。如果您将Android设备插入计算机并安装所有必要的SDK，您可以运行以下命令以在Android设备上运行应用程序：
ionic build android && ionic run android
navigator.connection.type但是看起来这个对象是未定义的。 - Incpetormainproject文件夹之外。 - Incpetor