How to use requirejs to require dojox in angular application?

Question

I have to face a huge angularjs application which UI part would be implemented by dojo.

My project is an angularjs application, its structure is like this:

• public
  • scripts
    • libs
      • angular
      • dojo
        • dojo
        • dijit
        • dojox
      • require.js
    • modules
      • sub-directive1.js
      • sub-directive2.js
      • sub-app.js
    • main.js
  • index.html

in the file index.html

<script data-main="scripts/main" src="scripts/libs/require.js"></script>

in the file main.js

require.config({
    baseUrl: "scripts",
    paths: {
        ......
        , dojo: "libs/dojo/dojo"
        , dijit: "libs/dojo/dijit"
        , dojox: "libs/dojo/dojox"
    }
});

in the file sub-app.js

define([...], function (...) {

    var app = angular.module("subApp",["ngRoute"]);

    app.config([
        //config something

    ]);
    app.run([
        // do something in runing phase
    ]);

    return app;
});

in the file sub-directive1.js, I require dijit/Calendar to create a Calendar widget for the sub-directive1. It works well, requirejs can find "dijit/Calendar" easily.

define([
    "./sub-app"
], function(app) {

    app.directive("subDirective1",
        function() {
            return {
                restrict: "E",
                replace: true,
                link: function (scope, iElement, iAttrs){
                    ......
                    require([
                        "dijit/Calendar",
                        "dojo/date",
                        "dojo/domReady!"
                    ], function(Calendar, date){
                        new Calendar({
                            value: new Date(),
                            isDisabledDate: function(d){
                                var d = new Date(d); d.setHours(0, 0, 0, 0);
                                var today = new Date(); today.setHours(0, 0, 0, 0);
                                return Math.abs(date.difference(d, today, "week")) > 0;
                            }
                        }, iElement);
                    });
                }
            }
        }
    );
});

in the file sub-directive2.js, I require dojox/charting/Chart to create a column graph in the sub-directive2. But It cannot work, my browser output: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/public/scripts/libs/dojo/dojox.js

define([
        "./sub-app"
    ], function(app) {

        app.directive("subDirective2",
            function() {
                return {
                    restrict: "E",
                    replace: true,
                    link: function (scope, iElement, iAttrs){
                        ......
                    require(["dojox/charting/Chart",
                        ......
                        "dojo/ready"],
                        function(Chart, Default, Lines, Wetland, ready){
                            ready(function(){
                                var c = new Chart("chart3");
                                .....

                                iElement.append(chart1);

                            });
                        });
                    }
                }
            }
        );
    });

I wan to know why the requirejs can find diji path correctly, but not find dojox path correctly? it thought dojox is a javascript file not a directory. This is what puzzled me!

Answer 1

OK. Nobody response. I overcome it by myself. we should do 2 steps when we want to use requirejs to require dojo/dijit/dojox

1. not use realease code rather than development source code

2. use package config dojo not use paths

   packages : [ { name : 'dojo', location : 'libs/dojo/dojo' }, { name : 'dijit', location : 'libs/dojo/dijit' }, { name : 'dojox', location : 'libs/dojo/dojox' } ],