javascript - 将 Angular Controller 重构为单独的工厂和 Controller

Question

学习 Angular 。立即使用 1.6.6。

在我最初的尝试中，我将所有 $http 请求放入 Controller 中，因此我尝试将其从 Controller 中取出并放入工厂以获得更多可重用的代码。我认为我缺少与 Promise 或注入(inject)相关的内容，但是来 self 的 $http 调用的数据未正确绑定(bind)到 $scope .

I've been following along this guide.

我有一个从 Controller 开始加载的模板(模板加载正常):

<form ng-init="getAllRegions()" ng-submit="getRandomTown()">

        <h3>Generate Random Town</h3>

        <div class="form-group-row">
            <label for="selectRegion">Select Region:</label>

            <select name="nameEntity"
                id="selectRegion"
                ng-model="guidEntity" 
                ng-options="item.guidEntity as item.nameEntity for item in regions">

                <option value="" ng-if="!guidEntity"></option>
            </select>
        </div>                                  
    </form>

ng-init 函数正在被调用，并通过 Controller 和服务。在 chrome 检查器中，我可以看到数据正在正确地传输，但我是使用 Promises 的新手，所以我一路上失去了一些东西。当 $http 调用在 Controller 中正确且数据绑定(bind)到 Controller 中的 $scope 时，这一切都按预期工作。

Controller :

angular.
    module('randomTown.controller', []).

    component('randomTownGenerator', {

        templateUrl: 'js/components/randomTownGenerator/randomTownGenerator.tpl.html'

    }). 

    controller('RandomTownCtrl',

        function($scope, randomTownFactory) {

            $scope.data = {};

            $scope.getAllRegions = function () {
                $scope.regions = randomTownFactory.getAllDBRegions();
            }


        }
    );  

服务:

angular.
    module('randomTown.service', []).
    factory('randomTownFactory', function ($q, $http) {

        var service = {};

        service.getAllDBRegions = function() {

            var deferred = $q.defer();

            $http({
                  method: 'GET',
                  url: '/all-regions'
            }).then(function success(data) {
                deferred.resolve(data);
            }), function error(response) {
                deferred.reject('There was an error');
            }

            return deferred.promise;
        }

        return service;
    }); 

Answer 1

无需使用 $q.defer 制造 Promise。只需返回 $http promise :

app.factory('randomTownFactory', function ($q, $http) {

    var service = {};

    service.getAllDBRegions = function() {

        ̶v̶a̶r̶ ̶d̶e̶f̶e̶r̶r̶e̶d̶ ̶=̶ ̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶

        ̲r̲e̲t̲u̲r̲n̲ $http({
              method: 'GET',
              url: '/all-regions'
        }).then(function success( ̶d̶a̶t̶a̶ response) {
            ̶d̶e̶f̶e̶r̶r̶e̶d̶.̶r̶e̶s̶o̶l̶v̶e̶(̶d̶a̶t̶a̶)̶;̶
            return response.data;
        }),̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶e̶r̶r̶o̶r̶(̶r̶e̶s̶p̶o̶n̶s̶e̶)̶ ̶{̶

           ̶d̶e̶f̶e̶r̶r̶e̶d̶.̶r̶e̶j̶e̶c̶t̶(̶'̶T̶h̶e̶r̶e̶ ̶w̶a̶s̶ ̶a̶n̶ ̶e̶r̶r̶o̶r̶'̶)̶;̶
        ̶}̶
          ̶r̶e̶t̶u̶r̶n̶ ̶d̶e̶f̶e̶r̶r̶e̶d̶.̶p̶r̶o̶m̶i̶s̶e̶;̶, 
    }

    return service;
}); 

另请注意，成功处理程序不会显示数据。它显示了一个 response 对象，其中 data 是其属性之一。

Controller :

app.controller('RandomTownCtrl',

    function($scope, randomTownFactory) {

        $scope.getAllRegions = function () {
            var promise = randomTownFactory.getAllDBRegions();
            promise.then(function(data) {
                $scope.regions = data;
            }).catch(function(errorResponse) {
                console.log("ERROR", errorResponse.status)
            });          
        }

    }
);  

欲了解更多信息，请参阅

• AngularJS $http service API Reference
• You're Missing the Point of Promises