Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Integrating an AngularJS Component in Mule

DZone's Guide to

Integrating an AngularJS Component in Mule

If you can create a flow where an HTTP static resource handler can be used, then you can integrate an AngularJS component in Mule.

· Integration Zone ·
Free Resource

SnapLogic is the leading self-service enterprise-grade integration platform. Download the 2018 GartnerMagic Quadrant for Enterprise iPaaS or play around on the platform, risk free, for 30 days.

Imagine a situation in which we need to integrate an AngularJS component with an existing Mule application. The first thing we have to do is create an AngularJS project in /src/main/app folder.

This will be like a normal web call to your Mule service. I have added an HTML component where the Angular code is embedded.

I have attached the code below that I have used for creating the HTML component.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script type="text/javascript" src="main.js" defer></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="myAppModule">
<div ng-controller="myAppController" style="text-align: center">

<button ng-click="calculateQuantity()">Calculate</button>

</div>
<script>
var myAppModule = angular.module('myAppModule', []);
myAppModule.controller('myAppController', function ($scope, $http) {
var CelsiusVal = "10";
$scope.calculateQuantity = function () {
alert("I'm here")
$http.get('http://localhost:8081/flow2', { params: { Celsius: CelsiusVal } }).
success(function (data) {alert("succ");})
.error(function () { alert("error"); }); 
};
});
</script>
</body>
</html>  

After that, in next step, we have to create a flow where an HTTP static resource handler can be used. This component will be used to parse our Angular code.

Find the Mule code I have used for this integration below.

<?xml version="1.0" encoding="UTF-8"?>

<mule xmlns:http="http://www.mulesoft.org/schema/mule/http" xmlns="http://www.mulesoft.org/schema/mule/core" xmlns:doc="http://www.mulesoft.org/schema/mule/documentation"
xmlns:spring="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-current.xsd
http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd
http://www.mulesoft.org/schema/mule/http http://www.mulesoft.org/schema/mule/http/current/mule-http.xsd">
<http:listener-config name="HTTP_Listener_Configuration" host="localhost" port="8081" doc:name="HTTP Listener Configuration"/>
<flow name="testangularFlow">
<http:listener config-ref="HTTP_Listener_Configuration" path="/flow1" doc:name="HTTP"/>
<logger level="INFO" doc:name="Logger"/>
<http:static-resource-handler resourceBase="${app.home}/ui" defaultFile="Ui.html" doc:name="HTTP Static Resource Handler"/>
<set-payload value="#[payload]" doc:name="Set Payload"/>
</flow>
<flow name="testangularFlow1">
<http:listener config-ref="HTTP_Listener_Configuration" path="/flow2" doc:name="HTTP"/>
<set-payload value="In Second Flow" doc:name="Set Payload"/>
</flow>
</mule>

You have now successfully integrated Mule with Angular JS.

With SnapLogic’s integration platform you can save millions of dollars, increase integrator productivity by 5X, and reduce integration time to value by 90%. Sign up for our risk-free 30-day trial!

Topics:
mule ,http ,integration ,angularjs

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}