Exploring the Power of AngularJS within Confluence

I am facing an issue with AngularJS integration in Confluence. I attempted to incorporate angular files as web resources in the atlassian-plugin.xml file:

<web-resource name="Angular js files" key="angular-sources">
    <resource type="download" name="angular.js" location="js/angular/angular.js"/>
    <resource type="download" name="angular-animate.js" location="js/angular/angular-animate.js"/>
    <context>atl.general</context>
  </web-resource>

While everything functions correctly when using either atlas-run or atlas-debug, the problem arises when I generate a new JAR file using atlas-package and install it on a fresh Confluence instance. My macro editor JavaScript files don't recognize the variables defined in angular.js.

I also tried directly adding angular files into the web resource for my new macro, but unfortunately, that approach didn't yield any positive results:

<web-resource name="Resources - handle macros with JS" key="macroeditor-resources">
    <resource type="download" name="angular.js" location="js/angular/angular.js"/>
    <resource type="download" name="angular-animate.js" location="js/angular/angular-animate.js"/>
    …
    <resource type="download" name="page-move-dialog.js" location="js/page-move-dialog.js"/>
    <resource type="download" name="macro-editor-module.js" location="js/macro-editor-module.js"/>
    …
</web-resource>

It seems like Confluence is ignoring the contents of the angular.js file. What could be causing this behavior? Below is a snippet of the JavaScript file generated by Confluence where angular.js content is missing:

try {
/* module-key = 'plugin.key:angular-sources', location = 'js/angular/angular.js' */
// HERE SHOULD BE INCLUDED angular.js
} catch (err) {
    if (console && console.log && console.error) {
        console.log("Error running batched script.");
        console.error(err);
    }
}


try {
/* module-key = 'plugin.key:angular-sources', location = 'js/angular/angular-animate.js' */
(function(b,a,c){a.module("ngAnimate",["ng"]).config(["$provide","$animateProvider",function(g,i){var l=a.noop;var f=a.forEach;var j=i.$$selectors;var e=1;...
})(window,window.angular);
} catch (err) {
    if (console && console.log && console.error) {
        console.log("Error running batched script.");
        console.error(err);
    }
}

Is there another method to include angular files in Confluence?

Answer №1

If you want to explore the Scroll Versions plugin developed by k15t, take a closer look at its implementation using AngularJS. By unarchiving the OBR file and examining the content of the atlassian-plugin.xml, you may uncover valuable insights and clues about how the plugin functions.

Answer №2

Take a peek at SPARK, an innovative Single Page Application Framework designed for Atlassian add-ons. With SPARK, you can seamlessly integrate Angular into your Atlassian plugin with ease.

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

Adding HTML elements dynamically using jQuery: A how-to guide

My objective is to start with one element upon loading the page, and this element should have an ID of "something_O". When the user clicks on an add link, a new identical HTML element should be added underneath the existing element. The new element should ...

The chaotic world of Android WebKit versions 2.x and 3.x

I have been working on an Android app and my goal is to make it compatible with Android versions 2.2 and above. Currently, due to issues with the WebView control, I am restricted to targeting Android 4.0 and higher. The app primarily uses HTML, CSS, Java ...

Searching with Neo4j, Java and the Angular library for accurate

When my web application is opened, it displays a form where users can input a list of comma-separated usernames. The application then queries the neo4j database to fetch information for each username. I am interested in implementing autocomplete functiona ...

Setting default values for number inputs in Angular JS

Just starting out with AngularJS and running into an issue. I have a number input field that I want to populate with a value from a JSON file. Strangely, assigning the value using ng-model isn't working for me in this case. It works fine with a regul ...

Adding an audio event listener in HTML5

I am having trouble maintaining the limited loop functionality in my HTML5 audioplayer when I try to replace it with buttons and add event handlers to them. The repeat function only seems to work if the checkbox is checked and the second option of the se ...

Change the color of an icon when a button is clicked with the help of React

I'm new to React and facing an issue with updating like or bookmark count to 0 and 1 when a button is clicked. The problem arises when clicking on the bookmark icon, causing both icons to toggle inconsistently. ToggleIcon Component const ToggleIcon = ...

Ways to resolve the issue of BrowserWindow not being recognized as a constructor when trying to create a child window within the Electron

Currently, I am utilizing electron to construct an application with two windows. In my attempt to open a second window from the renderer process, I have implemented the following code snippet: const electron = require('electron'); const BrowserW ...

Accessing html form elements using jQuery

I'm having trouble extracting a form using jQuery and haven't been able to find a solution. I've tried several examples, but none of them display the form tags along with their attributes. Here is a sample fiddle that I've created: Sam ...

Utilize the `document.getElementById` method to trigger both function 2 and form 2 when clicked

Hey there, I'm having some issues with my code and would appreciate some help. After a user submits my form with the ID of 'fwrdform' using the onclick event, I want to also trigger another function from my 'logout-form' so that t ...

When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

For horizontal and vertical lines, using a translation of 0.5 for odd stroke widths results in crisper and sharper lines. But what about diagonal lines? Link to jsfiddle <!DOCTYPE html> <html lang="en"> <body style="background: black"& ...

Uncovering the secrets of navigating a JSON hierarchy

I'm trying to extract a specific value from this JSON data. My goal is to search by the State field, like 'NH', and retrieve the MaintenancePercentage and OfficePercentage values. Despite attempting to iterate through payrollDefaults.State ...

Navigating through history using the pushState method and incorporating back and forward buttons

I am trying to implement back and forward buttons functionality with this ajax method The code is working well, and the URL in the browser is changing as expected However, when I click on the back and forward buttons, nothing happens (function(){ ...

The issue of actions failing to flow from sagas to reducers in React.js

Upon user login, the success response is received but the action is not passed to the reducer. Strangely, during user registration, everything works smoothly. //saga.js import { put, takeEvery, all, call } from 'redux-saga/effects'; import {getRe ...

Update a MongoDB collection with data retrieved from a JavaScript object mapping

I have come across a collection that has the following structure: [ { "project":"example1", "stores":[ { "id":"10" "name":"aa", ...

Guidance on modifying a sub row within a main row in Sails.js

I am currently working on a sails.js application This is the model structure for my application: name: String, address:String, appSettings: { header: String, color : String, font: String, } In my development process, I have utilized independ ...

The npm postinstall script is functional, however, it does not complete successfully and ends

I have encountered an issue while trying to solve a problem with my project. In my package.json file, I have included a postinstall script that connects to a database and calls a function to write data into it. The script seems to be working fine as the da ...

Stop JSON.parse from shuffling the order of an object

When working on my web application, I retrieve a JSON string from the server and store it in a variable called greetings: var greetings = '{"2":"hoi","3":"hi","1":"salam"}' I have obser ...

Structuring files with AJAX, PHP, Javascript, and HTML

Explaining my dilemma in detail might be a bit abstract, but I'll try to do my best. In one of my PHP files, I have HTML code that includes text boxes and a submit button. This file serves as the main page and is named mainHTML.php The text boxes ar ...

You can disregard the first option in a multiple select box using jQuery

Imagine having multiple select boxes with the same options that are mutually exclusive. For instance, if Select Box A and Select Box B both have Option 1, Option 2, and Option 3, selecting Option 1 for Select Box A should make it unavailable in Select Box ...

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...