我在AngularJS中有两个CRUD屏幕。

1)用于查看,添加和编辑的单独的html文件。 View Controller,Add Controller和Edit Controllers也分开。这种结构在html和控制器端创建了更多重复的代码。

2)为视图,添加单独的html文件。查看控制器,仅添加控制器单独。在编辑模式下,我在控制器中使用布尔值来查找或不在编辑模式下。

我是AngularJS的新手。任何人都清楚地告诉我我的利弊,哪种方法在AngularJS“关注分离”概念中是正确的。

最佳答案

我不确定您的方向是否正确。

通过分离关注点,目的是拆分负责管理视图的代码和负责对服务器进行调用的代码。假设您想对一个人进行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
}


然后,我将只有1个控制器来执行所有操作:

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

07-28 06:17
查看更多