AngularJS with DirectScale
CloudSpark is written as a SPA (Single-Page Application) using AngularJS. Due to SPA's nature, the more traditional way of developing a site where each page is a full reload doesn't work. Because your HTML will not get added to the DOM until Angular loads the view, non-Angular JavaScript may not work as intended. For example, jQuery selectors might not find your HTML elements; however, JavaScript and jQuery wrapped in an appropriately-referenced Angular controller will work fine.
✅Learn More About AngularJS
Tieing into DirectScale's Angular App
To tie into DirectScale's Angular app, DirectScale exposes a JavaScript variable called module
, which you can use to register all of your Angular components like so:
module.controller('MyCustomController', ['$scope', function($scope) { $scope.greeting = 'Welcome!'; }]);
Using Unique Component Names
Everything is globally namespaced. Meaning, you cannot have two identically named Angular controllers, services, or directives. Instead, each component should have a unique name. To ensure you don't have any naming collisions with the core DirectScale app, prefix each component with a unique name.
You'll have to copy each custom directive, service, and factory to any custom page you create. For example, suppose you work for "Big Company" and create a Welcome widget. You might call your components bigCoWelcomeController
, bigCoWelcomeService
, bigCoWelcomeAnimationDirective
, etc.
Accessible Libraries
There are two notable libraries accessible in Admin custom content:
DirectScale Services
DirectScale has exposed some Angular services that you can use when creating custom content. There are three different content systems in CloudSpark, each with its specific services:
Read More
For calling APIs, you can use
$RestService
. Learn more in Calling APIs in Custom Content.
Admin
toastService
A Toast is a small message that displays at the bottom of the screen. You can call toastService
to create a Toast with custom text.
Functions
-
showMessage
- Display a Toast message with custom text. -
showError
- Display a Toast message with custom text, styled as an error.
Parameters
messageString
(string) - Text for the Toast message
dialogService
Call this service to display a pop-up dialog window.
Function
show
Parameters
templateUrl
(string) - The identifier of a defined Angular HTML template. You need to define the template with a name and then use that name in this parameter (see example).controller
(string) - Pop-up controllerlocals
(object) - This is an object with properties that the app exposes to the controller as parameters. For example, the JSON object{ foo: 5, boo: ‘hello’ }
will allow thecontroller
function to have afoo
andboo
parameter. The parameters will then populate with the values from this JSON object. Thelocals
object allows your code to pass data to thecontroller
for the dialog.$event
(event) - The Angular event object that causes the dialog to open, which is typically captured and passed throughng-click
or other Angular DOM events. When you use$event
, the dialog box appears to pop out from the event's origin (such as a button the user clicks).
Examples:
function openPopupDialog(popup, $event) {
dialogService.show('Views/LoginEvents/Dialogs/LoginPopupDialog.html', 'LoginPopupDialogController',
{ popup: popup, loginEvents: ctrl.loginEvents, canEdit: ctrl.canEdit() }, $event);
}
Web Office
PopupService
Shows dialog like the Admin dialogService
.
Function
Popup
Parameters
templateUrl
(string) - The identifier of a defined Angular HTML template. You need to define the template with a name and then use that name in this parameter (see example).title
(string) - Pop-up titlemessage
(string) - If defined, the pop-up will display a simple text message inside it. This parameter can be an empty string if you use thetemplateUrl
parameter or vice-versa. Do not use bothmessage
andtemplateUrl
simultaneously.closeFn
(function) - Pop-up close functiondata
(object) - Pop-up data
function Popup(templateUrl, title, message, closeFn, data)
growlService
This service shows notifications similar to the toastService
in Admin.
Function
growl
Parameters
-
message
(string) - Pop-up message -
type
(string) - Type of pop-upTypes
danger
- Shows a warning messageinverse
- Shows a successful message
function growl(message, type)
eCommerce Shop
modelPopupService
A standard pop-up service, similar to the Admin dialogService
.
Function
popup
Parameters
type
(string) - Type of pop-uptemplateUrl
(string) - The identifier of a defined Angular HTML template. You need to define the template with a name and then use that name in this parameter (see example).title
(string) - Pop-up titlemessage
(string) - If defined, the pop-up will display a simple text message inside it. This parameter can be an empty string if you use thetemplateUrl
parameter or vice-versa. Do not use bothmessage
andtemplateUrl
simultaneously.close
(function) - Pop-up close methoddata
(object) - Pop-up datapreventEscape
(Boolean) - True/False. If True, the parameter prevents the user from closing the pop-up.
function popup (type, templateUrl, title, message, close, data, preventEscape, template,windowClass)
notificationService
Service for displaying different types of notifications to the user.
Functions
success
- Success Notificationerror
- Error Notificationwarning
- Warning Notificationinfo
- Info Notification
Parameters
title
(string) - Notification titlemessage
(string) - Notification message
function success (title, message)
function error (title, message)
function warning (title, message)
function info (title, message)
Example Admin Custom Content Angular Controller
Here's an example of a primary Angular controller for Admin custom content:
📘Note
This example does not apply to Web Office or eCommerce Shop custom content.
<div class="report-body" ng-controller="MyTestCtrl as ctrl">
<p>
<button type="button" ng-click="ctrl.doSomething()">Click me</button>
</p>
</div>
module.controller('MyTestCtrl', [
'$http', '$window', '$scope', 'toastService',
function ($http, $window, $scope, $toastService) {
var ctrl = this; // For convenience and to not have to worry about scope inside of other functions.
ctrl.baseUrl = $window.model.apiUrl + '/Admin/Proxy/demo/end2'; // "/Admin/Proxy" are required to call the passthrough middleware.
console.log("Base URL: " + ctrl.baseUrl);
ctrl.doSomething = function () {
var req = { };
$http.post(ctrl.baseUrl, req)
.then(
function(result) { // Success
if (result.data.ResponseBody) {
var parsedResponse = JSON.parse(result.data.ResponseBody);
if (parsedResponse.Status == "2") { alert(parsedResponse.Message); } else { $toastService.showError("An error has occurred."); }
} else { $toastService.showError("Received unexpected response: " + result); }
},
// Error
function(error) { $toastService.showError("An error has occurred." + error); }
);
};
}
]);
$http
- The example uses$http
, which won't be authenticated in eCommerce Shop or Web Office. For those, use$RestService
instead.toastService
- This is a DirectScale service available for Admin custom content. The function passes this in as a way to display messages consistently.ng-click
-ng-click
is a standard Angular concept. Angular events don't listen to regular JavaScript events. When the user clicks the<button>
,ng-click
will specify custom behavior; in this case, the functiondoSomething
will execute./Admin/Proxy/
- This prefix is required when calling APIs in Admin custom content. Read more about Custom API Proxies. The URL points to a custom API endpoint defined in the Client Extension at"demo/end2"
.
Example of Defining an Angular Template
The following example shows how you can define a template for the templateUrl
parameter of many of the DirectScale services:
module.run(['$templateCache', function ($templateCache) {
$templateCache.put('MyLoginPopupDialogTemplate', '<div>My HTML</div>');
});
Updated about 3 years ago