Question

如何减少我们在角度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))

我正在为多个控制器使用相同的依赖集。

我们是否可以将所有依赖项存储在变量中，并将其用于所有控制器。

Answer 1

尝试为控制器中的功能创建服务。那么你的代码将是这样的，例如，

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

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

从控制器中抽取代码的次数越多，注入次数就越少

Answer 2

您可以在angular中创建自定义服务，返回依赖项，您可以在控制器中注入该服务并访问它们。但是您无法在服务中包含$ scope，因为范围仅适用于控制器。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

如果您不希望看到静态注入控制器的所有依赖项并且需要在一个位置执行它，则可以使用$ injector来创建一个对象，该对象将引用所有依赖项。

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

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

   return dependencies;
})

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

减少角度js控制器中的依赖关系

3 个答案: