Angular with Atlassian Plugin SDK

I want to develop an Atlassian Plugin with the backend managed by Java with the Atlassian Plugin SDK (like it is common already) and the Frontend with Angular 2.x and Typescript. How can I integrate Angular in an Atlassian Plugin, for example if I want to display an Angular view with custom directives etc. in the Admin settings of Confluence or in a Macro?

Start by downloading the angular lib into the resources/js/angular folder. Then link all file in the altassian-plugin.xml such as: (this is my)

<web-resource key="assets" name="Bootstrap, jQuery and theme-related assets">
        <resource location="/js/jquery_before.js" name="jquery_before.js" type="download"/>
        <resource location="/js/lib/jquery-1.11.3.min.js" name="jquery-1.11.3.min.js" type="download"/>
        <resource location="/js/jquery_after.js" name="jquery_after.js" type="download"/>
        <resource location="/bootstrap/less/bootstrap.less.css" name="bootstrap.less.css" type="download"/>
        <resource location="/bootstrap/js/bootstrap.min.js" name="bootstrap.min.js" type="download"/>
        <resource location="/bootstrap/fonts" name="fonts/" type="download"/>
        <resource location="/css/bootstrap-equal-row.css" name="bootstrap-equal-row.css" type="download"/>
        <resource location="/css/bootstrap-xxs-tn.min.css" name="bootstrap-xxs-tn.min.css" type="download"/>
        <resource location="/css/BootstrapXL.css" name="BootstrapXL.css" type="download"/>
        <context>atl.general</context>
        <context>atl.admin</context>
    </web-resource>

The above injects in the general and admin context (almost everywhere) and installs bootstrap and jquery (among others). Following something similar, you can load the angular and your own directives.

Thanks. Which Typescript file do I have to register as a resource? The main.ts (entry) or app.module or all?
And is it possible to use my directives in soy or vm templates?

I am not 100% sure confluence can handle atm typescript. My intuition says that you have to first pass typescript through babel.
You can either add your custom … and call it from vm/soy or call the resources using they in the format

groupId.artifactId:web-resourceKEY

Take a look in https://developer.atlassian.com/confdev/confluence-plugin-guide/writing-confluence-plugins/including-javascript-and-css-resources for the vm engine. For Soy is similar:
{webResourceManager_requireResourcesForContext('your context')}
or
{webResourceManager_requireResource('method using key')}

Hey there,

i created a little guide, to demonstrate how Angular can be integrated into Jira. You can give it a read if you want and you are still interested.

2 Likes