Getting Angularjs with Requirejs working with restangular and twitter bootstrap

Question

I am building a new angularjs app and want to use requirejs to manage my dependencies. I am struggling to get this to work and wonder if I'm just misunderstanding something. I also want to use twitter bootstrap and restangular to make restful calls. Trying to set this up leads to errors of not being able to find it. My main,js config is as follows:

require.config({
paths: {
    angular: '../vendor/angular',    
    twitterbootstrap: '../vendor/bootstrap/ui-bootstrap-tpls-0.6.0',
    restangular: '../vendor/restangular',
    domReady: '../vendor/domReady'
},
shim: {
    angular : {'exports' : 'angular'},
    restangular: {
        deps: ['underscore']
    }
   }
}); 

require([
'angular',
'app',
'domReady',
'twitterbootstrap',
//'underscore',
'restangular',
],
function (angular, app, domReady) {}...

I am getting errors with this:

angular is not defined

no module myApp

no module twitterbootstrap

I have tried several variations with this but just can't get it to play nicely together. Is there something else I'm missing - I've compared it to several examples and everything seems to be in order.

Answer 1

Mixing Angular and Require is tricky. I have an experimental project in GitHub (https://github.com/nikospara/angular-require-lazy) that works in some hacky way. You may take a look as an example.

Opinions comments on this project are also wellcome.

---

For your errors:

Open a net console (e.g. in Firebug) and check the paths called by RequireJS. Are these paths correct?

Angular modules (in contrast to Require/AMD modules) have dependencies of their own. You must make sure that .js files of Angular modules are loaded after angular. One way to do that is to shim them, e.g. for restangular it would be something like:

shim: {
    ...
    restangular: {
        deps: ["underscore", "angular"]
    }
}

Otherwise you can load angular and the other scripts with standard <script> tags, in the correct order.

These are general directions. If you can't find the reason of the problems, maybe you should post some more code; a fiddle/plunkr would also be great, if possible.

Related post in SO: Inject module dynamically, only if required