Kentico REST API w/ Forms Auth + AngularJS

dashboard.js

(function (angular) {
    "use strict";
    
    let yourDomain = 'enter-your-domain-here';
    let yourUsername = 'enter-your-username-here';
    let yourPassword = 'enter-your-password-here';

    let app = angular.module('dashboard', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav']);

    app.controller('DashboardController', DashboardController)
        .factory('productsService', productsService)
        .factory('interceptor', interceptor)
        .config(config);

    getToken().then(bootstrapApplication);
    
    function getToken() {
        var initInjector = angular.injector(["ng"]);
        var $http = initInjector.get("$http");

        let username = yourUsername, password = yourPassword, token = createUUID();
        let tokenUrl = 'http://' + yourDomain + '/rest/settoken?username=' + username + '&password=' + password + '&token=' + token;

        return $http.post(tokenUrl)
            .then(function (response) {
                let apiData = {
                    token: token,
                    url: 'http://' + yourDomain + '/rest/'
                };

                app.constant("apiData", apiData);
            });
    }

    function bootstrapApplication() {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ["dashboard"]);
        });
    }

    function config($httpProvider) {
        $httpProvider.interceptors.push('interceptor');
    }
    config.$inject = ['$httpProvider'];

    function interceptor(apiData) {
        return {
            'request': function (config) {
                if (config.url.indexOf(yourDomain + '/rest') > 0) {
                    config.headers["Cms-Session-Token"] = apiData.token;
                    if (config.url.indexOf('?') > 0) {
                        config.url += '&format=json';
                    } else {
                        config.url += '?format=json';    
                    }
                    
                    config.authorization = '';
                }
                return config;
            }
        };
    }
    interceptor.$inject = ['apiData'];

    function DashboardController($scope, productsService) {
        let vm = this;
        
        vm.gridOptions = {};

        vm.getProducts = getProducts;

        function getProducts() {
            productsService.getProductsAsync()
                .then(function (data) {
                    vm.gridOptions.data = data;
                });
        }
    }
    DashboardController.$inject = ['$scope', 'productsService'];

    function productsService($http, apiData) {
        let service = {};

        service.getProductsAsync = getProductsAsync;

        return service;

        function getProductsAsync() {
            return $http.get(apiData.url + 'ecommerce.sku?columns=SKUID,SKUName,SKUImagePath,SKUPrice,SKUAvailableItems')
                .then(function (response) {
                    return response.data.ecommerce_skus[0].COM_SKU;
                });
        }
    }
    productsService.$inject = ['$http', 'apiData'];

    function createUUID() {
        // http://www.ietf.org/rfc/rfc4122.txt
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";

        var uuid = s.join("");
        return uuid;
    }
} (window.angular));

header.html

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- NG UI Grid -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.min.css">

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

template.html

<div class="container">
    <div ng-controller="DashboardController as dashCtrl">
        <div class="row-fluid">
            <div class="span6">
                <h1 class="page-header">Admin Dashboard</h1>
            </div>
            <div class="span2">
                <button type="button" class="btn btn-primary" ng-click="dashCtrl.getProducts()">Get Products</button>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span8">
                <div ui-grid="dashCtrl.gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="grid"></div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.min.js"></script>
    
    <!-- Add your site's domain below -->
    <script src="http://enter-your-site-here/CMSScripts/Custom/dashboard.js"></script>
    
    <div 
</div>