angularjs - 如何在 AngularJs 中检查互联网连接

Question

这就是我在 vanilla javascript 中检查互联网连接的方式：

setInterval(function(){
    if(navigator.onLine){
        $("body").html("Connected.");
    }else{
        $("body").html("Not connected.");
    }
},1000);

我的项目中有角度控制器和模块。我应该把上面的代码放在哪里？它应该在全局上下文中执行，而不是分配给某个控制器。可能有某种全局控制器吗？

Answer 1

首先，我建议您收听在线/离线事件。

您可以在 AnguarJS 中这样做：

var app = module('yourApp', []);

app.run(function($window, $rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline", function() {
        $rootScope.$apply(function() {
          $rootScope.online = false;
        });
      }, false);

      $window.addEventListener("online", function() {
        $rootScope.$apply(function() {
          $rootScope.online = true;
        });
      }, false);
});

注意：我在$apply方法中包装了根范围变量的更改，以通知 Angular 某些内容已更改。

之后，您可以：

在控制器中：

$scope.$watch('online', function(newStatus) { ... });

在 HTML 标记中：

 <div ng-show="online">You're online</div>
 <div ng-hide="online">You're offline</div>

这是一个工作 Plunker：http ://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

其他解决方案可能是广播在线/离线事件。但在这种情况下，您需要在加载时初始化当前状态，然后订阅事件。

Answer 2

这绝对不是那么好，但您可以尝试向您的 Web 服务器发出 AJAX 请求；它要么成功，要么超时。

此外，HubSpot/offline 项目看起来非常好。

Answer 3

您的选择：

• 窗口、文档或 document.body 上的 addEventListener。

• 将 document 或 document.body 上的 .ononline 或 .onoffline 属性设置
  为 JavaScript Function 对象。

• 在 HTML 标记中的标记上指定 ononline="..." 或 onoffline="..." 属性

我将演示最简单的。

在你的控制器中

document.body.onoffline = function() {
   alert('You are offline now');
   $scope.connection = 'offline' 
}

document.body.ononline = function() {
   alert('You are online again');
   $scope.connection = 'online' 
}

在尝试发送请求之前检查 $scope.connection 变量。

Answer 4

对于 Angular 2+，您可以使用ng-speed-test：

1. 只需安装：

npm install ng-speed-test --save

2. 注入你的模块：

import { SpeedTestModule } from 'ng-speed-test';

@NgModule({
   ...
   imports: [
       SpeedTestModule,
       ...
   ],
   ...
})
export class AppModule {}

3. 使用服务来获得速度：

import {SpeedTestService} from 'ng-speed-test';

@Injectable()
export class TechCheckService {
  constructor(
    private speedTestService:SpeedTestService
  ) {
    this.speedTestService.getMbps().subscribe(
      (speed) => {
        console.log('Your speed is ' + speed);
      }
    );
  }
}