只有在需要AngularJS时才注入模块依赖项(如插件）

Inject module dependency (like plugin) only if needed AngularJS

本文关键字：依赖 模块 插件 注入 AngularJS      更新时间：2023-09-26

我有两个页面（我不使用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<-ui网格

http://errors.angularjs.org/1.2.26/$injector/unp？p0=ui网格提供者%20%3C-%20ui网格

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

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

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

Core Angular API确实提供了此功能，只需使用模块的"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"属性将毫不费力地解决您的问题。

在我的项目中，我使用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>

$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

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

但你有几个步骤可以使用它：

  1. 用这种双向npm或bower安装它，如下所示：

    npm install angular-ui-grid

    bower install angular-ui-grid

  2. 然后在index.html:中添加一个<script>

    <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'])。

相关文章：