Angular integrated with DOJO application

I'm currently working on incorporating Angular into an existing DOJO application. I've set up a plunkr http://plnkr.co/edit/8pgdNwxFoxrDAQaQ4qfm?p=preview, but unfortunately, the angular module is not loading. Can anyone provide guidance on what might be going wrong?

The goal of this plunkr is to simply display "hello World" from an 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">

In our application, there are other divs utilizing DOJO on the same page. To include page.html, which is attempting to load the angular module and use variables from the controller, I followed a similar approach.

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

This script showcases a basic angular module and controller setup 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");
        }])
})();

Answer №1

To enable the conversion of specially decorated nodes in your HTML markup into Dijits, you must utilize dojo/parser.

The usage of parser.parse() is demonstrated in the code snippet below.

For checking the initialization of your widgets, make use of dijit/registry.

The properties present in the question code that are not defined in the module ContentPane have been removed from the following code.

Refer to the official API for a list of available methods and properties for ContentPane.

Below is a functional example where two widgets can be seen ready for use in Dojo. Check the console for details.

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

In your actual application, it's recommended to parse the HTML markup (possibly created with Angular) using 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered when extending Typography variant in TypeScript with Material UI v5: "No overload matches this call"

Currently, I am in the process of setting up a base for an application using Material UI v5 and TypeScript. My goal is to enhance the Material UI theme by adding some custom properties alongside the default ones already available. The configuration in my ...

Dilemma of interdependencies between Socket.io and requirejs

I am facing a challenge with my legacy express project that has two servers. The project includes two separate client files: requirejs.config({ baseUrl: '/js' , paths: { "jquery": "lib/jquery/jquery-2.1.1.min", "socket.io" : "lib/socket/ ...

Creating multiple nested ng-repeats in an AngularJS table

Managing a large amount of data on users' availability by hour for multiple days can be challenging. The data is structured as follows: availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... } arrayOfUsers= [ userArray, userArray, ... ] user ...

Explaining the process of defining a function and addressing the situation of inserting "variable parameters/arguments" in case the first parameter/argument is deemed incorrect

I came across an interesting article called Callback Hell, which discusses the common practice of handling errors in callbacks. The article mentions that in Node.js, it is typical to designate the first argument of a callback function for error handling pu ...

Setting a cookie in a browser using an AJAX response: A step-by-step guide

When utilizing a Javascript function with jQuery to send a POST request to a web service, the response from the web server includes a header "Set-Cookie: name=value; domain=api.mydomain.com; path=/", along with a JSON body. However, despite this expected ...

The reply from the Servlet webpage is displayed on a fresh page

I am currently using Ajax and jQuery to handle the dynamic form submission process. While everything is functioning correctly, I am encountering an issue where the response from the Servlet is being displayed on a separate page. function initiateFormSubm ...

Integrate an external script with React and initialize a new instance

I've been working on integrating a neat canvas background feature from this GitHub project into my React web application. Here's what I've attempted: import {WarpSpeed} from './warpspeed.js' import WarpSpeed from './warpspee ...

How can you implement a bootstrap navigation bar in a vue.js project?

I have encountered a problem with using html in my vue project. Despite following the documentation, it seems that the html is not working properly. I am unsure if this issue could be related to the import of popper.js. I have checked my code and I believe ...

What is the best way to toggle the visibility of fields on a modal in a Ruby on Rails

I am working on an application that utilizes Rails 4.1 and Ruby 2.1.2. The show.html.erb view for the Assignment Model in this application is as follows: <h1><%= "#{'Source URL'}"%> <div class="source-url"><%= @assignment.so ...

Creating responsive HTML page text and table with the use of JavaScript

Trying to create a responsive webpage has been a bit challenging. I experimented with height,style.height, style.OffsetHeight, etc. but still struggling to dynamically make a square table. Although the code below changes the height, the table's width ...

How to pass parameters while updating parent values in VueJS using emit?

Explaining my dilemma with uploading images: In my form, users can upload images using the following code snippet: <input id="visualisation_upload" @change="onThumbnailChanged" name="visualisation_upload" accept="imag ...

Error: Unexpected end of input detected (Likely due to a missing closing brace)

I've been struggling with this bug for the past two days, and it's driving me crazy. I have a feeling that I missed a brace somewhere in my script, but despite running various tests, I can't seem to pinpoint the glitch. Hopefully, your eyes ...

I am having success posting data through a form, however, the fetch API is not functioning as expected for me

Currently, I am working on a React Project and focusing on creating a signup form. Everything seems to be fine when posting form data using the Form, but things get stuck when I try to use onSubmit={handleSubmit} along with fetch APIs such as axios or just ...

Obtain the value of "Placeholder" using JavaScript in Internet Explorer without the need for JQuery

I have some custom Javascript code that checks for browser support of placeholders and creates them if not supported. This solution works on some older browsers, but not all, especially IE. The issue I am facing is retrieving the "Placeholder" value; curr ...

Adding Tooltips to Your Bootstrap 5 Floating Labels Form: A Step-by-Step Guide

Can you include tooltips or popovers in Bootstrap 5 floating labels text? I've set up a form with floating form fields and I'd like to provide instructions for certain fields using tooltips or popovers. I can make it work with the standard form ...

Positioning Avatar component at the center of Card component

Hello there, I am currently trying to center my <Avatar> elements using Material UI with React within the <Card> components. The layout appears very crowded right now. What would be the most effective method to achieve this? I attempted setti ...

Angular's asynchronous HTTP request allows for non-blocking operations when

I'm currently working with Angular 6, and I've encountered an issue while updating my resource instance in the following way: this.user = api.getUser(); public getUser(): User { const myHeader = new HttpHeaders({ 'Authorization' ...

Instructions for activating column resizing in MUI DataGrid

Is there a way to enable column resizing for users in MUI DataGrid? It's enabled by default on XGrid, but I would like to enable it on Datagrid as well. Any assistance is appreciated. <DataGrid className={classes.table} ...

What is the best way to prevent code execution until a value is returned by $.get?

My attempt to read data from a file and store it in an array using jQuery's get function has hit a snag. Since the get function is asynchronous, the code that comes after the $.get call runs before the data is defined. How can I make sure that the cod ...

Next.js application deployment halted due to an unsuccessful completion of the process with the command "/bin/bash -ol pipefail -c npm ci"

After completing the development of a Next.js application (discord clone), I encountered an issue while trying to deploy it on Railway. The error message was: Dockerfile:20 ------------------- 18 | ENV NIXPACKS_PATH /app/node_modules/.bin:$NIXPACKS_P ...