Is it good practice to combine CREATE and EDIT controllers in AngularJS?

Question

There are many duplicated code among CREATE and EDIT controllers. These controllers could be combined into one for minimizing repetitive code.

The problem: I need to distinguish which method to use on form submitting - create() or edit() for example.

The solution: I could add $scope.mode for example and set $scope.mode='edit' if user clicked 'EDIT' button or set $scope.mode='add' if user clicked 'ADD' button.

I could use services for minimizing repetitive code, but there still will be duplicated code. For example in both controllers I have cancel() method which clears the form and hide it. I could store clearForm() and hideForm() in the service, but this code will be duplicated in both controllers:

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

Questions:

• Is it good practice to combine CREATE and EDIT controllers in AngularJS?
• Is there any good practices to minimize repetitive code?

Answer 1

Yes. Use 1 controller.

Here is the reason why use 1 controller

The job of the controller is to support the View. Your create view and the edit view is exactly same - just that one has data pre-populated (edit) and another does not (create). Moreover the "purpose" of this View is to have the user change or enter new values in the form. Your only difference should be something like reset(). But even there you could start with an empty model object e.g. $scope.entity = {} in case of CREATE and you will start with $scope.entity = $http.get().

Repetition Problem with 2 Controllers

With 2 different controllers and services you are going to incur at least the following duplication:

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

but the problem is why even this duplication like you stated.

(UDATED here onwards since above was the answer to the 1st question)

How to use 1 controller with repetition ?

Is there any good practices to minimize repetitive code?

Question redefined: Is there a good practice of eliminating repetitive code in CREATE and EDIT forms ?

No formal 'best practice' exist to my knowledge to avoid repetitive code in this specific situation. However I am advising against mode=edit/create. The reason being for controllers in this situation there should be almost no difference since their job is to purely to fetch/update the model as the user interacts.

Here are the difference you will encounter in this situation and how you can avoid if/then/else with mode=create/edit:

1) Populating the form with existing values vs. empty form for Create.

To fetch a existing entities you need some key/query data. If such key data is present you could do

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

2) reset() form should be simply

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

3) Update/Create

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

4) Validation - this is a perfect reuse - there should be no differences.

5) Initial / Default Values

You can use masterEntity = Defaults instead of {}.