Skip to main content

Adding an AngularJS Frontend

This is the 6th article of the Build Java Module for Mango series. See the full series in the Module Development Overview.

Now that the backend is in place to manage devices, you can add AngularJS views so users can interact with the endpoints from the Mango UI.

Update the Maven Configuration​

First, update your pom.xml to enable the frontend Maven plugin (which was previously commented out):

<?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>

Create package.json and webpack.config.js​

Create a package.json file:

{
  "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 Guette <luis.guette@radixiot.com>",
  "license": "UNLICENSED",
  "com_infiniteautomation": {
    "moduleName": "energyMetering"
  }
}

And a webpack.config.js file:

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;
});

Create the AngularJS Module​

Create energyMetering.js in the /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;

Create the Overview Page Component​

Inside /web-src/pages/overviewPage, 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>

Register the AngularJS Module Definition​

Add EnergyMeteringAngularJSModuleDefinition.java in the 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";
    }
}

Build and Verify​

Build the module:

mvn install -Pinstall-module

After the build completes and Mango restarts, you will see the new "General Overview" menu item in the sidebar, displaying the Overview Page component.

From here, you can expand the overview page to make REST API calls to the device endpoints, display device data in tables, and build a full management interface for your energy metering devices.