Search code examples
angularjsweb-servicesmodel-view-controllercrud

Is it a good practise to have a single controller, service and view for all CRUD operations in AngularJS?

I am new to AngularJS and I am exploring best practises to start an application using MVC. The options I found on the internet are

  1. each view should have one controller, the controller is responsible for every action in view and all the methods required should be in a single service

  2. each action should have one view and one controller, but all the methods for all actions in same service.

Which one is the best one?

I also have another question. If we place all the CRUD methods in same service, and if we call the service in a view which needs only get operation, then will it increase load on that particular view?

Solution

  • I am joint lead on a fairly large project.

    There are the practices we follow in the main: https://github.com/johnpapa/angular-styleguide

    Regarding your specific questions:

    each view should have one controller , the controller is responsible for every action in view and all the methods required should be in a single service

    Agreed that this is a good approach. We achieve this using ui-router where you define URL, template HTML page and controller for each route. I would however suggest you shouldn't rigidly follow this approach. For example, where data is shared across all views we use a header include which defines a header controller.

    Also, to say all methods required should be in a single service is ridiculous. If, for example, your view needs to make requests to 2 different endpoints then these are likely to be organised into 2 different services and as such you would inject both.

    IMPORTANT: Controller's code should be minimal. It should attempt to provide the hook between the view and service methods.

    IMPORTANT: USE the controller As syntax - don't use $scope everywhere! That way its easy to see which controller is associated with a particular method

    each action should have one view and one controller. but all the methods for all actions in same service.

    Sounds crazy talk to me!

    Apart from this I have another question. If we place all the crud methods in same service, and if we call the service in a view which needs only get operation, then will it increase load on that particular view?

    If you place all CRUD in same service and you only use GET then obviously you are needlessly injecting methods which are not used. However, that service will be in memory so if you inject it elsewhere where only PUT is used then the cost of doing so will be minimal.

    Code organisation and management demands certain overheads and if you are sensible then there won't be a great problem.

    We tend to organise all CRUD operations for a since endpoint into a single service.

    Example code of header controller in conjunction with ui.router:

    ui.router config would be:

      .state('ou-details', {
    templateUrl: 'routes/ou/details/ou-details.html',
    controller: 'OuDetailsController',
    controllerAs: 'ouDetailsCtrl',
    url: '/ou/details/:id',
    authenticate: true
  })
  .state('ou-edit', {
    templateUrl: 'routes/ou/edit/ou-edit.html',
    controller: 'OuEditController',
    controllerAs: 'ouEditCtrl',
    url: '/ou/edit/:id',
    authenticate: true
  })

    et cetera ...

    the body of index.html would look like:

    <body data-ng-app="admin">
  <header data-ng-include src="'includes/header/header.html'"></header>
  <section data-ui-view="data-ui-view"></section>
  <footer data-ng-include src="'includes/footer/footer.html'"></footer>
</body>

    header.html would look like:

    <div data-ng-controller="HeaderController as headerCtrl">
   <div data-ng-bind="headCtrl.someProperty"/>
</div>

    (apologies if this markup is slightly wrong as it was written in JADE and I've just thrown it into a converter which may have messed up a little)