current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 5 down vote favorite

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

share|improve this question

This question has an open bounty worth +50 reputation from Mosh Feu ending in 5 hours.

This question has not received enough attention.
    
Duplicate of stackoverflow.com/q/13724832 ? – A T Dec 17 at 8:22
    
@AT no it's not. My question is about using another module and his directives in the view not in the controller. – Mosh Feu Dec 17 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 Dec 17 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 Dec 17 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 Dec 17 at 8:53
up vote 3 down vote

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

share|improve this answer
    
Seems Interesting! Thanks. I will check this.. – Mosh Feu Dec 23 at 17:14
up vote 1 down vote

In my project I dynamically bootstrap angular modules like here. I have several pages with different sets of modules.

share|improve this answer
up vote 0 down vote

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:

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

    npm install angular-ui-grid

    bower install angular-ui-grid

  2. Then add a 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']).

share|improve this answer
    
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. – Mosh Feu Dec 24 at 19:59
1  
sorry because of my miss understanding! you can check angularjs-requirejs-lazy-controllers. maybe be useful. – marjan Dec 24 at 20:13
    
Looks nice! I will learn about it. Thanks.. – Mosh Feu 18 hours ago
up vote -1 down vote

$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:

share|improve this answer
    
That if I want to use the $http in the controller. My question is about inject another module with directives. – Mosh Feu Dec 17 at 8:13
    
Yes, $http is just an example. Replace $http with whatever other module you like. – A T Dec 17 at 8:14
    
.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 Dec 17 at 8:28
    
Who updavote this answer? It's not even works regardless of the specific module. See the update of my question. – Mosh Feu Dec 17 at 8:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.