Inject module dynamically, only if required

by

I have been trying to mix requirejs+Angular for some time now. I published a little project in Github (angular-require-lazy) with my effort so far, since the scope is too large for inline code or fiddles. The project demonstrates the following points:

  • AngularJS modules are lazy loaded.
  • Directives can be lazy loaded too.
  • There is a “module” discovery and metadata mechanism (see my other pet project: require-lazy)
  • The application is split into bundles automatically (i.e. building with r.js works)

How is it done:

  • The providers (e.g. $controllerProvider, $compileProvider) are captured from a config function (technique I first saw in angularjs-requirejs-lazy-controllers).
  • After bootstraping, angular is replaced by our own wrapper that can handle lazy loaded modules.
  • The injector is captured and provided as a promise.
  • AMD modules can be converted to Angular modules.

This implementation satisfies your needs: it can lazy-load Angular modules (at least the ng-grid I am using), is definitely hackish 🙂 and does not modify external libraries.

Comments/opinions are more than welcome.

(EDIT) The differentiation of this solution from others is that it does not do dynamic require() calls, thus can be built with r.js (and my require-lazy project). Other than that the ideas are more or less convergent across the various solutions.

Good luck to all!

More Related Contents:

  1. angular-ui-router with requirejs, lazy loading of controller
  2. Lazy loading AngularJS modules with RequireJS
  3. How do I use $scope.$watch and $scope.$apply in AngularJS?
  4. Angular ng-repeat Error “Duplicates in a repeater are not allowed.”
  5. Confused about Service vs Factory
  6. AngularJS : How to watch service variables?
  7. how to use ng-option to set default value of select element
  8. Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document
  9. How to disable animations in protractor for angular js application
  10. Submit form on pressing Enter with AngularJS
  11. Use of ng-src vs src
  12. AngularJS Paging with $location.path but no ngView reload
  13. Can I make a function available in every controller in angular?
  14. Descending order by date filter in AngularJs
  15. angular.js link behaviour – disable deep linking for specific URLs
  16. How to send POST in angularjs with multiple params?
  17. Can I inject a service into a directive in AngularJS?
  18. Otherwise on StateProvider
  19. Handle HTTP 302 response from proxy in angularjs
  20. How can I pass some data from one controller to another peer controller [duplicate]
  21. How can I check which version of Angular I’m using?
  22. Angular – ui-router get previous state
  23. Binding variables from Service/Factory to Controllers
  24. Angularjs how to cancel resource promise when switching routes
  25. How do I sequentially chain promises with angularjs $q?
  26. Mongo Giving ‘duplicate key error’ on non-unique fields
  27. Using ng-repeat to generate select options (with Demo)
  28. How to highlight a current menu item?
  29. AngularJS All slashes in URL changed to %2F
  30. Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443

Leave a Comment