Help to refactor a controller avoiding code duplication

ionic-v1
#1

Hello everyone. I’m learning Ionic and Angular and I’m creating my first app.
Everything is ok but I want to reduce some code duplication and I’m refactoring the app.

I have basically three type of contents: news, video and gallery.
I’ integrating a bar with some options under every content, and one of this option is to show comment in a modal.

I have in my news controller this code:

angular.module('starter')
  .controller('NewsCtrl', function($scope, content, $cordovaSocialSharing, $sce, $ionicModal){
    $scope.news = content;

content.getList('comments').then(function (comments) {
  $scope.comments = comments;
});

$ionicModal.fromTemplateUrl('templates/comments.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

$scope.showComment = function() {
  $scope.modal.show();
};

// Triggered in the login modal to close it
$scope.closeComment = function() {
  $scope.modal.hide();
};
  });

For Gallery is the same

angular.module('starter')
  .controller('NewsCtrl', function($scope, gallery, $cordovaSocialSharing, $sce, $ionicModal){
    $scope.gallery = gallery;

    gallery.getList('comments').then(function (comments) {
      $scope.comments = comments;
    });

    $ionicModal.fromTemplateUrl('templates/comments.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
    });

    $scope.showComment = function() {
      $scope.modal.show();
    };

    // Triggered in the login modal to close it
    $scope.closeComment = function() {
      $scope.modal.hide();
    };
  });

As the same is for video. How can I avoid this duplication? The template is always the same, the modal is the same. The only thing that change is the call to the api (I’m using Restangular). One time I call gallery.getList, another time video.getList and again content.GetList

Any hint?

#2

I think this is totally fine. This gives you a flexibility to have them a little bit different if you would need to. It’s just a nature of controllers.

What you can do differently is have modal’s content as a directive, so things like showComment and closeCmment would be part of directive rather than controller

#3

For example this is my directive for “Request” modal I have here written in coffee

class Request extends Directive
constructor: ->
    directive =
      restrict: "A"
      link: (scope, element, attr, ctrl) ->
        ctrl.init()

  controller: ($scope, $ionicModal, $ionicPopup,  equestService, userService, $state,   $ionicLoading, $filter, Utils) ->

    @init = ->
      $ionicModal.fromTemplateUrl('templates/popup/request.html', {
        scope: $scope,
        animation: 'slide-in-up'
      }).then((modal) ->
        $scope.modal = modal;
      )  

    $scope.openRequest = ->
      if !userService.isLoggedIn()
        $state.go("App.Tabs.LifestyleLogin")
      else if !userService.isMember()
        $state.go("App.Tabs.LifestyleBecomeMember")
      else
        $scope.modal.show()

    $scope.closeRequest = ($event) ->
      $event.preventDefault()
      $scope.modal.hide()

    $scope.createRequest = (requestDetails) ->
      if !requestDetails
        requestDetails = {
          message: null  
        }
      $ionicLoading.show({
        templateUrl:"templates/loading.html"
      });

      if (requestDetails.checkinTime)
        requestDetails.checkinTime = $filter('date')(requestDetails.checkinTime, 'shortTime')

      requestService.createRequest(requestDetails).then(
        (successData) ->
          $ionicPopup.alert(
            title: "Booking result: "
            template: successData.message
          )
        (errorData) ->
          console.log JSON.stringify errorData
      ).finally ->
        $ionicLoading.hide()
        $scope.modal.hide();

return directive

and then in my html i have

<i ng-click="openRequest()" request class="col button button-icon icon q-icon-inbox"></i>
1 Like