Step 1: Add a container for Rollout Link
Create an AngularJS controller that mounts Rollout Link into a DOM element that AngularJS owns:<div ng-app="rolloutDemo" ng-controller="RolloutController as vm">
<h1>Your Application</h1>
<div id="rollout-link-container"></div>
</div>
Step 2: Initialize Rollout Link from AngularJS
Fetch your Rollout token from the backend, load the Rollout stylesheet, then mount the UI component into the container:<script>
angular.module("rolloutDemo", []).controller("RolloutController", function RolloutController($http, $scope) {
var rolloutRoot = null;
function ensureStylesheet() {
if (document.querySelector('link[data-rollout-link-styles="true"]')) {
return;
}
var styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
styleLink.setAttribute("data-rollout-link-styles", "true");
document.head.appendChild(styleLink);
}
$http
.get("/rollout-token")
.then(function (response) {
return response.data.token;
})
.then(function (token) {
ensureStylesheet();
return Promise.all([
import("https://esm.sh/react@18"),
import("https://esm.sh/react-dom@18/client"),
import("https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
]).then(function ([React, ReactDOM, rollout]) {
var container = document.getElementById("rollout-link-container");
rolloutRoot = ReactDOM.createRoot(container);
rolloutRoot.render(
React.createElement(
rollout.RolloutLinkProvider,
{ token: token },
React.createElement(rollout.CredentialsManager)
)
);
});
});
$scope.$on("$destroy", function () {
if (rolloutRoot) {
rolloutRoot.unmount();
}
});
});
</script>
A rendering of the Rollout Link UI Component
Step 3 (Optional): Handle when a new credential is added
You can passonCredentialAdded to run custom AngularJS logic after a user connects an integration:
<script>
angular.module("rolloutDemo", []).controller("RolloutController", function RolloutController($http, $scope) {
var rolloutRoot = null;
function ensureStylesheet() {
if (document.querySelector('link[data-rollout-link-styles="true"]')) {
return;
}
var styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
styleLink.setAttribute("data-rollout-link-styles", "true");
document.head.appendChild(styleLink);
}
function handleCredentialAdded(payload) {
console.log("New credential added", payload.id, payload.appKey);
$scope.$applyAsync(function () {
$scope.latestCredential = payload;
});
}
$http
.get("/rollout-token")
.then(function (response) {
return response.data.token;
})
.then(function (token) {
ensureStylesheet();
return Promise.all([
import("https://esm.sh/react@18"),
import("https://esm.sh/react-dom@18/client"),
import("https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
]).then(function ([React, ReactDOM, rollout]) {
var container = document.getElementById("rollout-link-container");
rolloutRoot = ReactDOM.createRoot(container);
rolloutRoot.render(
React.createElement(
rollout.RolloutLinkProvider,
{ token: token },
React.createElement(rollout.CredentialsManager, {
onCredentialAdded: handleCredentialAdded
})
)
);
});
});
$scope.$on("$destroy", function () {
if (rolloutRoot) {
rolloutRoot.unmount();
}
});
});
</script>
Full implementation example
<!doctype html>
<html ng-app="rolloutDemo">
<head>
<meta charset="utf-8" />
<title>Rollout Link with AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body ng-controller="RolloutController as vm">
<h1>Your Application</h1>
<div id="rollout-link-container"></div>
<script>
angular.module("rolloutDemo", []).controller("RolloutController", function RolloutController($http, $scope) {
var rolloutRoot = null;
function ensureStylesheet() {
if (document.querySelector('link[data-rollout-link-styles="true"]')) {
return;
}
var styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
styleLink.setAttribute("data-rollout-link-styles", "true");
document.head.appendChild(styleLink);
}
function handleCredentialAdded(payload) {
console.log("New credential added", payload.id, payload.appKey);
}
$http
.get("/rollout-token")
.then(function (response) {
return response.data.token;
})
.then(function (token) {
ensureStylesheet();
return Promise.all([
import("https://esm.sh/react@18"),
import("https://esm.sh/react-dom@18/client"),
import("https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
]).then(function ([React, ReactDOM, rollout]) {
var container = document.getElementById("rollout-link-container");
rolloutRoot = ReactDOM.createRoot(container);
rolloutRoot.render(
React.createElement(
rollout.RolloutLinkProvider,
{ token: token },
React.createElement(rollout.CredentialsManager, {
onCredentialAdded: handleCredentialAdded
})
)
);
});
});
$scope.$on("$destroy", function () {
if (rolloutRoot) {
rolloutRoot.unmount();
}
});
});
</script>
</body>
</html>