Question

在使用角度的过程中，我已经从一个保存状态和数据切换到另一个，这里是两个。
请建议我继续保存哪一个？为什么？

     angular.module('app')
          .controller('personController', ['$scope', '$log',personsService, cntrl])
          .factory('personsService', ['$http', '$q', service]);

//First
        function cntrl($scope, $log, service){
          $scope.state = {creating:false; updating:false;}
          $scope.createPerson = createPerson;
          $scope.person = null;
          function createPerson(fn, ln, age){
            $scope.state.creating = true;
            service.createPerson({fn:fn, ln:ln, age:age})
              .success(function(r){/*something*/})
              .error(function(){/*something*/})
              .finally(function(){
                 $scope.state.creating = true;
               });
          }
        }
        function service($http, $q){
            var r = {
                createPerson : createPerson
            };
            return r;

            function createPerson(o){
                return $http.post('/person/create', o);
            }
        }

//Second
        function cntrl($scope, $log, service){
            $scope.person = service.person;
            $scope.state = service.state;
            $scope.service = service;
        }

        function service($http, $q){
            var state = {creating:false, updating:false};
            var person = {};
            var r = {
                state : state, 
                person : person,
                createPerson : createPerson
            }

            return r;

            function createPerson(o){
                state.creating = true;
                var def = $q.defer();
                $http.post('/person/create', o)
                    .success(function(dbPerson){
                        def.resolve(dbPerson);
                        angular.extend(dbPerson, person);
                    })
                    .error(function(e){
                        def.rreject(e);
                        angular.extend({}, person); //or any other logic
                    })
                    .finally(function(){
                        state.creating = false;
                    });

                return def.promise;
            }

        }

如你所见 1.第一个例子 ajax状态保持在控制器中。和service仅公开该ajax状态所需的函数。 Person对象也保持在控制器内部，因此我不必维护对象直接连接到购物车的同一对象的引用。我可以简单地做$scope.person = {};

2.第二个例子 ajax状态由服务维护，该服务现在公开person对象以及用于操纵对象的函数。现在我需要使用函数sucn angular.extend和angular.copy来维护对象bby的引用。现在，控制器暴露的ajax状态分为多个服务。优点是代码的模块化和几乎完全逻辑少的控制器。

Answer 1

我建议你去第二种方法。 AJAX数据调用应始终与Controller分开。控制器需要应在UI中显示的数据。明天您可能需要使用相同API的相同数据以不同的方式使用。通过这种方式，您可以使用相同的服务来获取数据并根据需要进行修改。控制器的更多内容不应该担心数据的来源。即它可能来自An AJAX调用，Web套接字，本地存储等。

因此，在您的情况下，angular.extend更有意义，因为您正在处理数据的副本，而不是其他控制器可能随时间使用的原始数据。可重复使用和清洁。

Answer 2

我想说正确的做法是两种方法的结合。 @Parv提到在UI上使用状态对象，它应该在控制器中休息。但是方法1中的服务功能是错误的。那里的逻辑应该使用$ q defer对象，就像你在方法中所做的那样2 ..

＆＃13;

 angular.module('app')
          .controller('personController', ['$scope', '$log',personsService, cntrl])
          .factory('personsService', ['$http', '$q', service]);

//First
        function cntrl($scope, $log, service){
          $scope.state = {creating:false; updating:false;}
          $scope.createPerson = createPerson;
          $scope.person = null;
          function createPerson(fn, ln, age){ 
            $scope.state.creating = true;          
            service.createPerson({fn:fn, ln:ln, age:age})
              .then(function(r){/*assign $scope.person = r;*/}),function() 
               {/*something*/}).finally(function() {
                $scope.state.creating = false;
              });
          }
        }

        function service($http, $q){
            var r = {
                createPerson : createPerson,
                person: {}
            };
            return r;

            function createPerson(o){                  
              var def = $q.defer();
              $http.post('/person/create', o)
                 .success(function(dbPerson){
                        def.resolve(dbPerson);
                        angular.extend(dbPerson, person);
                    })
                    .error(function(e){
                        def.reject(e);
                        angular.extend({}, person); //or any other logic
                    });

                return def.promise;
            }
        }

＆＃13;

通过这种方式，我们将帖子逻辑与UI中重要的事物隔离开来。

哪种做法最适合在angular.js中保存状态和模型

2 个答案: