DOJO + Angular integration / initialization

2,358 views
Skip to first unread message

Garth Tissington

unread,
Mar 13, 2013, 9:28:43 AM3/13/13
to ang...@googlegroups.com
New to angular but loving it..


I have multiple directives and each of their link functions requires that the DOJO library is finished loading.  Alas, I have to use DOJO.

So, as you can see in the code below I use dojo.ready() to run the link function once the library is loaded.    However, this only works for the first directly to be linked.  The second one never gets the ready event.

What is the right way to ensure that third party library initialization is complete before Angular starts running

Thanks for the help


<html>
<body>

    <div d1 id="map">
        <div d2></div>
    </div>

    <script src="//serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script src="//code.angularjs.org/1.1.1/angular.js"></script>
    <script src="app/js/app.js"></script>
</body>
</html>





app.js
=====================
angular.module("app").directive(
    "d1",
    function () {
        return {
            link: function (scope, element, attributes) {
                function init() {
                    dojo.doStuff();
                };

                dojo.ready(init);
            }
        };
    }
);

angular.module("app").directive(
    "d2",
    function () {
        return {
            link: function (scope, element, attributes) {
                function init() {
                    dojo.doStuff();
                };

                dojo.ready(init);
            }
        };
    }
);

justin russell

unread,
Mar 13, 2013, 5:32:26 PM3/13/13
to ang...@googlegroups.com
I think I'm working on doing exactly what you are. Here's where I'm at: 


I'd appreciate any refinements :) it will work for multiple maps but... well... my only experience with dojo is when I need maps from esri - I'm sure there must a better way of going about this.

Garth Tissington

unread,
Mar 14, 2013, 4:44:16 AM3/14/13
to ang...@googlegroups.com
I am in much the same place as you.   I am trying to make angular directive for other dojo-based arc gis widgets such as base map gallery, legend, etc.    Struggling with the connection between the map directive and the other directives.

I am very new to dojo and Angular so I think we'll face the same struggles.


Let's keep in touch though.  It would be good to work together on it.

I am in Saudi Arabia so time zones are probably different.

Garth Tissington
966 54 594 7802
---



--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Bvo02x1zxME/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Andy Joslin

unread,
Mar 14, 2013, 11:13:22 AM3/14/13
to ang...@googlegroups.com
Hi Garth,

You should wait until dojo is ready, then bootstrap your angular app. (in the dojo.ready callback, call angular.bootstrap(document, ['myApp']). Documentation for angular.bootstrap: http://docs.angularjs.org/api/angular.bootstrap

Also, you should decorate $compile to try to pre-compile things with dojo: http://stackoverflow.com/questions/1450916

Here's a great plunker showing a few things working great with a compile decorator. http://plnkr.co/edit/9iJJFLWDqGtyqLV5Mbe3?p=preview

Alec LaLonde

unread,
Mar 14, 2013, 2:26:54 PM3/14/13
to ang...@googlegroups.com
I am currently working on a similar project -- A main angularjs single-page app with heavy ArcGIS javascript API integration.  I have had success so far by delaying the loading of angular until dojo is loaded (as Andy mentions below).  Also, make sure you call $apply in any ArcGIS js callbacks where you are expecting changes to be handled by angular.



On Thursday, March 14, 2013 9:13:22 AM UTC-6, Andy Joslin wrote:

You should wait until dojo is ready, then bootstrap your angular app. (in the dojo.ready callback, call angular.bootstrap(document, ['myApp']). Documentation for angular.bootstrap: http://docs.angularjs.org/api/angular.bootstrap
Reply all
Reply to author
Forward
0 new messages