Does it make sense to use Require.js with Angular.js?

Yes it makes sense to use angular.js along with require.js wherein you can use require.js for modularizing components.

I can point you to a seed project which uses both angular.js and require.js. Hope that helps!

Yes, it makes sense.

Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfil their goals.

Source: Angular JS official website

To restate what I think the OP's question really is:

If I'm building an application principally in Angular, and (implicitly) doing so in the era of Grunt/Gulp/Broccoli, and I maybe have a couple additional library dependencies, does Require add clear, specific value beyond what I get by using Angular without Require?

Or, put another way:

"Does vanilla Angular need Require to manage its components effectively?"*

And I believe the basic answer to that is: "not unless you've got something else going on."

If you have a huge application with 40 outside dependencies, or you can't control your CI environment, or your boss adores Require, or you adore Require, or Angular is only one piece of a larger application, etc., etc., then YMMV. If you are wayyy into componentization, and want to load components into an Angular app as fully stand-alone items with own dependencies, then OK. (Although I think that's usually a better idea in principle than in practice.)

But otherwise, Angular controllers, directives and services are lazy-loaded by Angular's built-in module system, instantiated only when needed, and segregated from both global scope and internally to Angular. Using AMD on top of that is overhead without value, at least for the basic loading of Angular components.

Further, there's this, from Brian Ford, author of the Angular Batarang and a member of the Angular core team:

I don't recommend using RequireJS with AngularJS. Although it's certainly possible, I haven't seen any instance where RequireJS was beneficial in practice.

Note that lazy-loading and lazy-downloading are different. Angular's lazy-loading doesn't mean you're pulling them direct from the server. In a Yeoman-style application with javascript automation, you're concatenating and minifying the whole shebang together into a single file. They're present, but not executed until needed. The speed and bandwidth improvements you get from doing this vastly, vastly outweigh any alleged improvements from lazy-downloading a 20-line controller. In fact, the wasted network latency and transmission overhead for that controller is going to be an order of magnitude greater than the size of the controller itself.

Some people logically say: "OK. That's fine for distribution. But what about during development on my local dev boxen? How can I get all my dozens/hundreds of script files loaded without needing to attach them all to index.html manually? That's my real reason for using Require."

Have a look at the sub-generators in Yeoman's generator-angular, or at the automation patterns embodied in generator-gulp-angular. These provide you a clean, scalable way to either: automatically attach the files at the time that components are scaffolded, or to simply grab them all automatically if they are present in certain folders/match certain glob-patterns. You never again need to think about your own script-loading once you've got the latter option, let alone tinker with finicky AMD specifications.

Bottom-line: go with the grain whenever possible, and let Angular and your automation tools worry about script-loading and the lazy-instantiation of Angular components. If you want to mess around with Require for the non-Angular dependencies, go ahead. If you're developing Angular apps but can't use Javascript automation tools for some reason, OK. If your application's JS weighs 10MB, and you want to shave off the last 5MB for most users by lazy-loading the admin module, then great! But otherwise, when starting from scratch with a basic application: ask yourself if you're doing it out of pure habit ('cargo-culting', perhaps), or because you can actually prove the value to that specific project.

This I believe is a subjective question, so I will provide my subjective opinion.

Angular has a modularization mechanism built in. When you create your app, the first thing you would do is

var app = angular.module("myApp");

and then

app.directive(...);

app.controller(...);

app.service(...);

If you have a look at the angular-seed which is neat starter app for angular, they have separated out the directives, services, controllers etc into different modules and then loaded those modules as dependancies on your main app.

Something like :

var app = angular.module("myApp",["Directives","Controllers","Services"];

Angular also lazy loads these modules ( into memory) not their script files.

In terms of lazy loading script files, to be frank unless you are writing something extremely large it would be an overkill because angular by its very nature reduces the amount of code you write. A typical app written in most other frameworks could expect a reduction in around 30-50% in LOC if written in angular.

As @ganaraj mentioned AngularJS has dependency injection at its core. When building toy seed applications with and without RequireJS, I personally found RequireJS was probably overkill for most use cases.

That doesn't mean RequireJS is not useful for it's script loading capabilities and keeping your codebase clean during development. Combining the r.js optimizer (https://github.com/jrburke/r.js) with almond (https://github.com/jrburke/almond) can create a very slim script loading story. However since its dependency management features are not as important with angular at the core of your application, you can also evaluate other client side (HeadJS, LABjs, ...) or even server side (MVC4 Bundler, ...) script loading solutions for your particular application.

Using RequireJS with AngularJS makes sense but only if you understand how each of them works regarding dependency injection, as although both of them injects dependencies, they inject very different things.

AngularJS has its own dependency system that let you inject AngularJS modules to a newly created module in order to reuse implementations. Let's say you created a "first" module that implements an AngularJS filter "greet":

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

And now let's say you want to use the "greet" filter in another module called "second" that implements a "goodbye" filter. You may do that injecting the "first" module to the "second" module:

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

The thing is that in order to make this work correctly without RequireJS, you have to make sure that the "first" AngularJS module is loaded on the page before you create the "second" AngularJS module. Quoting documentation:

Depending on a module implies that required module needs to be loaded before the requiring module is loaded.

In that sense, here is where RequireJS can help you as RequireJS provides a clean way to inject scripts to the page helping you organize script dependencies between each other.

Going back to the "first" and "second" AngularJS modules, here is how you can do it using RequireJS separating the modules on different files to leverage script dependencies loading:

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

You can see that we are depending on "firstModule" file to be injected before the content of the RequireJS callback can be executed which needs "first" AngularJS module to be loaded to create "second" AngularJS module.

Side note: Injecting "angular" on the "firstModule" and "secondModule" files as dependency is required in order to use AngularJS inside the RequireJS callback function and it have to be configured on RequireJS config to map "angular" to the library code. You may have AngularJS loaded to the page in a traditional manner too (script tag) although defeats RequireJS benefits.

More details on having RequireJS support from AngularJS core from 2.0 version on my blog post.

Based on my blog post "Making sense of RequireJS with AngularJS", here is the link.

Yes, it does, specially for very large SPA.

In some scenario, RequireJS is a must. For example, I develop PhoneGap applications using AngularJS that also uses Google Map API. Without AMD loader like RequireJS, the app would simply crash upon launch when offline as it cannot source the Google Map API scripts. An AMD loader gives me a chance to display an error message to the user.

However, integration between AngularJS and RequireJS is a bit tricky. I created angularAMD to make this a less painful process:

http://marcoslin.github.io/angularAMD/

Short answer is, it make sense. Recently this was discussed in ng-conf 2014. Here is the talk on this topic:

http://www.youtube.com/watch?v=4yulGISBF8w

Yes it makes sense to use requireJS with Angular, I spent several days to test several technical solutions.

I made an Angular Seed with RequireJS on Server Side. Very simple one. I use SHIM notation for no AMD module and not AMD because I think it's very difficult to deal with two different Dependency injection system.

I use grunt and r.js to concatenate js files on server depends on the SHIM configuration (dependency) file. So I refer only one js file in my app.

For more information go on my github Angular Seed : https://github.com/matohawk/angular-seed-requirejs

It makes sense to use requirejs with angularjs if you plan on lazy loading controllers and directives etc, while also combining multiple lazy dependencies into single script files for much faster lazy loading. RequireJS has an optimisation tool that makes the combining easy. See http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

I would avoid using Require.js. Apps I've seen that do this wind up a mess of multiple types of module pattern architecture. AMD, Revealing, different flavors of IIFE, etc. There are other ways to load on demand like the loadOnDemand Angular mod. Adding other stuff just fills your code full of cruft and creates a low signal to noise ratio and makes your code hard to read.

Here is the approach I use: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

The page shows a possible implementation of AngularJS + RequireJS, where the code is split by features and then component type.

Answer from briantford

AngularJS has it's own module system an typically doesn't need something like RJS.

Reference: https://github.com/yeoman/generator-angular/issues/40

I think that it depends on your project complexity since angular is pretty much modularized. Your controllers can be mapped and you can just import those JavaScript classes in your index.html page.

But in case your project get bigger. Or you anticipates such scenario, you should integrate angular with requirejs. In this article you can see a demo app for such integration.