How to use requirejs to require dojox in angular application?

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!


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

  • not use realease code rather than development source code
  • 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' } ],

  • 链接地址: http://www.djcxy.com/p/92522.html

    上一篇: 导入ArcGIS Javascript API资源并加载dojo的问题

    下一篇: 如何使用requirejs在角度应用程序中要求dojox?