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

Reduce dependencies in angular js controllers

本文关键字：依赖 关系 控制器 angular js 减少      更新时间：2023-09-26

如何减少像这样的角度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))

并且我对多个控制器使用相同的依赖关系集。

我们可以将所有依赖项存储在一个变量中吗？将其用于所有控制器。

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

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

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

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

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

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

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

.factory('dependencies', function($injector){
   var dependencies;
   dependencies.fooDependency = $injector.get('fooDependency');
   dependencies.barDependency = $injector.get('barDependency');
   return dependencies;
})

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

相关文章：