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

How to Transform Your Business in the Digital Age: Learn how organizations are re-architecting their integration strategy with data-driven app integration for true digital transformation.

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.

Build and deploy API integrations 7x faster. Try the Cloud Elements 100% RESTful platform for 30 days free. Access your trial here.

Topics:
mule ,http ,integration ,angularjs

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}