【问题标题】:When should I create factory or VM in angular我什么时候应该以角度创建工厂或虚拟机
【发布时间】:2017-12-02 07:29:23
【问题描述】:

这就是我的 Angular 应用程序的样子。

(function () {
"use strict";

angular
    .module("app")
    .controller("custCtrl", custCtrl);

custCtrl.$inject = ['dataService','custFactory'];

/* @ngInject */
function custCtrl(dataService, custFactory) {
    var vm = this;
    //line##
    vm.customer= custFactory.Create('customer');

    GetCustomers();
    function GetCustomers() {

        dataService.read().then(function (data) {
                vm.customer = data.fields;
            }
        });

    }

    return vm;
}
})();

工厂方法

(function () {
'use strict';

angular
    .module('app.factory')
    .factory('custFactory', custFactory);

custFactory.$inject = ['$q'];

/* @ngInject */
function custFactory($q) {
    var _create = function (type) {

        var obj = {};

        switch (type.toString().toLowerCase()) {
            case "customer":
                obj = new Customer();
                break;
            default:
                obj = null;
        }

        return obj;
    }

    return {
        Create: _create
    };
}
})();

查看模型

 function Customer()
 {

var dto = this;

dto.Customer = {
  "Name" : "",
  "Gender" : "", // & so on
}

 return dto;
}

如果你在 //line## 上查看我上面的custCtrl,我正在调用工厂方法来实例化客户对象,如下所示。

vm.customer= custFactory.Create('customer');

但如果我创建客户虚拟机和工厂并简单地分配一个空字符串,如下所示。

        vm.customer= {};

它仍然可以正常工作。

所以我的问题是我为什么要创建虚拟机和工厂?它是什么 好处??

【问题讨论】:

  • 您使用var vm = this; 只是为了表示绑定范围并删除$scope 注入到您的控制器中。在一般情况下,您使用应该可数据绑定到视图的属性来装饰vm。我不明白为什么你需要//line## 行上的代码,如果你在GetCustomers() 方法中用data.fields 覆盖vm.customer

标签: javascript jquery angularjs loose-coupling angular-factory


【解决方案1】:

AngularJS 模式和最佳实践涉及遵循 MV(whatever) 模式和设计/实现具有高内聚和低耦合的模块化组件。这样您就可以轻松修改一段代码,而无需更改另一段代码。

通常,工厂或服务用作与 RESTful API 或某种服务器端代码交互的客户端代码层。通常这是工厂的唯一功能。这样您就可以将工厂注入到需要使用工厂功能的任何 控制器中。当您需要修改调用 API 的方式时,您只需要在工厂中进行更改,而不是对将使用该函数的每个控制器进行更改。

与您创建的视图模型对象类似,您只需在一处进行更改。想象一下,有五个不同的控制器都需要使用Customer 对象。现在您决定要删除Name 字段并将其替换为FirstNameLastName。您是想检查所有控制器并进行更改,还是只想更改视图模型?

给你一个简短的答案。不创建视图模型或工厂/服务没有任何功能错误。从架构或设计的角度来看,在您的应用程序中具有强大的关注点分离是非常有意义的。因此,使用工厂访问数据并使用视图模型访问数据对象是有意义的。

尝试想象您的应用程序会增长到拥有数百个控制器/视图和数十个工厂或服务。如果您在开发之初就没有实施这些模式和最佳实践,那么维护该应用程序将非常痛苦。

【讨论】:

  • 谢谢!!让我感到困惑的是为什么我需要 //line## 如果然后在 GetCustomers() 方法中用 data.fields 覆盖 vm.customer
【解决方案2】:

控制器别名适用于嵌套控制器,

而工厂或服务适合在不同控制器之间共享数据。

例如,如果您从不同的控制器中使用方法,那么拥有您的方法 CreateCustomer 会很有用。由于您没有在其中存储数据,因此最好使用 service 代替。无论如何,它允许您保存代码。

示例

var app = angular.module("myApp", []);

app.factory("myFactory", function(){
    var private = {
        users: {}
    };
    var data = {
        getUser: function(id){
             return private.users[id];
        },
        createUser: function(id){
            private.users[id] = someData;
            return private.currentUser;
        }
    };

    return data;
});


app.controller("myC1", ["myFactory", function(myFactory){

     $scope.user = myFactory.createUser(1);

}]);


app.controller("myC2", ["myFactory", function(myFactory){

     $scope.user = myFactory.getUser(1);

}]);

如您所见,两个控制器可以访问相同的数据

【讨论】:

    猜你喜欢
    • 2019-12-26
    • 1970-01-01
    • 1970-01-01
    • 2021-04-09
    • 1970-01-01
    • 2011-09-11
    • 1970-01-01
    • 2011-06-21
    • 2010-09-22
    相关资源
    最近更新 更多