Does It Make Sense to Use Require.Js with Angular.Js

Does AngularJS support AMD like RequireJS?

Yes, you can use RequireJS with angular. You need to do a bit of extra work to make it function, as in the link you included, but it's possible.

In general, though, I haven't found any need for AMD with Angular. The whole idea of AMD is that it allows you to declaratively specify the dependencies between your scripts and not worry about the order in which you include them on the page. However, Angular takes care of that for you with its dependency injection mechanism, so you're not really getting any benefit by using AMD on top of that.

tl;dr I haven't found a compelling reason to use AMD with Angular.js.

Dependency Injection with Require JS + Angular JS. App requires auth, but auth requires app

You described a circular reference per "The app, requires authService to load, and authService requires app to load" and there is simply no solution for it.

However, looking at the sample code you provided, your true dependency is:

1. authService needs to be created and made available for app
2. appCtrl created in app requires authService

Assuming that's your only dependency, you can use angularAMD to create authService:

require(['angularAMD'], function (angularAMD) {
   angularAMD.factory('authService', ['$http', function ($http) {
        return {
            test: function () {
                return this;
            }
        }
    }]);
});

And make sure to use angularAMD to bootstrap app:

define(['angularAMD', 'angular-route', 'authentication'], function (require) {
    var app = angular.module('app', ['ngRoute']);
    ...
    return return angularAMD.bootstrap(app);
}]);

Take a look at Loading Application Wide Module for more details.

Include file with module from AngularJS app into RequireJS config file in Karma

By the time your code hits this require call:

require([
    'app/app.require'
],

There is no RequireJS configuration in effect, and data-main is not used, so by default RequireJS takes the directory that contains the HTML page that loads RequireJS as the baseUrl (See the documentation.) Since index.html sits at the root, then RequireJS resolves your module name to /app/app.require.js and does not find it.

You can work around it by using a full path:

require([
    'base/newApp/app/app.require'
], 

Or if it so happens that other code later is going to try to access this same module as app/app.require, then you should have a minimal configuration before your first require call:

require.config({
  baseUrl: '/base/newApp',
});

It is perfectly fine to call require.config multiple times. Subsequent calls will override values that are atomic (like baseUrl) and marge values that can be merged. (An example of the latter would be paths. If the first call sets a paths for the module foo and a 2nd call sets a paths for the module bar, then the resulting configuration will have paths for both foo and bar.)

Pros & Cons of using requirejs (-m amd) for typescript+angular projects

1. Makes more sense for angularjs?

Angular1 : --module amd
Angular2 : --module system as that is what the angularjs team uses internally.

2. Is better for large scale angular apps?

Yes. --out and reference comments are a bad idea. More : https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

3. Would be better at minification+obfuscation of large code base?

It would be the same. The main advantage is dev time readability and maintainability.

---

Related Topics