AngularJS + RequireJS + angular-ui-grid

Question

I am trying to use angular-ui-grid with AngularJS and RequireJS. See plunker here.

My index31.html has grid and indexController.js defines the gridOptions object. indexController is injected when needed.

When browser loads indexController.js before index31.html, it works fine (i.e. grid is displayed) but when it is the other way round, I get error: $scope.uiGrid is undefined.

How do I specify (in $stateProvider config or elsewhere) to always load indexController.js before index31.html. Or, how do I make all controllers load before the html?

@Cyberdelphos thanks, i've updated it. adding here too .. plnkr.co/edit/5P2GAxIdPNbC5EvcKn4h — curious-guru
– curious-guru, Commented Oct 20, 2015 at 23:42

Nikos Paraskevopoulos · Accepted Answer · 2015-10-21 07:52:03Z

0

The reason for this is that you require the actual code of the controller asynchronously, i.e. with an inline require:

// app.js
define(function () {
    ...
    app.controller('IndexController', ['$scope', '$injector', function ($scope, $injector) {
        // HERE!!!
        require(['indexController'], function (controller) {
            $injector.invoke(controller, this, { '$scope': $scope });
        });
    }]);
});

There is no guarantee for the order of loading with this pattern.

What can you do: Require the 'indexController' at the top:

define(['indexController'], function (indexController) {
    ...
    app.controller('IndexController', indexController);
});

It even removes the (horrible IMO) usage of $injector!

(Sidenote: Doing this, the plunk complained about the $scope.$apply() in the last line of indexController.js; I commented it out, it really seems redundant.)

Plunk: http://plnkr.co/edit/fsyljR8FEeZdvXB3SRJP?p=preview

answered Oct 21, 2015 at 7:52

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

4 Comments

curious-guru Over a year ago

Thanks @Nikos. By doing this, I would need to load all my controllers before defining the angular application module. I'm trying to load controllers only when they are required, to avoid loading those controllers that may never be required by user (say, due to his level of authorization or some pages that he may never open)(I have a mid to large sized application, so limiting what gets downloaded also made sense). This is why I went with the approach of asynchronously loading controllers. Is there a different, better approach to what I am trying to achieve?

Nikos Paraskevopoulos Over a year ago

See angular-require-lazy for lazy loading - it is my take on the problem there are also others.

Nikos Paraskevopoulos Over a year ago

If however you want to lazy-load controllers this way: (1) The indexController is outside the ui-view - it should probably be eager loaded anyway. (2) For view controllers, you can still lazy load them utilizing the resolve attribute of the state. So, in the resolve, you return a promise which gets resolved when require has fetched the controller.

curious-guru Over a year ago

Thanks! let me try these options too.

Collectives™ on Stack Overflow

AngularJS + RequireJS + angular-ui-grid

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related