Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Gordon Saxby 1465 posts 1887 karma points
    Jan 05, 2023 @ 10:36
    Gordon Saxby
    0

    Calling an async API from AngularJS

    I (currently) know very little about AngularJS which is making this task all the more interesting!

    I am creating a Dashboard to show data stored in a custom database table. There is also the ability to request an update of the content in the table.

    I initially wrote the API Controller to use async methods but I seemed to have trouble calling them from AngularJS so I have removed the async feature for now, but would like to add it back in.

    Do I need to use AngularJS "promise" in order to call async APIs? If so, could someone explain how I do that please.

    I currently have this:

    $scope.GetReviews = function () {
    $scope.buttonState = "busy";
    $scope.loading = true;

   var url = "/umbraco/backoffice/api/ReviewsFeedApi/GetReviewsData"
    $http.get(url).then(function (res) {
        $scope.loading = false;
        $scope.buttonState = "success";
   });
}

$scope.GetReviews();

    What do I need to change in order to support calling an async version of "GetReviewsData"?

    **Edit: I have reverted my code to use async calls and it seems to be working, (although I do have an issue when calling the update the second time!) so do I need to change anything or is the above code OK?

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Jan 05, 2023 @ 11:45
    Huw Reddick
    0

    I use the umbRequestHelper like below

    angular.module("umbraco.resources").factory("TagCloudResource", function ($http, umbRequestHelper) {
    return {
        cloudPreview: function (maxTags, tagGroup) {
            return umbRequestHelper.resourcePromise(
                $http.get('/umbraco/Surface/TagCloudSurface/TagCloud/?max=' + maxTags + '&group=' + tagGroup),
                'Failed getting preview markup'
            );
        }
    };
});
    Copy Link
  • Gordon Saxby 1465 posts 1887 karma points
    Jan 05, 2023 @ 13:50
    Gordon Saxby
    0

    Could you also show me how you call the function please, and how you then make use of the data returned.

    When I tried, none of the $scope variables I set seemed to have any values in them - but they did before using the factory method above.

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Jan 05, 2023 @ 15:04
    Huw Reddick
    0

    Hi Gordon,

    This is the code for my angular controller

    (function() {

    function tagCloudController($scope, $sce, $timeout,TagCloudResource, editorState, ) {
        try {
            $scope.language = editorState.getCurrent().variants.find(function (v) {
                return v.active;
            }).language.culture;            
        } catch (e) {
            $scope.language = null;
        } 


        $scope.id = editorState.getCurrent().id;
        $scope.loading = true;
        $scope.markup = $sce.trustAsHtml('Loading preview');


        function loadPreview(blockData) {
            $scope.markup = $sce.trustAsHtml('Loading preview');
            $scope.loading = true;

            TagCloudResource.cloudPreview(blockData.maxTags, blockData.tagGroup).then(function (data) {
                $scope.markup = $sce.trustAsHtml(data);
                $scope.loading = false;
            });
        }

        var timeoutPromise;
        $scope.$watchGroup(['block.data'], function (newValues, oldValues) {
            $timeout.cancel(timeoutPromise);
            timeoutPromise = $timeout(function () {
                loadPreview(newValues[0]);
            }, 500);
        }, true);
    }

    angular.module('umbraco')
        .controller('TagCloudController', tagCloudController);
})();

    The preview is called here

    TagCloudResource.cloudPreview(blockData.maxTags, blockData.tagGroup).then(function (data) {
                $scope.markup = $sce.trustAsHtml(data);
                $scope.loading = false;
            });
    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Jan 05, 2023 @ 15:06
    Huw Reddick
    0

    It is displayed in the html by binding 'markup'

    <div ng-click="block.edit()" class="blockelement__draggable-element" ng-controller="TagCloudController">
    <h4 >{{block.data.title}}</h4>
  <div ng-if="loading === false" ng-bind-html="markup" publication-check settings="block.settingsData"></div>

</div>
    Copy Link
  • Gordon Saxby 1465 posts 1887 karma points
    Jan 05, 2023 @ 17:29
    Gordon Saxby
    0

    Thanks very much for your help, I will check this out tomorrow :-)

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies