您如何重用 Angular 中的代码？

Question

我有一个控制器，它可以获取一些数据并根据这些信息添加一些额外的项目。信息应该是可搜索的。我现在有工作代码，但想知道重用代码的最佳方法是什么？是指令吗？工厂？这是代码：

app.controller('searchProducts', function($scope, $http) {
$scope.search = function(val) {
    $scope.val = val;
    //from here
    let query;
    if(!$scope.val) {
        query = BASE_URL+"Products";   
    }
    if($scope.val) {
        query = encodeURI("Products?$filter=contains(ProductName,\'"+val+"\')");
        query = BASE_URL+query;
    }
    $http.get(query)
        .then(function(response) {
            $scope.rawData = response.data;
            angular.forEach($scope.rawData.value, function(value) {
                //looping the data, replacing the IDs with actual data from the source
                //Getting actual Supplier using SupplierID
                $http.get("http://services.odata.org/V4/Northwind/Northwind.svc/Suppliers("+value.SupplierID+")/CompanyName/$value")
                    .then(function(response) {
                        value.Supplier = response.data;           
               })
                //Getting actual Category using CategoryID
                $http.get("http://services.odata.org/V4/Northwind/Northwind.svc/Categories("+value.CategoryID+")/CategoryName/$value")
                    .then(function(response) {
                        value.Category = response.data;           
               })
            });
        })
    //to here
}
    //is repeated here
});

Answer 1

您可以使用工厂并将该行为捆绑在一种或多种方法中，即

app.factory('myFactory', function($http, $q) {
    return {
        myRequest: function(query) {
            return $http.get(query).then(this.myHandler);
        },
        myHandler: function(response) {
            var categoryPromises = [];
            var supplierPromises = [];
            angular.forEach(response.data, function(value) {
                supplierPromises.push($http.get("http://services.odata.org/V4/Northwind/Northwind.svc/Suppliers("+value.SupplierID+")/CompanyName/$value"));
                categoryPromises.push($http.get("http://services.odata.org/V4/Northwind/Northwind.svc/Categories("+value.CategoryID+")/CategoryName/$value"));
            });
            return $q.all([$q.all(supplierPromises), $q.all(valuePromises)]);
        }
    };
});
// and to invoke the factory
app.controller('myController', function(myFactory) {
    myFactory.myRequest('/path/to/resource')
        .then(function(results) {
            //... handle your results
        })
        .catch(function(e) {
            throw e;
        });
});

您如何重用 Angular 中的代码？

How do you reuse code in Angular?

function

angularjs

angular2-directives

angular-factory