Avoid repetition in Angular controller

Question

Avoid repetition in Angular controller

I'm an angular newbie and I'm writing an Ionic app. I finished my app and am trying to refactor my controller avoiding code repetition.

I have this piece of code that manages my modal:

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

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

    $scope.addComment = function() {

    };

    $scope.shareAnywhere = function() {
        $cordovaSocialSharing.share("Guarda questo articolo pubblicato da DDay", "Ti stanno segnalando questo articolo", content.thumbnail, "http://blog.nraboy.com");
    };

    $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();
    };

    $scope.$on('modal.shown', function() {
      var footerBar; 
      var scroller;
      var txtInput;

      $timeout(function() {
        footerBar = document.body.querySelector('#commentView .bar-footer');
        scroller = document.body.querySelector('#commentView .scroll-content');
        txtInput = angular.element(footerBar.querySelector('textarea'));
      }, 0);

      $scope.$on('taResize', function(e, ta) {        
        if (!ta) return;   
        var taHeight = ta[0].offsetHeight;        
        if (!footerBar) return;
        var newFooterHeight = taHeight + 10;
        newFooterHeight = (newFooterHeight > 44) ? newFooterHeight : 44;

        footerBar.style.height = newFooterHeight + 'px';
        scroller.style.bottom = newFooterHeight + 'px'; 
      });

    });

  });

I have added this same code in 6 controllers. Is there a way to avoid the repetition?

angularjs
ionic-framework

Answer 1

Probably what you are looking for is an angular service. This component is a singleton object, that you inject in every controller you need to execute this code.

Angular Services

Regards,

Answer 2

Below is an example of a service I created to retrieve address data from a Json file. Here is the working Plunk. http://plnkr.co/edit/RRPv2p4ryQgDEcFqRHHz?p=preview

  angular.module('myApp')
    .factory('addressService', addressService);

  addressService.$inject = ['$q', '$timeout', '$http'];

  function addressService($q, $timeout, $http) {
    var addresses = [];

    //console.log("Number of table entries is: " + orders.length);

    var promise = $http.get('address.data.json');
    promise.then(function(response) {
      addresses = response.data;
      //  console.log("Number of table entries is now: " + orders.length);
    });

    return {
      GetAddresses: getAddresses
    };

    function getAddresses() {

      return $q(function(resolve, reject) {
        $timeout(function() {
          resolve(addresses);
        }, 2000);

      });

    }
  }

Here's an example of how I added dependencies for it and another service to my controller (This is NOT the only way to do dependency injection, but is my favorite way as it is easier to read). I then called my addressService.GetAddresses() from within my controller.

var app = angular.module('myApp', ['smart-table']);

app.controller('TableController', TableController);

TableController.$inject = [ "orderService",  "addressService"];

function TableController( orderService, addressService) {

 addressService.GetAddresses()
  .then(function(results) {
      me.addresses = results;
     // console.log(me.addresses.length + " addresses");
    },
    function(error) {})
  .finally(function() {
    me.loadingAddresses = false;
});
  });}

I also had to include my .js tag in a script element on my index.html.

<script src="addressdata.service.js"></script>