Adding an AngularJS frontend

This is the 6th article of a Build Java Module for Mango series. You can check all the articles by clicking here

Now that we have some backend to manage the devices. Let’s add some views with AngularJS, so we can use these endpoint from the Mango UI.

First, let’s update our pom.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <dependencies>
        <dependency>
            <groupId>com.infiniteautomation.mango</groupId>
            <artifactId>mango-api</artifactId>
            <version>4.0.0-SNAPSHOT</version>
            <scope>compile</scope>
        </dependency>
    </dependencies>
    <parent>
        <artifactId>modules-parent</artifactId>
        <groupId>com.infiniteautomation.mango</groupId>
        <version>4.0.0-SNAPSHOT</version>
        <relativePath>../ma-core-public/Modules/pom.xml</relativePath>
    </parent>
    <artifactId>EnergyMetering</artifactId>
    <version>4.0.0-SNAPSHOT</version>
    <name>EnergyMetering</name>
    <build>
        <plugins>
            <plugin>
                <groupId>eu.somatik.serviceloader-maven-plugin</groupId>
                <artifactId>serviceloader-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-assembly-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-dependency-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
    <description>Energy Metering</description>
</project>

We added the frontend-maven-plugin. We also need to create a package.json like this:

{
  "private": true,
  "name": "energy-metering",
  "version": "4.0.0-SNAPSHOT",
  "description": "Energy metering module",
  "dependencies": {},
  "devDependencies": {
    "@infinite-automation/mango-module-tools": "^2.0.5"
  },
  "author": "Luis Güette <luis.guette@radixiot.com>",
  "license": "UNLICENSED",
  "com_infiniteautomation": {
    "moduleName": "energyMetering"
  }
}

And a webpack.config.js like this:

const moduleConfig = require('@infinite-automation/mango-module-tools');
module.exports = moduleConfig().then(config => {
config.module.rules.push({
    test: /\.raw\.js$/,
    use: [{
        loader: 'raw-loader'
    }]
});

return config;

});

Next, we create a energyMetering.js into /web-src directory:

import angular from 'angular';
import overviewPage from './pages/overviewPage/overviewPage';
const energyMetering = angular.module('energyMetering', ['maUiApp']);
energyMetering.component('enmetOverviewPage', overviewPage);
energyMetering.config([
'maUiMenuProvider',
(maUiMenuProvider) => {
maUiMenuProvider.registerMenuItems([
{
name: 'ui.generalOverview',
url: '/overview',
template: '<enmet-overview-page></enmet-overview-page>',
weight: 100,
menuText: 'General Overview',
menuIcon: 'public',
},
]);
}
]);
export default energyMetering;

And inside /web-src/pages/overviewPage we create overviewPage.js:

import htmlTemplate from './overviewPage.html';
class OverviewPageController {
static get $$ngIsClass() {
return true;
}
static get $inject() {
    return [];
}

constructor() {}

$onInit() {}

}
export default {
bindings: {},
controller: OverviewPageController,
template: htmlTemplate
};

And, overviewPage.html :

<h1>Overview Page</h1>

Finally, we need to add EnergyMeteringAngularJSModuleDefinition.java into src/com/infiniteautomation/energyMetering directory:

package com.infiniteautomation.energyMetering;
import com.serotonin.m2m2.module.AngularJSModuleDefinition;
public class EnergyMeteringAngularJSModuleDefinition extends AngularJSModuleDefinition {
@Override
public String getJavaScriptFilename() {
return "/angular/EnergyMetering.js";
}
}

Now, execute:

mvn install -Pinstall-module

And you will see that the new module has the added view, like this: