Public API GatewayAbstractions Reference
Help CenterAsk a Dev

AngularJS with DirectScale

Suggest Edits

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

AngularJS's Developer Guide and API Reference

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.

    Example showMessage

  • showError - Display a Toast message with custom text, styled as an error.

    Example showError

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 controller
  • locals (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 the controller function to have a foo and boo parameter. The parameters will then populate with the values from this JSON object. The locals object allows your code to pass data to the controller for the dialog.
  • $event (event) - The Angular event object that causes the dialog to open, which is typically captured and passed through ng-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 title
  • message (string) - If defined, the pop-up will display a simple text message inside it. This parameter can be an empty string if you use the templateUrl parameter or vice-versa. Do not use both message and templateUrl simultaneously.
  • closeFn (function) - Pop-up close function
  • data (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-up

    Types

    • danger - Shows a warning message
    • inverse - 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-up
  • 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 title
  • message (string) - If defined, the pop-up will display a simple text message inside it. This parameter can be an empty string if you use the templateUrl parameter or vice-versa. Do not use both message and templateUrl simultaneously.
  • close (function) - Pop-up close method
  • data (object) - Pop-up data
  • preventEscape (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 Notification
  • error - Error Notification
  • warning - Warning Notification
  • info - Info Notification

Parameters

  • title (string) - Notification title
  • message (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 function doSomething 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 almost 3 years ago