Reduce dependencies in angular js controllers

Question

How to reduce the dependencies that we give in angular js controllers like

app.controller('sampleController', function($scope, $timeout, $localStorage, $http, $location)) .controller('sample1Controller', function($scope, $timeout, $localStorage, $http, $location)) .controller('sample2Controller', function($scope, $timeout, $localStorage, $http, $location)) .controller('sample3Controller', function($scope, $timeout, $localStorage, $http, $location))

and I'm using the same set of dependencies for multiple controllers.

Can we store all the dependencies in a variable use that to all the controllers.

z.a. · Accepted Answer · 2016-03-23 08:30:50Z

1

try to create services for the functionality in the controllers. then your code will be like this, for example,

    app.controller('sampleController', function($scope, serviceA, $location))

app.service('serviceA', function($timeout, $localStorage, $http) {
// do something here
});

the more you abstract code out of your controllers, less your injections will be

answered Mar 23, 2016 at 8:30

z.a.

2,7973 gold badges15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ruwantha R. · Accepted Answer · 2016-03-23 08:47:26Z

You can create custom service in angular which returns the dependencies and you can inject that service in your controller and access them. but you will not be able to include $scope in the service as scope is available only for controller.

// angular module implementation
(function(){
  'use strict';
  
  angular
    .module('app',[]);
    
})();

// angular controller
(function(){
  'use strict';
  
  var controllerId = 'myCtrl';
  
  angular
    .module('app')
    .controller(controllerId,['common',function(common){
        var vm = this;
        
        init();
        
        function init(){
          vm.count = 0;
          
          common.interval(function(){
            vm.count++;
            
          }, 1000);
        }
      
    }]);
    
})();

// service that returns the depandancies
(function(){
  'use strict';
  
  var serviceId = 'common';
  
  angular
    .module('app')
    .factory(serviceId, ['$timeout','$interval', function($timeout,$interval){
      
        return {
          timeout: $timeout,
          interval: $interval
        };
      
    }]);
    
})();

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller='myCtrl as vm'>
    <h1>My Count is: {{vm.count}}!</h1>
    
  </body>

</html>

To eliminate $scope from your controller go ahead mvvm approach. http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

Charlie · Accepted Answer · 2016-03-23 08:50:06Z

0

If you don't want to see all the dependencies statically injected to your controllers and need to do it in a single place, you can use $injector to create an object which will give reference to all your dependencies.

.factory('dependencies', function($injector){

   var dependencies;
   dependencies.fooDependency = $injector.get('fooDependency');
   dependencies.barDependency = $injector.get('barDependency');

   return dependencies;
})

Inject this factory to your controller and use it to access your dependencies.

answered Mar 23, 2016 at 8:50

Charlie

24k12 gold badges65 silver badges96 bronze badges

Collectives™ on Stack Overflow

Reduce dependencies in angular js controllers

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related