angular.js中的动态服务注入

Dynamic service injection in angular.js

本文关键字：服务 注入 动态 js angular      更新时间：2023-09-26

我使用Angular.js Services在控制器之间共享一些数据，如下所示：

var mainApp = angular.module("mainApp", []);
mainApp.service('CalcService', function(){
        this.square = function(a) { 
            //do something
         }
});
mainApp.controller('CalcController', function($scope, CalcService) {
      $scope.square = function() {
          $scope.result = CalcService.square($scope.number);
      }
});

它是有效的，但正如您所看到的，在控制器中，我必须注入CalcService并在控制器中使用它。我的问题是，我有很多服务，在应用程序的某些页面中，我需要注入服务依赖项，而在某些页面中我不需要！如果我在那里写，在我不需要的页面上，我会出错，因为我的控制器在另一个文件中，我没有加载它。我该如何克服这一点？

我希望在某些情况下我可以设定注射。我需要一个If Else语句。这可能吗？

我的应用程序结构是这样的：我有一个主应用程序和一些可以连接到页面的小部件，但每个页面都有不同的小部件。然后我也需要在我的主模块中注入适当的小部件服务。我有一个主模块和一个主控制器，以及其他控制器中的许多服务。每个页面都有自己的小部件和控制器。在主控制器中，我必须查看加载了哪些小部件，然后注入其服务

只有在需要服务时才能注入。

这是控制器，您可以在其中注入服务

mainApp.controller('CalcController',['$scope','CalcService',function($scope, CalcService) {
      $scope.square = function() {
          $scope.result = CalcService.square($scope.number);
      }
}]);

这里是控制器，你没有注入的服务

mainApp.controller('Calc2Controller',['$scope',function($scope) {
          $scope.square = function(n) {
              $scope.result = n * n;
          }
    }]);

编辑1

看起来您的服务和控制器在同一个文件中。这是出了问题。

您可以看到服务全局共享数据或封装可重用的逻辑。而控制器则专注于特定的模板。

我建议您使用此结构来分离您的服务和控制器。

App--
   -components
   -features
          - login
                -loginController.js
                -login.html
   -services
          - userService.js
          - loginService.js
   -libs
          - bootstrap.js
          - lodash.js

由于您的服务现在是独立的，您可以与任何控制器共享它们。您可以选择在哪里使用一项服务，在哪里不使用。

相关文章：