Die Web Agenten Die Web Agenten - 25 days ago 13
AngularJS Question

Angular JS Pop over on every page of the application

I am working on an Angular 1 web app and want to implement a popover that does a background check for an adress, while the user is navigating through the app.

The user clicks on an icon, the pop over opens, the user enters some credentials and the background check starts, while the pop over dissapears.

As soon as the background check is done and the server delivers the result, the pop over opens - no matter, on which page of the application the user navigates - and delivers the result.

What would be the best way to implement such a logic in Angular 1?
Should this be done as a component?
What could the code look like?

Any hints and help are very appreciated and welcome

Answer

There's a lot going on in this question, but I will try to help.

A. The Background Check API call

It sounds like the user is going to request a "background check", which will make an AJAX call to the server. I understand from your question that the response does not come back immediately, but rather takes a few seconds or minutes.

My approach would be to poll the server every few seconds to see if the response is ready. You need to do this from the client side to the server side, since there's no standard way to "push" the response from the server to the client (yet). So you're saving the result of the background check in the database and waiting for the client to check if it's ready.

I'd put a directive on some global page element like the header. This directive sends an AJAX request every X seconds to see if the background check is ready. Use angular's $timeout and $http services for this. To keep track of whether the user has requested a background check and what their user ID is, you could use cookies. I have used ngCookies before and like it just fine.

B. Popups and Modals in Angular

My basic approach to popups or modals is to attach a full-screen <div> to the body element, set it to fixed positioning, and give it a high z-index.

I have found it useful to make a modal factory to keep track of global modal logic. There are probably lots of open source options out there too, although I haven't really experimented.

Here's my basic modal factory:

app.factory('modalFactory', [ '$templateRequest', '$sce', '$compile', function( $templateRequest, $sce, $compile ) {

    var modalFactory = {
        open: false,
        modal: undefined
    };

    modalFactory.create = function($scope, parent, templateUrl){
        $templateRequest(templateUrl).then(function(html) {
            modalFactory.modal = angular.element(html);
            modalFactory.open = true;
            parent.append(modalFactory.modal);
            $compile(modalFactory.modal)($scope);
        }, function() {
            // An error has occurred
        });
    };

    modalFactory.close = function(){
        modalFactory.modal.remove();
        modalFactory.open = false;
    };

    return modalFactory;
}])

Then, you can inject it as a dependency and use it from another directive like this:

app.directive('openSomeModal', ['modalFactory', function($modal){
    return {
        link: function($scope, $element){
            $element.on('click', function(){
                $modal.create($scope, document.body, 'path/to/template.html');
            });
        }
    };
}]);
Comments