calling an async api from angularjs

Press Ctrl / CMD + C to copy this to your clipboard.

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 1444 posts 1855 karma points

Jan 05, 2023 @ 10:36
0

Calling an async API from AngularJS

Using Umbraco And Getting Started

Umbraco 9
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 1746 posts 6110 karma points MVP c-trib

Jan 05, 2023 @ 11:45

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 1444 posts 1855 karma points

Jan 05, 2023 @ 13:50

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 1746 posts 6110 karma points MVP c-trib

Jan 05, 2023 @ 15:04

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 1746 posts 6110 karma points MVP c-trib

Jan 05, 2023 @ 15:06

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 1444 posts 1855 karma points

Jan 05, 2023 @ 17:29

0

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

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?