Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

Although this excellent article on building large Apps with AngularJS http://briantford.com/blog/huuuuuge-angular-apps.html states “I have never seen any instance where requireJS was beneficial in practice” I find this hard to believe with a large dynamic web application where certain modules may never get invoked or be required. Why download a bunch of code and delay application start-up if you’re going to download a ton of code the end user will never use?

The comment also appears to contradict some good material in the O’Reilly book on AngularJS by Brad Green ad Shyam Seshadri who spend quite a few pages of their 200 page book on AngularJS covering the use of requireJS with Angular and using requireJS to bootstrap Angular.

Taking the “RequireJS with AngularJS” approach has however caused a few issues around use of Batarang (now working again, although to be honest I’m not sure how/why since we’d originally assumed this was down to not having ng-app in our HTML markup because of the require bootstrap method of loading Angular)

However we still have an outstanding issue we have not been able to solve to do with a dependency chain for AngularUI seemingly being ignored. We have used a RequireJS shim command (below) to state that AngularUI has a dependency on Angular, but we’re geting an error “Uncaught ReferenceError: Angular is undefined” from the AngularUI code – it’s as if the RequireJS dependency is being ignored.

require({
     paths: {
        angularui: "vendor/angular-ui"
     },
     shim: {
        angularui: {
           deps: ["vendor/angular"]
        },
        "vendor/angular": {
           exports: "angular"
     } 
}

This dependency problem aside (any advice on what the problem might be appreciated), but in the meantime I’m interested to hear whether others think mixing and matching AngularJS and RequireJS is something that should be avoided.

share|improve this question
Built several apps on AngularJS + RequireJS - no problems whatsoever, only good things. Can you post your full requireJS bootstrap file. Seems like you're including angular-ui somewhere without using the path specified ("angularui"). – Stewie May 9 at 15:22
Thanks for the response. The developer in my team who had the problem has resolved the issue and we are working fine with requireJS. Since the creator of Angular talks positively about RequireJS in his user group video talk from December 2012 I'm sticking with the "No. Mixing shouldn't be avoided" argument – Ian Smith May 19 at 9:32

3 Answers

up vote 4 down vote

I personally don't recommend to people bothering with requirejs because you can't benefit from any of the dependency management. Due to the (current) nature of AngularJS, you must have all the Angular modules loaded in before bootstrapping. Because of that, you only really gain asynchronously loading, which is roughly the equivalent to doing <script async src="..."> and <body onload="angular.bootstrap(...) (something I've recently decided to change to). However it may be a little more tricky to add cachebusting.

I've had several discussions with people who have tried to develop solutions such as lazy-loading controllers upon route changes. However, simply lazy-loading the controller file doesn't seem like a large benefit to me, and view files are already lazy-loaded for you by AngularJS.

Of course, most people will just consider this inflamatory or blatantly wrong lol.

share|improve this answer
We currently only have one Angular module although we expect to have more as big different functional areas come into play in the future. RequireJS is understood because we wrote the first cuts of the application using Durandal and Knockout, so for us using it with Angular makes sense. Going to stick with it for now since Misko (the original author of Angular) seems to think it's appropriate too. – Ian Smith May 19 at 9:39
up vote 4 down vote accepted

Since the creator of AngularJS talks positively about using requireJS and AngularJS together in his "Best Practices" talk at the Mountain Valley user group in December 2012, and differentiates clearly between Angular modules (for putting together separate chunks of the application) and RequireJS modules (for script downloading) I think mixing the two together is the way to go ... for now. Can't help thinking a future version of Angular (lazy loading additions) will do away with the need for RequireJS but feel that the author who I originally quoted in his Huuuuuge application blog as saying he never saw a case where requireJS was beneficial must have been working in a different application area than us where functional areas of the application are huge and might not be needed in any one given run of the application.

share|improve this answer
RequireJS integration coming. See here http://www.youtube.com/watch?v=W13qDdJDHp8 at the 55 minute mark. – approots Jun 20 at 21:32
Small library I wrote that glues together both technologies: github.com/Nikku/requirejs-angular-define. May be a good fix until native support is there. – nre Jul 26 at 12:38
up vote 0 down vote

I work actually on the same problematic and I use requireJS with AngularJS to load asynchronously my script, it works fine but that's true for now I load all my API on the home page. The only advantage is to have a better paralyses script loading.

I made a small example here : https://github.com/matohawk/angular-seed-requirejs

But now I would like to load on demand the script to load only the necessary script for each part. And I think it's a better approach but there is no tools already. I found some resources about that, I hope angularJS team implement this feature. Maybe these links will be useful :

http://ify.io/lazy-loading-in-angularjs/

https://github.com/angular/angular.js/issues/2053

share|improve this answer

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.