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.
·
Join the DZone community and get the full member experience.
Join For FreeImagine 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.
Opinions expressed by DZone contributors are their own.
Comments