1

I have ng-grid as a dependency when defining the app:

var app = angular.module('myApp', ['ngGrid']);

But not all my views and controllers need ngGrid, so I was thinking if it could be possible to load and inject ngGrid into the app while defining the controllers which need it?

I tried somthing like this, but it didn't work:

app.js:

var app = angular.module('app',[]);

ProductListCtrl.js:

define(['app', 'ng-grid'], function (app) {
    'use strict';

    app.register.controller('ProductListCtrl', ['$scope', 'ngGrid', function ($scope) {
        name = $injector.get('ngGrid')
        $scope.name = name
    }]);

});

Any suggestions?

NicolasZ
  • 119
  • 1
  • 9

1 Answers1

2

angularAMD provides an ngload RequireJS plugin allowing you to load existing AngularJS modules. Add ngload to your main.js then do:

define(['app', 'ngload!ng-grid'], function (app) { ... }

See documentation for more detail.

marcoseu
  • 3,892
  • 2
  • 16
  • 35
  • Thank you for your advice, but I still cannot get it working. I don't have access to the Plunker, so I created a GitHub repo(https://github.com/chocstarfish/scalable-angular-app). Would you please take a minute and check it out for me. Thanks! – NicolasZ Jun 12 '14 at 13:41
  • BTW, the error it throws is like: Uncaught TypeError: Cannot read property 'factory' of undefined ng-grid-2.0.11.debug.js:209 Error: [$injector:unpr] Unknown provider: ngGridProvider <- ngGrid – NicolasZ Jun 12 '14 at 13:59
  • @NicolasZ you need to create something with just one page loading just ng-grid as I can't debug your whole app. The error I see is "Unknown provider: simpleClockModuleProvider <- simpleClockModule". – marcoseu Jun 12 '14 at 14:25
  • At first I thought it was the problem of ngGrid directive because it contains serveral angular modules itself. So I added it another angular directive in the Home page, you can simply click the 'Product List' link or navigate to 'http://localhost:9000/#/functions/products' to see what happens with ngGrid, sorry for your inconvenience and thanks again for your patience! – NicolasZ Jun 12 '14 at 14:47
  • There might be a problem with angularAMD but I need you update the repo loading ngGrid in app.js and a working "Product List". I did it in the project but result is mingled. I can't test until I know what the result should be. – marcoseu Jun 12 '14 at 16:44
  • I have created a new branch: https://github.com/chocstarfish/scalable-angular-app/tree/without_ngload, all the directives are working when I load them in the first place before app boots up. – NicolasZ Jun 13 '14 at 08:49
  • 1
    There is a bug in the angularAMD which it is now fixed in the master branch. I included the latest version in your project and pushed the working version to the branch you gave me. You also needed to add jquery dependency to ng-grid. – marcoseu Jun 13 '14 at 16:47
  • Thank you! It finally works, I wish I could use bower to update the hotfix soon. – NicolasZ Jun 14 '14 at 07:05