仅在需要时注入模块依赖项（如插件）

Posted 2023-02-23

【中文标题】仅在需要时注入模块依赖项（如插件）

【英文标题】：Inject module dependency (like plugin) only if needed AngularJS

【发布时间】：2016-03-23 14:51:19

【问题描述】：

我有 2 页（我不使用 angular 的 routing - 这个约束）。

在其中一个中，我想使用指令ui-grid，就像在这个演示中一样：

var app = angular.module('myApp', ['ui.grid']);
app.controller('mainCtrl', function($scope) 
  $scope.myData = [
    
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    ,
    
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    ,
    
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    
  ];
);

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">

<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <div id="grid1" ui-grid=" data: myData " class="grid"></div>
  </div>
</div>

我的问题是，是否有办法在任何情况下都不向应用程序注入 ui-grid 依赖项，但仅在我需要时才注入。

类似：

app.controller('mainCtrl', function($scope) 
   app.$inject('ui-grid');
);

更新

我尝试过：

var ui_grid = $injector.get('ui-grid');

但我有一个错误：

未知提供者：ui-gridProvider

http://errors.angularjs.org/1.2.26/$injector/unpr?p0=ui-gridProvider%20%3C-%20ui-grid

【问题讨论】：

***.com/q/13724832 的副本？

@AT 不，不是。我的问题是关于在view 中使用另一个模块和他的指令而不是在controller 中。

我也认为是 ***.com/questions/29617903/… 和 ***.com/questions/27721530/… 的骗子。在 Mosh 的例子中，它是一个指令而不是一个服务

@AntonStrogonoff 不，不是。你看到我对 A T 的评论了吗？一样的。我不需要注入service 或factory。我需要注入一个模块。你能和我分享一个解决问题的方法吗？

@MoshFeu 我不认为注入器确实可以帮助您处理模块，在这里帮不上忙。请注意，在您的第二个代码块示例中，您展示了如何注入 directive，而不是 module。总体而言，您要实现的目标是什么令人困惑。

【参考方案1】：

Core Angular API 不提供此功能。 ocLazyLoad 是 Angular 中用于延迟加载模块和组件的流行库。

您可以在他们的页面上找到更多信息： https://oclazyload.readme.io

或 GitHub 存储库： https://github.com/ocombe/ocLazyLoad

【参考方案2】：

Core Angular API 确实提供了这个功能，只需使用模块@Properties 部分的'requires' 属性@https://code.angularjs.org/1.4.7/docs/api/ng/type/angular.Module

var app = angular.module('myApp');

//Page 1 JS
//change below statement as per requirement in different pages
app.requires = ['ui.grid'];
app.controller('mainCtrl1', function($scope) 



//Page 2 JS
app.requires = ['ngResource', 'ui.bootstrap', 'ui.calendar'];
app.controller('mainCtrl2', function($scope) 

ocLazyLoad 也是一个很好的解决方案，但我猜 'requires' 属性会毫不费力地解决您的问题。

【参考方案3】：

在我的项目中，我使用angular.bootstrap() 动态引导角度模块。我有几个页面包含不同的模块集。

示例：

var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) 
  $scope.greeting = 'Welcome!';
);
angular.bootstrap(document, ['demo']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="WelcomeController">
  greeting
</div>

【参考方案4】：

$injector 用于检索提供者定义的对象实例、实例化类型、调用方法和加载模块。

var $http = $injector.get('$http');

完成您的用例：

app.controller('mainCtrl', function($scope, $injector) 
    $scope.myData = [];
    if($scope.loadGrid) 
        var ui_grid = $injector.get('ui-grid');
        ui_grid.load($scope.myData); //`.load` is just a guess, obviously read your docs
    
);

欲了解更多信息，请参阅：

https://docs.angularjs.org/api/auto/service/$injector https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

【讨论】：

如果我想在控制器中使用$http。我的问题是关于用指令注入另一个module。

是的，$http 只是一个例子。将$http 替换为您喜欢的任何其他模块。

.load 只是一个猜测，显然请阅读您的文档 ui-grid 我认为您不能像这样注入模块并使用它。此外，抛出异常（请参阅我的问题的更新）

谁支持这个答案？无论特定模块如何，它甚至都不起作用。请参阅我的问题的更新。

【参考方案5】：

在用于注入模块的 angularJS 中，您应该像以前那样在模块名称之后注入它。

但您只需几个步骤即可使用它：

使用npm 或bower 这两种方式安装它，如下所示：

npm install angular-ui-grid

bower install angular-ui-grid

然后将<script> 添加到您的 index.html：

<link rel="stylesheet" type="text/css"href="/bower_components/angularui-grid/ui-grid.css" />
<script src="/bower_components/angular-ui-grid/ui-grid.js"></script>

如果您使用npm，则应将源路径更改为/node_modules/。

执行此步骤后，您可以访问每个模块，如下所示：

angular.module('my.module', ['ui.grid']).

【讨论】：

谢谢你的回答，但这不是我问的。我知道如何将模块注入我的应用程序。我的问题是关于 dynamic 注入。请再次阅读问题。

对不起，因为我的理解失误！你可以查看angularjs-requirejs-lazy-controllers。也许有用。