AngularJS에서 CREATE 컨트롤러와 EDIT 컨트롤러를 결합하는 것이 좋은 방법입니까?

AngularJS에서 CREATE 컨트롤러와 EDIT 컨트롤러를 결합하는 것이 좋은 방법입니까?

CREATE와 EDIT 컨트롤러 중 중복되는 코드가 많습니다.이러한 컨트롤러는 반복 코드를 최소화하기 위해 하나로 결합될 수 있습니다.

문제:제출 양식에 어떤 방법을 사용할지 구분해야 합니다. 예를 들어 create() 또는 edit().

해결책:추가할 수 있습니다.$scope.modet$scope.mode='edit'가 'EDIT'을 $scope.mode='add'사용자가 'ADD' 버튼을 클릭한 경우.

반복되는 코드를 최소화하기 위해 서비스를 이용할 수는 있지만, 중복되는 코드는 계속 존재할 것입니다.예를 들어 두 컨트롤러 모두에서 양식을 지우고 숨기는 cancel() 메서드가 있습니다.서비스에 clearForm()과 hideForm()을 저장할 수 있지만 이 코드는 두 컨트롤러에서 중복됩니다.

$scope.cancel = function() {
    Service.clearForm();
    Service.hideForm();
};

질문:

• AngularJS에서 CREATE 컨트롤러와 EDIT 컨트롤러를 결합하는 것이 좋은 방법입니까?
• 반복되는 코드를 최소화할 수 있는 좋은 방법이 있습니까?

네. 컨트롤러 1개를 사용합니다.

컨트롤러 1개를 사용하는 이유는 이렇습니다.

컨트롤러의 역할은 View를 지원하는 것입니다.작성 보기와 편집 보기는 데이터가 미리 입력되어 있는 경우(편집)와 그렇지 않은 경우(작성)와 완전히 동일합니다.또한 이 보기의 "목적"은 사용자가 양식에 새로운 값을 변경하거나 입력하도록 하는 것입니다.차이점은 리셋() 같은 것뿐입니다.하지만 거기에서도 빈 모델 개체로 시작할 수 있습니다.$scope.entity = {} CREATE우,합니다.$scope.entity = $http.get().

컨트롤러 2개의 반복 문제

2개의 서로 다른 컨트롤러와 서비스를 사용할 경우 적어도 다음과 같은 중복이 발생하게 됩니다.

$scope.cancel = function() {
    Service.cancel();
};

$scope.validate = function() {
   ValidtionSvc.validate();
}
.
.
.//other stuff similar

하지만 문제는 왜 당신이 말한 것과 같은 복제품이냐는 것입니다.

(위가 첫 번째 질문에 대한 답변이었으므로 여기서 업데이트됨)

컨트롤러 1개를 반복해서 사용하는 방법?

반복되는 코드를 최소화할 수 있는 좋은 방법이 있습니까?

질문이 재정의됨:CREATE 및 EDIT 양식에서 반복 코드를 제거하는 좋은 방법이 있습니까?

제가 알기로는 이 특정한 상황에서 반복되는 코드를 피할 수 있는 공식적인 '최상의 관행'은 존재하지 않습니다.단, mode=edit/create에 대해서는 반대합니다.컨트롤러가 이 상황에 있는 이유는 사용자가 상호 작용할 때 순수하게 모델을 가져오거나 업데이트하는 것이기 때문에 거의 차이가 없을 것입니다.

다음은 이 상황에서 만나게 되는 차이점과 mode= create/edit을 사용하여 else을(를) 피할 수 있는 방법입니다.

1) 양식을 기존 값으로 채우는 것 대 Create를 위한 빈 양식.

기존 엔티티를 가져오려면 키/쿼리 데이터가 필요합니다.그러한 주요 데이터가 존재한다면 할 수 있습니다.

var masterEntity = {};
if(keyData) {
   masterEntity = MyEntityResourceFactory.getEntity(keyData);
} 
$scope.entity = masterEntity;//for Create this would be {}

2) 재설정 () 양식은 단순해야 합니다.

   $scope.reset = function() {
      $scope.entity = masterEntity;
   }

3) 업데이트/작성

$http.post()//should not be different in today's world since we are treating PUT as POST

4) 검증 - 완벽한 재사용 - 차이가 없어야 합니다.

5) 초기/기본값

{} 대신 마스터 엔티티 = 기본값을 사용할 수 있습니다.

AngularJS에서 CREATE 컨트롤러와 EDIT 컨트롤러를 결합하는 것이 좋은 방법입니까?

제 경험으로는 99.9%가 좋은 생각입니다.일반적으로 $routeProvider resolve 기능을 통해 formType 변수를 컨트롤러에 주입합니다.그래서 나는 다음과 같은 것을 가질 것입니다.

$routeProvider
    .when('/item/create', {
        templateUrl: '/app/item/itemForm.html',
        controller: 'itemFormController',
        resolve: {
            item: ['$route', 'itemRepository', function ($route, itemRepository) {
                return itemRepository.getNew();
            }],
            formType: function () { return Enums.FormType.CREATE; }
        },
    })
    .when('/item/edit/:itemId', {
        templateUrl: '/app/item/itemForm.html',
        controller: 'itemFormController',
        resolve: {
            item: ['$route', 'itemRepository', function ($route, itemRepository) {
                return itemRepository.get($route.current.params.itemId);
            }],
            formType: function () { return Enums.FormType.EDIT; },
        },
    });

이렇게 하면 개체 및 양식 작업 유형이 컨트롤러에 주입됩니다.또한 동일한 템플릿을 공유하므로 양식을 저장하면 저장소/서비스에 의존하여 호출할 REST 엔드포인트를 결정하거나, 어떤 양식을 주입했는지에 따라 컨트롤러 내부에서 간단한 검사를 수행할 수 있습니다.

반복되는 코드를 최소화할 수 있는 좋은 방법이 있습니까?

건조함을 유지하기 위해 사용하고 있는 것들 중 몇 가지:

서버 API에 대한 일반적인 관례를 유지한다면 데이터 액세스를 위해 기본 공장/저장소/클래스(이름은 무엇이든)를 사용할 수 있습니다.예를 들어 다음과 같습니다.

GET  -> /{resource}?listQueryString     // Return resource list
GET  -> /{resource}/{id}                // Return single resource
GET  -> /{resource}/{id}/{resource}view // Return display representation of resource
PUT  -> /{resource}/{id}                // Update existing resource
POST -> /{resource}/                    // Create new resource
etc.

를 하는 AngularJs 합니다라고 .abstractRepository그런 각 그런 다음 각 리소스에 대해 추상Repository에서 프로토타입으로 상속되는 특정 리소스에 대한 구체적인 저장소를 생성합니다. 따라서 추상Repository에서 모든 공유/기본 기능을 상속하고 구체적인 저장소에 리소스별 기능을 정의합니다.이렇게 하면 대부분의 데이터 액세스 코드가 추상 저장소에서 정의될 수 있습니다.Restangular를 사용한 예는 다음과 같습니다.

추상 저장소

app.factory('abstractRepository', [function () {

    function abstractRepository(restangular, route) {
        this.restangular = restangular;
        this.route = route;
    }

    abstractRepository.prototype = {
        getList: function (params) {
            return this.restangular.all(this.route).getList(params);
        },
        get: function (id) {
            return this.restangular.one(this.route, id).get();
        },
        getView: function (id) {
            return this.restangular.one(this.route, id).one(this.route + 'view').get();
        },
        update: function (updatedResource) {
            return updatedResource.put();
        },
        create: function (newResource) {
            return this.restangular.all(this.route).post(newResource);
        }
        // etc.
    };

    abstractRepository.extend = function (repository) {
        repository.prototype = Object.create(abstractRepository.prototype);
        repository.prototype.constructor = repository;
    };

    return abstractRepository;
}]);

구체적인 저장소, 고객을 예로 들어보겠습니다.

app.factory('customerRepository', ['Restangular', 'abstractRepository', function (restangular, abstractRepository) {

    function customerRepository() {
        abstractRepository.call(this, restangular, 'customers');
    }

    abstractRepository.extend(customerRepository);
    return new customerRepository();
}]);

이 기본 저장소 패턴을 사용하면 대부분의 CRUD 컨트롤러도 많은 공통 코드를 공유하므로 일반적으로 컨트롤러가 상속하는 기본 CRUD 컨트롤러를 만듭니다.어떤 사람들은 기본 컨트롤러라는 아이디어를 좋아하지 않지만, 우리의 경우에는 그것이 역할을 해왔습니다.

첫 번째 질문에 대한 답은 아마도 구체적인 상황에 따라 다를 것입니다.

두 컨트롤러가 상당한 양의 연산을 공유하고, 한 두 기능의 동작을 변경해야 한다면, 왜 그렇지 못합니까?가장 우아한 해결책은 아니지만 뭐가 되든 간에

많은 컨트롤러 작업 또는 모든 컨트롤러 작업의 동작이 '$scope'에 따라 달라질지 여부.모드'...조심해야 할 것 같습니다.그것은 위험한 길인 것 같습니다.

각 서비스는 컨트롤러 간 코드 복제를 최소화하는 데 있어 항상 제게 도움이 되었습니다."반복 코드 최소화를 위한 모범 사례"가 있다면, 그것은 서비스라고 할 것입니다.이들은 당신의 앱에 전역적이고 문제없이 여러 컨트롤러에 주입될 수 있습니다.

도움이 되었으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/25046191/is-it-good-practice-to-combine-create-and-edit-controllers-in-angularjs