將自定義服務注入其他模塊時，AngularJS中的未知提供程序

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服務，而在於創建它。 在其定義中，定義了一個稱為''的依賴關系，該依賴關系無法創建。

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

應該：

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

由於您的方法沒有參數，因此沒有要聲明的依賴項。

Answer 2

作為angular的新手，請注意，在您自己的服務之前使用'$'前綴被認為是不好的做法，因為它是為angular的內部組件和變量保留的。 關於從工廠定義中刪除空字符串的另一個答案是准確的。 在工廠定義周圍加上方括號的原因是為了確保縮小的安全性。 以下是定義工廠的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();
}]);