7

我仍在学习 AngularJS，并且对它们的依赖注入风格有疑问。例如，假设我有一个DataProcessor服务，它有一个接收参数的processData方法，uri它需要读取该数据（可能是 xml、json 等），然后对其执行一些操作。构造DataProcessor函数接受一个DataReader知道如何读取特定文件类型的接口的实现。以下是我正在谈论的一些示例服务：

// implementations of the DataReader interface
myApp.service('XmlDataReader', function() {
    this.readData = function(uri) {
        // read xml data from uri
    }
}]);

myApp.service('JsonDataReader', function() {
    this.readData = function(uri) {
        // read json data from uri
    }
}]);

// data processing service that takes in an implementation of a DataReader
myApp.service('DataProcessor', ['DataReader', function(DataReader) {

    this.processData = function(uri) {
        var readData = DataReader.readData(uri);

        // process data and return it
    }
}]);

从典型的依赖注入角度来看，可以将特定类型的DataReader传递给DataProcessor并使用，如下所示：

var dataProcessor = new DataProcessor(new JsonDataReader());
var processedData = dataProcessor.processData('dataz.json');

AngularJS 的做法是什么？

4

3 回答 3

2

做这样的事情：

myApp.service('DataProcessor', ['$injector', 'valueRecipeOfTheServicename', function($injector, valueRecipeOfTheServicename) {

    this.processData = function(uri) {
        var service = $injector.get(valueRecipeOfTheServicename);

        // process data and return it
    }
}]);

$injetcor.get() 检索服务

于 2014-08-19T12:11:47.647 回答
1

基于 Noypi Gilas的回答，我使用服务名称启动控制器并通过 $injetcor.get() 检索它：

myApp.service('DataProcessor', ['$injector', function($injector) {
    var service;

    $scope.init = function (serviceName) {
        service = $injector.get(serviceName);
    }

    this.processData = function(uri) {
        // use the service ...
    }
}]);
于 2015-07-24T12:09:29.330 回答
0

由于 DI 的工作方式——你不应该创建你的服务实例，真的。你所做的就是将你需要的服务注入到你的控制器中，它应该可以正常工作。在上述情况下，您的控制器可能被定义为：

var app = angular.module('App', ['DataProcessor']);

function MyController($scope, DataProcessor) {
    var uri = '';
    DataProcessor.processData(uri);
}

您需要在这里做的唯一另一件事是确保“App”是您在“ng-app”指令中指定的名称，并确保您的页面在包含 Angular应用程序模块之前包含带有“DataProcessor”的 JS 文件（从技术上讲，这些甚至可以在同一个文件中定义）。希望这可以帮助！

编辑

顺便说一句，如果您需要缩小 - 以下是您定义控制器的方式：

var app = angular.module('App', ['DataProcessor']);

// if you need to minify:
var MyController = ['$scope', 'DataProcessor',
    function($scope, DataProcessor) {
        var uri = '';
        DataProcessor.processData(uri);
    }
];

附加建议

我目前对服务的理解是用于在控制器之间共享数据或代码。如果此数据处理特定于该控制器，您可能会考虑将“ProcessData”实现直接移动到您的控制器中。有时，这样的更改可能比处理服务中的数据更简单。如果您确实在服务中处理数据，您可能仍希望将该数据写回范围。在这种情况下，您可以将 $scope 作为参数传递到服务例程中。由于我对您的用例了解不多，因此请对这些建议持保留态度。祝你好运！

于 2013-12-19T14:39:21.170 回答