Inject module dependency (like plugin) only if needed AngularJS

Question

I have 2 pages (I don't use the angular's routing - This constraint).

In one of them I want to use the directive ui-grid like in this demo:

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>

My question is if there is a way to not inject the ui-grid dependency to the app in any case but only when I need it.

Something like:

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

Update

I tried to do:

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

But I've got an error:

Unknown provider: ui-gridProvider <- ui-grid

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

@AT no it's not. My question is about using another module and his directives in the view not in the controller. — Mosh Feu
– Mosh Feu, Commented Dec 17, 2015 at 8:26
I assume also a dupe of stackoverflow.com/questions/29617903/… & stackoverflow.com/questions/27721530/…. In Mosh’s case it’s a directive not a service — Anton Strogonoff
– Anton Strogonoff, Commented Dec 17, 2015 at 8:36
@AntonStrogonoff No, it's not. Did you see my comment to A T? It's the same. I don't need to inject a service or factory. I need to inject a module. Can you share with me a working fiddle with solution like in your attached question? — Mosh Feu
– Mosh Feu, Commented Dec 17, 2015 at 8:39
@MoshFeu I don’t think injector would help you with modules indeed, can’t help here. Note that in your second code block example you’re showing how you want to inject a directive, not a module. It’s in general confusing as to what is the goal that you’re trying to achieve. — Anton Strogonoff
– Anton Strogonoff, Commented Dec 17, 2015 at 8:53

S.Klechkovski · Accepted Answer · 2015-12-22 14:05:33Z

5

+50

Core Angular API does not provide this feature. ocLazyLoad is the popular library for lazy loading of modules and components in Angular.

You can find more info on their page: https://oclazyload.readme.io

or the GitHub repository: https://github.com/ocombe/ocLazyLoad

answered Dec 22, 2015 at 14:05

S.Klechkovski

4,04519 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FixBug Tester · Accepted Answer · 2016-07-21 10:34:45Z

3

Core Angular API does provide this feature, simply use 'requires' property of module @ Properties section @ 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 is also good solution, but I guess 'requires' property will solve your problem without much effort.

answered Jul 21, 2016 at 10:34

FixBug Tester

311 bronze badge

Comments

Mosh Feu · Accepted Answer · 2016-01-20 10:02:49Z

1

In my project I dynamically bootstrap angular modules using angular.bootstrap(). I have several pages with different sets of modules.

Example:

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>

edited Jan 20, 2016 at 10:02

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

answered Dec 28, 2015 at 13:22

Mikalai

1,5258 silver badges21 bronze badges

Comments

A T · Accepted Answer · 2015-12-17 08:22:20Z

0

$injector is used to retrieve object instances as defined by provider, instantiate types, invoke methods, and load modules.

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

To complete your use-case:

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
    }
});

For more information see:

edited Dec 17, 2015 at 8:22

answered Dec 17, 2015 at 8:06

A T

14k23 gold badges107 silver badges171 bronze badges

4 Comments

Mosh Feu Over a year ago

That if I want to use the $http in the controller. My question is about inject another module with directives.

A T Over a year ago

Yes, $http is just an example. Replace $http with whatever other module you like.

Mosh Feu Over a year ago

.load is just a guess, obviously read your docs ui-grid I don't think that you can inject module and use it like this. Also, an exception is thrown (see the update of my question)

Mosh Feu Over a year ago

Who updavote this answer? It's not even works regardless of the specific module. See the update of my question.

Mr Lister · Accepted Answer · 2015-12-29 22:16:31Z

0

In a angularJS for injecting module you should inject it after your module name as you did.

But you have few steps to can use it:

Install it with this 2 way npm or bower like below:

npm install angular-ui-grid

bower install angular-ui-grid

Then add a <script> to your 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>

If you use npm, you should change the source path to/node_modules/.

After this steps each module you can have access to you module like below:

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

edited Dec 29, 2015 at 22:16

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Dec 24, 2015 at 16:21

user5257164

2 Comments

Mosh Feu Over a year ago

Thank you for your answer but it's not what I asked. I know how to inject module to my app. My question is about dynamic injection. Please read the question again.

user5257164 Over a year ago

sorry because of my miss understanding! you can check angularjs-requirejs-lazy-controllers. maybe be useful.

Collectives™ on Stack Overflow

Inject module dependency (like plugin) only if needed AngularJS

5 Answers 5

Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related