Question

我是AngularJS的新手，并且一直致力于创建一个服务，为一个网络沙箱应用程序包装socket.io。

我在一个单独的文件中创建了一个'NetworkServices'模块：

(function(){
    var app = angular.module('NetworkServices', []);
    app.factory('$socket', ['', function(){
        var Socket = {
            ip: '127.0.0.1',
            port: '8080',
            socket: null,
            Connect: function(ip, port, sock){
                Socket.ip = ip;
                Socket.port = port;
                Socket.log('Connecting to ' + Socket.ip + ':' + Socket.port);
                Socket.socket = window.io.connect(Socket.ip + ':' + Socket.port);
                sock = Socket.socket;
            }
        };
        return Socket;
    }]);
})();

以下是我试图将服务注入的模块：

(function(){
    var app = angular.module('server', ['ui.bootstrap', 'NetworkServices']);

    app.controller('ServerCtrl',['$scope','$socket',  function ($scope, $socket) {
            var val = $scope;
            val.test = true;

            var self = this;
            self.isCollapsed = false;
            self.ip = '129.119.228.206';
            self.port = '8080';
            self.socket = {};

            self.Connect = function(){
                $socket.Connect(self.ip, self.port, self.socket);
            };
      }]);


    app.directive('server', function(){
        return {
            restrict: 'E',
            templateUrl: 'views/server.html',
            controller: 'ServerCtrl',
            controllerAs: 'server'
        };
    });


})();

当我将$ socket服务添加到服务器模块时，我收到以下错误：

Error: [$injector:unpr] Unknown provider: Provider <-  <- $socket

我已将“NetworkServices”模块添加为“服务器”模块的依赖项，但我不知道为什么我无法访问$ socket服务？有什么建议吗？

Answer 1

问题不在于注入$ socket服务，而在于创建它。在其定义中，您定义了一个名为''的依赖项，即angular不能创建。

app.factory('$socket', ['', function(){...

应该是：

app.factory('$socket', function(){...

由于您的方法没有参数，因此它没有声明的依赖关系。

Answer 2

作为角色的新手，请注意使用＆＃39; $＆＃39;在您自己的服务之前的前缀被认为是不好的做法，因为它是为角度的内部组件和变量保留的。关于从工厂定义中删除空字符串的另一个答案是准确的。在工厂定义中包含方括号的原因是为了使其缩小安全性。以下是定义工厂的3种主要方法：

非缩小安全版

app.factory('Socket', function ($log, $window) {
  function Socket(ip, port, socket) {
    this.ip = '127.0.0.1';
    this.port = '8080';
    this.socket: null;
  }

  Socket.prototype.connect = function (ip, port, sock){
    $log('Connecting to ' + Socket.ip + ':' + Socket.port);
    this.socket = $window.io.connect(Socket.ip + ':' + Socket.port);
    return this.socket;
  }

  return Socket;
});

这是方括号最小安全版本：

app.factory('Socket', ['$log', '$window', function ($log, $window) {
  function Socket(ip, port, socket) {
    this.ip = '127.0.0.1';
    this.port = '8080';
    this.socket: null;
  }

  Socket.prototype.connect = function (ip, port, sock){
    $log('Connecting to ' + Socket.ip + ':' + Socket.port);
    this.socket = $window.io.connect(Socket.ip + ':' + Socket.port);
    return this.socket;
  }

  return Socket;
}]);

这是我首选的最小安全版本（角度在源代码中的作用方式：

socketFactory.$inject = ['$log', '$window'];
function socketFactory($log, $window) {
  function Socket(ip, port, socket) {
    this.ip = '127.0.0.1';
    this.port = '8080';
    this.socket: null;
  }

  Socket.prototype.connect = function (ip, port, sock){
    $log('Connecting to ' + Socket.ip + ':' + Socket.port);
    this.socket = $window.io.connect(Socket.ip + ':' + Socket.port);
    return this.socket;
  }

  return Socket;
}

app.factory('Socket', socketFactory);

现在控制器会更简单。

app.controller('ServerCtrl',['Socket', function (Socket) {
  this.socketConfig = new Socket('129.119.228.206', '8080'),
  this.socket = socketConfig.connect();
}]);

将自定义服务注入到不同模块时，AngularJS中的未知提供程序

2 个答案: