以AngularJS管理数据模型是正确的

当我冲浪互联网时,我发现了许多不同的方法来管理我们的角度模板中使用的数据模型,但它们只显示了更大的一部分.在大型应用程序中,我们需要将API数据粘贴到某些形式的 JavaScript模型中,这些模型反过来在我们的模板中使用,但我不知道应该如何管理这些.

阅读this article on AngularJS models后,我现在意识到,我应该将所有的模型包装在一个服务中,以便信息可以在多个控制器中使用.唯一的事情之一是它不解释如何将这些服务与API请求相结合.

这是我目前的实现.

客户型号

var Customer = function (obj) {
    var self = this;

    if (!obj) {
        self.Name = null;
        self.Address = null;
        self.PrimaryEmailAddress = null;
        self.SecondaryEmailAddress = null;
        self.PhoneNumber = null;

    } else {
        self = obj;
    }

    return self;
}

然后在我的控制器我使用这个模型在我的$范围像

客户控制器

app.controller('CustomerController',[function($scope,API){
    $scope.model = {};

    API.Account.getCustomer({id:'12345'},function(data){
        $scope.model = new Customer(data);
    });

}]);

这就是我的API服务

API服务

app.factory("API",["$resource",function ($resource) {

    var service = {};

    service.Account = $resource('/WebApi/Account/:type/:id',{},{
                            getCustomer: { method: 'GET',params: { type: 'Customer' } }
                        });

    return service;

}])

直到现在,我已经意识到有一个在父控制器中收集的API信息,现在在子控制器中是需要的

回到上面链接的文章,我现在可以改变我的模型,以便它们被包裹在一个角色服务中,因此可以在多个控制器之间使用.这个新的CustomerService可能看起来像这样

新客户服务

app.factory('CustomerService',function() {
  var CustomerService = {};
  var customer = new Customer();

  CustomerService.getCustomer = function() { return customer; }
  CustomerService.setCustomer = function(obj) { customer = obj; }

  return CustomerService;
});

这不是很像文章(更简单),但它基本上包含类似OO的函数来获取和设置Customer对象.

这样的问题是,我们仍然无法访问实际的API端点,从服务器获取客户数据？我们应该保持API服务和模型服务分开或尝试将它们组合成一个服务？如果我们这样做,那么我们还需要一种区分实际从服务器获取新鲜数据的方法,并且只需要获取单例对象中当前设置的Customer对象.

我想知道你对这个困境的初步回应？

UPDATE

我遇到了this article,将包含API请求的模型的所有功能集成到工厂服务中

模型服务和API服务应该分开. API服务可以依赖于模型服务和返回模型对象,而不是直接返回来自api的内容.

app.factory("API",'Customer','$q' function ($resource,Customer,$q) {

    var service = {};

    service.Account = function(accountId) {
         var defer=$q.defer();     
         var r=$resource('/WebApi/Account/:type/:id',params: { type: 'Customer' }}
                        });
         r.getCustomer({id:'12345'},function(data){
             defer.resolve(new Customer(data));
         })
         return defer.promise;
     }
     return service;

}]);

这样您就可以组合模型服务和API服务.我假定Customer是一个模型服务,而不是Customer对象.

更新：根据您的跟进问题,我认为可能会有更好的方法,但我没有尝试过.每次我们可以使用资源承诺,而不是创造自己的承诺：

service.Account = function(accountId) {
         var r=$resource('/WebApi/Account/:type/:id',params: { type: 'Customer' }}
                        });
         return r.getCustomer({id:'12345'}).$promise.then(function(data) {
            return new Customer(data); 
         });
}

由于当时的方法本身返回的promise被解析为返回当时回调语句的值,所以这应该是正常的.尝试这种方法并分享您的发现

原文地址：https://www.jb51.cc/angularjs/140603.html

以AngularJS管理数据模型是正确的

相关推荐