CODEWITHSUNDEEP
javascriptangularjsdojo
would_like_to_be_anon
would_like_to_be_anon

Reputation: 1727

Angular with DOJO application

I need to write part of the existing DOJO application using Angular. I created a plunkr http://plnkr.co/edit/8pgdNwxFoxrDAQaQ4qfm?p=preview. This is not loading angular module. What am I doing wrong?

This plunkr needs to display hello World from angular controller.

 <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props='isLayoutContainer: "true"'
             title="Testing Angular with DOJO"
             id="targetID"
             selected="false"             
             href="page.html">

There are other divs which use DOJO in our application in the same page, So, I followed the same mechanism to include page.html which tries to load angular module and use variables from the controller.

<body ng-app="myApp">
  <div ng-controller="myAppController as myAppCtrl">
    angular content here... {{ myAppCtrl.hello }}
  </div>
</body>

Simple angular module and controller to display hello world

(function () {
    'use strict';

console.log("inside myApp js");

angular.module('myApp', [])

        .run([function () {
            console.log("inside angular module");
        }])

        .controller('myAppController', [function () {
          var self = this;
          self.hello = "Hello World!"
          console.log("inside angular controller");
        }])
})();

Upvotes: 1

Views: 2611

Answers (1)

GibboK
GibboK

Reputation: 73918

You need to use dojo/parser in order to convert specially decorated nodes (in your HTML markup) into Dijits.

In the following code you can see its usage when calling parser.parse().

Use dijit/registry to see your widgets initialized.

Question code contains some properties which are not define in module ContentPane, so I removed them up in code below.

Please refer to official API to see method and property available for ContentPane.

Below a working example, please look at the console where you can see two widgets ready to be used in Dojo.

https://jsbin.com/joyuhesapo/edit?html,console,output

In your real application you should parse the HTML markup (I believe you are creating it with angular) with dojo/parse.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script data-dojo-config="async: true" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
        require([
            "dojo/parser",
            "dijit/layout/ContentPane",
            "dijit/form/Button",
            "dijit/registry",
            "dojo/domReady!"], function (
            parser,
            ContentPane,
            Button,
            registry
            ) {
                parser.parse().then(function () {
                    var widgets = registry.toArray();
                    widgets.forEach(function(widget){
                      console.log(widget.id);
                    });
                });


            });

    </script>

</head>

<body>
    <h1>Hello Angular + DOJO!</h1>
    <button data-dojo-type="dijit/form/Button" type="button"> Just an example Click! </button>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Testing Angular with DOJO', isLayoutContainerIndicates : true">
        Panel Content
    </div>
</body>

</html>

Upvotes: 1

Related Questions