个人中心
gpt4 book ai didi

angularjs - 仅当 ionic 网络连接可用时才发送 HTTP 请求

转载 作者：行者123 更新时间：2023-12-04 03:15:37 25 4
gpt4 key购买 nike

我正在研究 ionic 。我正在发送多个 http 请求。

我只想在网络连接可用时发送 http 请求。

有时我们的网络连接可用。在应用程序内播放时，我们会离线进行。

我们可以检测到这一点吗？如何检测？

谢谢

最佳答案

正如 Sabarish 已经指出的，使用 Network information plugin 。

Nic Raboy 的博客文章很好，但您可能想查看我写的文章，该文章逐字逐句地告诉您应该在何处以及为什么要放置一些代码(如果您刚开始使用 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 脚本上方): 
<!-- This is what you should add, the cordova below you'll already have -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<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 ，内容如下: 
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
    document.addEventListener("deviceready", function () {

        $scope.network = $cordovaNetwork.getNetwork();
        $scope.isOnline = $cordovaNetwork.isOnline();
        $scope.$apply();

        // listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $scope.isOnline = true;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

        // listen for Offline event
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
            console.log("got offline");
            $scope.isOnline = false;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

  }, false);
})

在此 Controller 中，您在 deviceready 事件上附加了一个事件监听器(因为当此代码运行时，该设备可能尚未初始化)，您可以通过以下方式获取网络信息: 
$cordovaNetwork.getNetwork();

使用以下行获取有关您连接到 Internet 的天气的信息: 
$scope.isOnline = $cordovaNetwork.isOnline();

然后，您注册两个事件 $cordovaNetwork:online 和 $cordovaNetwork:online 当设备在线/离线时触发。在它们中，您只需更新 $scope 变量 ()。
仅供引用，www/js/app.js 文件的全部内容应该是: 
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
  $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) {
      StatusBar.styleDefault();
    }

  });
})

.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
    document.addEventListener("deviceready", function () {

        $scope.network = $cordovaNetwork.getNetwork();
        $scope.isOnline = $cordovaNetwork.isOnline();
        $scope.$apply();

        // listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $scope.isOnline = true;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

        // listen for Offline event
        $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>

基本上我们在这里所做的是显示网络变量的内容(通过 Controller 附加到 $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">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the 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 will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your 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>

为了测试这个应用程序，你应该在你的设备上运行它(因为你不能在 iOS 模拟器中禁用网络)。如果您的计算机上插入了 Android 设备(并且所有 SDK 都已就位)，您可以运行以下命令来让您的应用程序在您的 Android 设备上运行: 
ionic build android && ionic run android

关于angularjs - 仅当 ionic 网络连接可用时才发送 HTTP 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32063813/

25 4 0
文章推荐： xamarin.ios - 在软件键盘上绑定(bind) 'GO' 键
文章推荐： cakephp - UpdateAll的魔力
文章推荐： security - 开发一个 Web 应用程序，该应用程序自动轮换用于加密存储在数据库中的数据的加密 key
文章推荐： angularjs - 在 AngularJS 和 Ionic 上渲染列表之前等待异步数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com