Using r.js with Angular and Require

Question

I am having issues setting up r.js when using require in my angular application. I am new to using AMD so it may be an easy fix. Unforunately the directory structure must remain as is because of the requirement of ability to add more clients using the same Default components.

The error I get is that it can't find the controller dependencies. It is triyng to reference them from Client#1/Directory_For_Prod_Packs/Angular/Default/_Controllers/.js. So essentially it is adding the whole absolute path at the end of where the build file is at, or at least that what it seems like to me. Any help would be amazing. Essentially I'd just like to either have one pack of all my directives, services, controllers, etc. Or packs of controllers.js then directives.js and so forth.

Here is my directory structure.

Angular
- Lib
  - angular.js
- Default
  - Controllers
    - _Controllers.js //pack of controllers
    - .js //all the separate Controllers
  - Directives
    - _Directives.js
    - .js
- Client#1
  - main.js //require config
  - app.js
  - build.js // r.js build config

And this is my build.js for r.js

({
baseUrl: '../../lib/Angular',
dir: "../../Client#1/ProductionBuild",
paths: {
    "controllers": '../../Default/_Controllers/_Controllers',     
}, 
modules: [
    {
    name: "controllers"
    }
] 
})

And finally this is my _Controller.js which

define(['angular',
    '../../Default/_Controllers/controller1.js',
    '../../Default/_Controllers/controller2.js'],
    function(angular) {
        'use strict';

        var dependencies = ['controller1',
                            'controller2',];

        angular.module('app.controllers', dependencies);
    }
);

Nikos Paraskevopoulos Nikos Paraskevopoulos · Accepted Answer · 2013-10-08T12:02:10

I'm not sure what exactly is the problem (the directory structure and the ../.. seem not to match, though I may be mistaken), but try setting the build.js properties as:

baseUrl: The folder that contains the scripts, relative to the HTML page that loads them, not relative to build.js
dir: Build output folder, relative to build.js
appDir: Application folder. It probably contains an index.html that bootstraps the scripts of your application. The folder pointed to by the baseUrl configuration property must be under this! And this is relative to build.js.

Take extra care about baseUrl, those ../.. look suspicious. It is relative to the index.html, not build.js.

Using r.js with Angular and Require

1 Answers