减少对角js控制器的依赖

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

如何减少角js控制器的依赖性

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))

controller(‘sampleController’，函数($scope， $timeout， $localStorage， $http， $location) .controller(‘sample1Controller’，函数($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.

我们是否可以将所有的依赖项存储在一个变量中?

3 个解决方案

#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

从控制器中抽象代码越多，注入就越少

#2

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.

您可以在角度中创建自定义服务，它返回依赖项，您可以将该服务注入控制器并访问它们。但是您将不能在服务中包含$scope，因为scope仅对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="angularjs@1.5.0" 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/

要从控制器中消除$scope，请使用mvvm方法。http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

#3

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.

如果您不想看到静态地注入到控制器的所有依赖项，并且需要在一个单独的地方执行，那么可以使用$injector创建一个对象，该对象将引用所有的依赖项。

.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.

将这个工厂注入您的控制器并使用它来访问您的依赖项。

#1