Angularjs CRUD views, controllers, navigation

Question

I just started to learn AngularJS. I created a simple site using ASP.NET MVC as a backend.

I created 1 main view and 4 partial views for the CRUD operations with a Company Entity.

In the main page I have this element: <div ng-view></div> I load here the required partial view.

I created 2 angular controllers, one for the list of Companies and another one for the update, delete and create operations. I did this based on this answer.

In my list view I can navigate to the other views. My list view is this (only a part of it):

<tbody ng-repeat="Company in Companies">
    <tr>
        <td><span>{{Company.Id}}</span></td>
        ...
        <td><span>{{Company.HREmail}}</span></td>
        <td>
            <button type="button" ng-click="ChangeView(CRUDOperationEnum.Update, Company)">Go to edit</button>
        </td>
    </tr>
</tbody>

The CRUDOperationEnum is an object that I have attached to the $scope of the controller so that I can use to way above.

The object is the following:

var CRUDOperationEnum = {
    Create: 0,
    Read: 1,
    Update: 2,
    Delete: 3
};

My ChangeView function is the folowing:

$scope.ChangeView = function (CRUDOperationValue, selectedCompany) {

    if (CRUDOperationValue != CRUDOperationEnum.Create) {
        CompanyShareFactory.SelectedCompany = selectedCompany;
    }
    else {
        CompanyShareFactory.SelectedCompany = { Id: 0, Name: '', HRName: '', HREmail: '' };
    }

    switch(CRUDOperationValue) {
        case CRUDOperationEnum.Create:
            nextViewPath = '/CreateCompany'
            break;
        case CRUDOperationEnum.Delete:
            nextViewPath = '/DeleteCompany'
            break;
        case CRUDOperationEnum.Read:
            nextViewPath = '/Companies'
            break;
        case CRUDOperationEnum.Update:
            nextViewPath = '/EditCompany'
            break;
        default:
            throw "Error: Invalid CRUD operation";
    }

    CompanyShareFactory.CRUDOperationValue = CRUDOperationValue;
    $location.path(nextViewPath);
};

This way the controller decides where to navigate based on what is the required action.

The CompanyShareFactory is injected to the controller and used to store the selected entity so that the client does not have to create another request to get the selected entity by id after changing views. The other controller (that is for delete, update, create) reads it from the factory. This controller also decides what is the current operation based on the CompanyShareFactory.CRUDOperationValue.

Is this a good way to follow using Angular? Please tell me if my approach is wrong, since I just try to find out a good way to perform crud with Angular.

Answer 1

Ideally your code should be easily understandable where you read it.

The buttons says "Go to edit", then is better readable as ng-click="edit(Company). Also the Company is not a class, so general convention is not to capitalize it. But what is CRUDOperationEnum.Update? I don't see where it comes from, so I'd rather avoid it there. If it is already on your scope - it is already accessible inside your controller - no need to pass it again.

Also it looks strange that the same Button leads to different things - that may be confusing to the User.

I would not put different routes inside the same function. Either put clickable links to different routes directly inside your HTML, or use dedicated functions to update the location.