将数据检索代码（websockets）移动到AngularJS控制器中

Question

我编写了以下基本的AngularJS应用程序。 到目前为止，所有这一切都是建立一个websocket结束，要求从中获取一些数据。

这种实现有效。 我接下来要做的是把这个代码放在服务中。 考虑到这一点，我想知道我将如何能够检索数据。 只要websocket代码在控制器中，我就可以更新onmessage方法中的“entries”数组。

如何从服务中获取数据。 如何将我的条目数组“附加”到服务并通过服务更新它？

    var mbclient = angular.module('mbclient', ['ngRoute']);

    mbclient.config(function ($routeProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'homeController',
            controllerAs: 'homeController'
        });
    });

    mbclient.controller('homeController', ['$log', '$scope', function ($log, $scope) {

    var self = this;
    this.dateFormat = 'dd.MM.yyyy';

    this.entries = [];

    var websocket = new WebSocket("ws://christians-MBP.fritz.box:8888");

    websocket.onopen = function () {
        $log.info("Socket has been opened");

        var message = JSON.stringify(self.entries);
        websocket.send(message);
    };

    websocket.onclose = function () {
        $log.info("Socket has been closed");
    };

    websocket.onmessage = function (event) {
        $log.debug("A message has been received");

        self.entries = JSON.parse(event.data);
        $scope.$digest();
    };
    }]);

Answer 1

您可以使用websocket方法和数据字段创建服务。 您可以使用引用在控制器和服务之间共享数据。

mbclient.config(function ($routeProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'homeController',
            controllerAs: 'homeController'
        });
    });

mbclient.service('webSocketService', ['$log',function($log){

this.entries = []; 

//WebSockets here for example

 websocket.onmessage = function (event) {
        angular.extend(this.entries, JSON.parse(event.data));  
    };

}]);

    mbclient.controller('homeController', ['$log', '$scope', 'webSocketService', function ($log, $scope,webSocketService) {

    var self = this;
    this.dateFormat = 'dd.MM.yyyy';

    this.entries = webSocketService.entries;

   }

您无法将新数组分配给包含服务数据的字段，因为您丢失了引用。 您必须在此字段上操作。