Angularny sposób, aby pobrać plik i wyświetlić ekran ładowania za pomocą $ resource

Question

Używam Angular js, aby pokazać ekran ładowania. Działa dla wszystkich wywołań usług REST z wyjątkiem usługi REST w celu pobrania pliku. Rozumiem, dlaczego to nie działa, ponieważ do pobrania nie robię żadnego połączenia serwisowego za pomocą $ resource; zamiast tego używam normalnego podejścia do pobierania pliku, dlatego kod Angular js nie ma żadnej kontroli przy uruchamianiu/kończeniu zgłoszenia serwisowego. Próbowałem użyć $ resource, aby trafić w tę usługę REST, ale otrzymuję dane z tej usługi iw tym przypadku ekran ładowania działał dobrze, ale nie wiem, jak używać tych danych do wyświetlania użytkownikowi w celu pobrania w kątowy sposób. Poniżej są wymagane szczegóły. Proszę pomóż.

Approach 1 stosując podejście iframe:

/*Download file */ 
      scope.downloadFile = function (fileId) { 
       //Show loading screen. (Somehow it is not working) 
       scope.loadingProjectFiles=true; 
       var fileDownloadURL = "/api/files/" + fileId + "/download"; 
       downloadURL(fileDownloadURL); 
       //Hide loading screen 
       scope.loadingProjectFiles=false; 
      }; 

      var $idown; // Keep it outside of the function, so it's initialized once. 
      var downloadURL = function (url) { 
       if ($idown) { 
        $idown.attr('src', url); 
       } else { 
        $idown = $('<iframe>', { id: 'idown', src: url }).hide().appendTo('body'); 
       } 
      }; 

Podejście 2 przy użyciu $ zasób (nie wiem, jak do wyświetlania danych na ekranie, aby pobrać)

/*Download file */ 
      scope.downloadFile = function (fileId) { 
       //Show loading screen (Here loading screen works). 
       scope.loadingProjectFiles=true;     
        //File download object 
        var fileDownloadObj = new DownloadFile(); 
       //Make server call to create new File 
        fileDownloadObj.$get({ fileid: fileid }, function (response) { 
         //Q? How to use the response data to display on UI as download popup 
         //Hide loading screen 
         scope.loadingProjectFiles=false; 
        }); 

      }; 

Answer 1

Oto niektóre pomysł jest dla drugie podejście, możesz pokazać użytkownikowi link po pobraniu:

• With a "data url". Prawdopodobnie niezły pomysł for large files.
• Adres URL taki jak "filesystem: mydownload.zip" Najpierw należy zapisać plik za pomocą interfejsu API systemu plików. Można znaleźć inspirację na html5rocks

Answer 2

Jest to poprawne wzór z serwisu $ zasobów:

scope.downloadFile = function (fileId) { 
    //Show loading screen (Here loading screen works). 
    scope.loadingProjectFiles=true;     
    var FileResource = $resource('/api/files/:idParam', {idParam:'@id'}); 
    //Make server call to retrieve a file 
    var yourFile = FileResource.$get({ id: fileId }, function() { 
     //Now (inside this callback) the response data is loaded inside the yourFile variable 
     //I know it's an ugly pattern but that's what $resource is about... 
     DoSomethingWithYourFile(yourFile); 
     //Hide loading screen 
     scope.loadingProjectFiles=false; 
    }); 
}; 

zgadzam się z Tobą, że to dziwne, wzór i różni się od innych API gdzie pobranych dane są przypisane do parametru w funkcji wywołania zwrotnego, stąd też masz zamieszanie.

Zwróć uwagę na nazwy i przypadki parametrów i zobacz, że są tu dwa przypisania, jeden pomiędzy wywołującym do obiektu $ resource i samego obiektu, a drugi między tym obiektem a adresem URL, który Kontrakt ten pobiera dane do pobrania.