角JS的方式来下载文件，并显示加载屏幕使用$资源 [英] Angular js way to download file and show loading screen using the $resource

问题描述

我使用的角度JS来显示加载屏幕。它适用于所有的REST服务调用REST除外服务下载的文件。我明白为什么它不下载，因为工作我不使用$资源做任何服务电话;不是，我使用正常方法来下载文件，因此角的js code不会对任何启动控制/完成服务请求。我试图用$资源来打这个REST服务不过我从这项服务在这种情况下加载屏幕工作正常但不知道如何使用这些数据来显示给用户的角度下载方式获取数据。以下是所需的详细信息。请帮助。

方法1使用iframe的方法：

  / *下载文件* /
            scope.downloadFile =功能（FILEID）{
                //显示加载屏幕。 （不知为什么它不工作）
                scope.loadingProjectFiles = TRUE;
                VAR fileDownloadURL =/ API /文件/+ FILEID +/下载;
                downloadURL（fileDownloadURL）;
              //隐藏加载屏幕
                scope.loadingProjectFiles = FALSE;
            };            变量$ idown; //保持它的功能之外，因此它的初始化一次。
            VAR downloadURL =功能（URL）{
                如果（$ idown）{
                    $ idown.attr（'src'中，URL）;
                }其他{
                    $ idown = $（'＆LT; IFRAME＆GT;'，{ID：'idown'，SRC：URL}）。隐藏（）appendTo（身体）;
                }
            };
 

方法2使用$资源（不知道如何在屏幕上显示的数据下载）

  / *下载文件* /
            scope.downloadFile =功能（FILEID）{
                //显示加载屏幕（这里的载入画面的作品）。
                scope.loadingProjectFiles = TRUE;
                  //文件下载对象
                    VAR fileDownloadObj =新DownloadFile（）;
                 //使服务器调用创建新文件
                    fileDownloadObj $ GET（{FILEID：FILEID}，函数（响应）{
                        // Q＆如何使用响应数据在UI显示为弹出下载
                        //隐藏加载屏幕
                        scope.loadingProjectFiles = FALSE;
                    }）;            };
 

解决方案

这是在$资源服务的正确模式：

  scope.downloadFile =功能（FILEID）{
    //显示加载屏幕（这里的载入画面的作品）。
    scope.loadingProjectFiles = TRUE;
    VAR FileResource = $资源（'/ API /文件/：idParam'，{idParam：@ ID'}）;
    //使服务器调用来检索文件
    VAR yourFile = FileResource $得到（{ID：FILEID}，函数（）{
        //现在（这个回调中）响应数据加载yourFile变量中
        //我知道这是一个丑陋的模式，但那就是$资源大约是...
        DoSomethingWithYourFile（yourFile）;
        //隐藏加载屏幕
        scope.loadingProjectFiles = FALSE;
    }）;
 };
 

我同意你的看法，这是一个奇怪的模式，是在哪里下载的数据被分配到一个参数回调函数的API等不同，因此，你的困惑。

讲究的名称和参数的情况下，并期待有在这里涉及到两个映射，一个呼叫者到$资源对象和对象本身之间，以及另一个该对象和链接之间，它contructs用于下载的实际数据。

I am using Angular js to show loading screen. It works for all the REST services call except REST service to download the file. I understand why it is not working because for download I am not making any service call using $resource; instead of that I am using normal approach to download the file therefore Angular js code doesn't have any control on start/finish the service request. I tried to use $resource to hit this REST service however I am getting the data from this service and in this case loading screen was working fine however not sure how to use this data to display to user to download in angular way. Following are required details. Please help.

Approach 1 using iframe approach:

 /*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');
                }
            };

Approach 2 using $resource (Not sure how to display data on screen to download)

/*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;
                    });

            };

解决方案

This is the correct pattern with the $resource service:

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;
    });
 };

I agree with you that this is a weird pattern and is different of other APIs where the downloaded data is assigned to a parameter in a callback function, hence your confusion.

Pay attention to the names and the cases of the parameters, and look that there're two mappings involved here, one between the caller to the $resource object and the object itself, and another between this object and the url that it contructs for downloading the actual data.

这篇关于角JS的方式来下载文件，并显示加载屏幕使用$资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！