Question

我在AngularJS中有两个CRUD屏幕。

1）单独的html文件用于查看，添加和编辑。视图控制器，添加控制器和编辑控制器也分开。这种结构在html和控制器端创建了更多的重复代码。

2）单独查看，添加的html文件。 View Controller，仅添加控制器单独。在编辑模式期间，我在控制器中使用布尔值来查找它是否处于编辑模式。

我是AngularJS的新手。任何人都清楚地告诉我利弊，哪种方式在AngularJS'Separation Of Concerns'概念中是正确的。

Answer 1

我不确定你是否会朝着好的方向前进。

通过分离关注点，目的是拆分负责管理视图的代码，以及负责调用服务器的代码。想象一下，你想围绕一个人制作CRUD，我会做以下事情：

服务：

angular.module('app').factory("personService", ["$http", function($http)]){
    return {
        create : create,
        update: update,
        remove : remove,
        get: get
    };

    function create(person){
        return http.post("person/create", person);
    }
    // other functions
}

然后，我只有一个控制器：

angular.module("app").controller("PersonController", ["personService", function(personService)]){
    var self = this;

    self.isUpdate = true; // Insert logic here
    self.isCreate = false; // Insert logic here

    init();

    self.save = function(){
        var promise = self.isCreate ? 
                          personService.create(self.person)
                         :personService.update(self.person);

        promise.then(function(result){
            // Handle return of save;
        });

    };

    function init(){
        if (!self.isCreate){
            personService.get(personId).then(function(result){
                self.person = result.data.person;
            });
        }
    }

}

然后我会有以下视图：

<div ng-controller="personController as person">
    <label>Name: </label>
    <input type="text" ng-disabled="!person.isUpdate" ng-model="person.person.name" />

    <button ng-click="person.isUpdate = !person.isUpdate;">Edit</button>
    <!-- Edit : the code 'person.isUpdate = !person.isUpdate;' could also be into a controller's function (like the save function) -->

    <button ng-click="person.save()" ng-if="person.isUpdate">Save</save>
</div>

我还建议你阅读：https://github.com/johnpapa/angular-styleguide

Answer 2

关注点分离意味着您有一个定义良好的应用程序结构：应用程序中的数据模型与业务和表示逻辑分离。它是MVC模式的基础，它定义了视图，控制器和模型这种分离使代码易于维护且易于测试。

按照本指南如何构建Angular应用程序。

模型：

包含域名数据;
实现域数据的管理（查询，编辑，删除，存储机制，REST实现，http获取）;
公开可能在控制器或其他服务中使用模型的API;

模型不应：

提供有关如何管理域数据的详细信息（所有REST实现，http调用应封装在模型中）;
包含基于用户交互（控制器角色）转换模型的逻辑;
包含向用户显示数据的逻辑（这是视图的工作）;

控制器：

包含初始化范围所需的逻辑;
包含视图所需的逻辑/行为以显示范围内的数据;
包含根据用户交互更新范围所需的逻辑/行为;

控制器不应：

包含操纵DOM的逻辑（即视图的作用）;
包含管理数据持久性的逻辑（即模型的工作）;
操作范围之外的数据;

视图：

包含向用户显示数据所需的逻辑和标记

视图不应：

包含复杂的逻辑（最好放在控制器中）;
包含创建，存储或操作域模型的逻辑。

本指南取自this awesome book，我建议任何首发AngularJS开发人员使用。{/ p>

与您的示例相关，我认为您应该：

创建控制器和模板以进行编辑和添加;根据模型的isNew属性，您可以应用编辑或添加操作;
创建用于查看模型的控制器和模板;
或者，如果您有一组模型，则还可以创建新的控制器和视图。

然而，这取决于模型背后的逻辑量。如果模型很简单，那么您可以在单个控制器和视图中实现所有内容。但这很少见。

角度JS概念'分离关注' - ＆gt; CRUD屏幕

2 个答案: