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

Modernize your application architectures with microservices and APIs with best practices from this free virtual summit series. Brought to you in partnership with CA Technologies.

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.

The Integration Zone is proudly sponsored by CA Technologies. Learn from expert microservices and API presentations at the Modernizing Application Architectures Virtual Summit Series.

Topics:
mule ,http ,integration ,angularjs

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}