在AngularJS中，当自定义服务注入到不同的模块时，未知的提供商

Unknown Provider in AngularJS when Injecting custom service into different module

本文关键字：提供商 模块 未知 注入 AngularJS 自定义 服务      更新时间：2023-09-26

我对AngularJS相当陌生，一直在尝试创建一个封装套接字的服务。网络沙盒应用程序的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服务?有什么建议吗?

问题不在于注入$socket服务，而在于创建它。在它的定义中，你定义了一个angular无法创建的依赖项。

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

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

作为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;
}]);

这是我最喜欢的最小安全版本(angular在他们的源代码中是这样做的):

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();
}]);
相关文章：