AngularJS - check if folder exists

Question

So I'm trying to check if a folder exist in order to decide what files to make an ng-include with.

What I have so far is this:

$scope.isVisible = {
        buttons: checkForClientOverwride('buttons'),
        itemList: checkForClientOverwride('itemList'),
        // ... lots more variables
        onLoad: checkForClientOverwride('onLoad'),
        configurationManager: checkForClientOverwride('configurationManager')
    };

function checkForClientOverwride(fn){
        var result = {
                url: 'app/modules/functions/' + fn + '/' + fn + '.html'
            },
            clientPath = 'app/modules/client code/' + fn + '/' + fn + '.html';

        if(view.viewFunctions[fn] === undefined){
            return false;
        }

        $http.get(clientPath)
            .then(function(response){
                console.info('response : ', clientPath, response);
                result.url = clientPath;
            })
            .catch(function(error){
                console.info('error : ', clientPath, error);
            })
            .finally(function(){
                console.info('result : ', result);
                return result;
                $scope.isVisible[fn] = result;
            });
    };

The view looks like this:

<div ng-if="isVisible.itemList" ng-include="'app/modules/functions/itemList/itemList.html'"></div>
<div ng-if="isVisible.inputFields" ng-include="'app/modules/functions/inputFields/inputFields.html'"></div>
<div ng-if="isVisible.configurationManager" ng-include="{{ isVisible.configurationManager.url }}"></div>
<div ng-if="isVisible.calculate" ng-include="'app/modules/functions/calculations/calculations.html'"></div>

My tree structure is this:

+ app
+--+ modules
|  +--+ functions
|  |  +--+ buttons
|  |  |  +--- buttons.html
|  |  +--+ itemList
|  |  |  +--- itemList.html
|  |  +--+ onLoad
|  |  |  +--- onLoad.html
|  |  +--+ configurationManager
|  |  |  +--- configurationManager.html
|  +--+ client code
|  |  +--+ configurationManager
|  |  |  +--- configurationManager.html
+--- core.js
+--- route.js
+ index.html

The code checks if a file exists, but how can I check if a folder exists. Also is there a way to have this load synchronously.

EDIT

When trying to make a $http.get on the folder app/modules/client code I get the following error in my console.log

config: Object
data: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ↵<html xmlns="http://www.w3.org/1999/xhtml"> ↵<head> ↵<title>IIS 10.0 Detaljeret fejl - 403.14 - Forbidden</title> ↵<style type="text/css"> ↵<!-- ↵body{margin:0;font-size:.7em;font-family:Verdana,Arial,Helvetica,sans-serif;} ↵code{margin:0;color:#006600;font-size:1.1em;font-weight:bold;} ↵.config_source code{font-size:.8em;color:#000000;} ↵pre{margin:0;font-size:1.4em;word-wrap:break-word;} ↵ul,ol{margin:10px 0 10px 5px;} ↵ul.first,ol.first{margin-top:5px;} ↵fieldset{padding:0 15px 10px 15px;word-break:break-all;} ↵.summary-container fieldset{padding-bottom:5px;margin-top:4px;} ↵legend.no-expand-all{padding:2px 15px 4px 10px;margin:0 0 0 -12px;} ↵legend{color:#333333;;margin:4px 0 8px -12px;_margin-top:0px; ↵font-weight:bold;font-size:1em;} ↵a:link,a:visited{color:#007EFF;font-weight:bold;} ↵a:hover{text-decoration:none;} ↵h1{font-size:2.4em;margin:0;color:#FFF;} ↵h2{font-size:1.7em;margin:0;color:#CC0000;} ↵h3{font-size:1.4em;margin:10px 0 0 0;color:#CC0000;} ↵h4{font-size:1.2em;margin:10px 0 5px 0; ↵}#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:"trebuchet MS",Verdana,sans-serif; ↵ color:#FFF;background-color:#5C87B2; ↵}#content{margin:0 0 0 2%;position:relative;} ↵.summary-container,.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;} ↵.content-container p{margin:0 0 10px 0; ↵}#details-left{width:35%;float:left;margin-right:2%; ↵}#details-right{width:63%;float:left;overflow:hidden; ↵}#server_version{width:96%;_height:1px;min-height:1px;margin:0 0 5px 0;padding:11px 2% 8px 2%;color:#FFFFFF; ↵ background-color:#5A7FA5;border-bottom:1px solid #C1CFDD;border-top:1px solid #4A6C8E;font-weight:normal; ↵ font-size:1em;color:#FFF;text-align:right; ↵}#server_version p{margin:5px 0;} ↵table{margin:4px 0 4px 0;width:100%;border:none;} ↵td,th{vertical-align:top;padding:3px 0;text-align:left;font-weight:normal;border:none;} ↵th{width:30%;text-align:right;padding-right:2%;font-weight:bold;} ↵thead th{background-color:#ebebeb;width:25%; ↵}#details-right th{width:20%;} ↵table tr.alt td,table tr.alt th{} ↵.highlight-code{color:#CC0000;font-weight:bold;font-style:italic;} ↵.clear{clear:both;} ↵.preferred{padding:0 5px 2px 5px;font-weight:normal;background:#006633;color:#FFF;font-size:.8em;} ↵--> ↵</style> ↵ ↵</head> ↵<body> ↵<div id="content"> ↵<div class="content-container"> ↵  <h3>HTTP-fejl 403.14 - Forbidden</h3> ↵  <h4>Webserveren er konfigureret til ikke at vise indholdet af denne mappe.</h4> ↵</div> ↵<div class="content-container"> ↵ <fieldset><h4>Mest sandsynlige årsager:</h4> ↵  <ul>     <li>Der er ikke konfigureret et standarddokument for den ønskede URL-adresse, og gennemsyn af mapper er ikke aktiveret på serveren.</li> </ul> ↵ </fieldset> ↵</div> ↵<div class="content-container"> ↵ <fieldset><h4>Prøv at:</h4> ↵  <ul>     <li>Hvis du ikke vil aktivere gennemsyn af mapper, skal du sørge for, at et standarddokument er konfigureret, og at filen findes.</li>  <li>           Aktiver gennemsyn af mapper med IIS Manager.           <ol>          <li>Åbn IIS Manager.</li>           <li>Dobbeltklik på Gennemsyn af mapper i visningen Funktioner.</li>             <li>Klik på Aktiver i ruden Handlinger på siden Gennemsyn af mapper.</li>       </ol>   </li>   <li>Kontroller, at attributten configuration/system.webServer/directoryBrowse@enabled er indstillet til sand i webstedets eller programmets konfigurationsfil.</li> </ul> ↵ </fieldset> ↵</div> ↵ ↵<div class="content-container"> ↵ <fieldset><h4>Detaljerede fejloplysninger:</h4> ↵  <div id="details-left"> ↵   <table border="0" cellpadding="0" cellspacing="0"> ↵    <tr class="alt"><th>Modul</th><td>&nbsp;&nbsp;&nbsp;DirectoryListingModule</td></tr> ↵    <tr><th>Besked</th><td>&nbsp;&nbsp;&nbsp;ExecuteRequestHandler</td></tr> ↵    <tr class="alt"><th>Handler</th><td>&nbsp;&nbsp;&nbsp;StaticFile</td></tr> ↵    <tr><th>Fejlkode</th><td>&nbsp;&nbsp;&nbsp;0x00000000</td></tr> ↵     ↵   </table> ↵  </div> ↵  <div id="details-right"> ↵   <table border="0" cellpadding="0" cellspacing="0"> ↵    <tr class="alt"><th>Anmodet URL-adresse</th><td>&nbsp;&nbsp;&nbsp;http://localhost:80/Configuration Manager Development/app/modules/client code/</td></tr> ↵    <tr><th>Fysisk sti</th><td>&nbsp;&nbsp;&nbsp;C:\Users\mik\Desktop\Code\REL_3_05\WebSystem\SPWEBAPI\Configuration Manager development\app\modules\client code\</td></tr> ↵    <tr class="alt"><th>Logonmetode</th><td>&nbsp;&nbsp;&nbsp;Anonym</td></tr> ↵    <tr><th>Logonbruger</th><td>&nbsp;&nbsp;&nbsp;Anonym</td></tr> ↵     ↵   </table> ↵   <div class="clear"></div> ↵  </div> ↵ </fieldset> ↵</div> ↵ ↵<div class="content-container"> ↵ <fieldset><h4>Flere oplysninger:</h4> ↵  Denne fejl opstår, når der ikke er angivet et dokument i URL-adressen, ikke er angivet et standarddokument for webstedet eller programmet, og mappevisning ikke er aktiveret for webstedet eller programmet. Denne indstilling kan være deaktiveret med vilje for at beskytte serverens indhold. ↵  <p><a href="http://go.microsoft.com/fwlink/?LinkID=62293&amp;IIS70Error=403,14,0x00000000,10586">Se flere oplysninger &raquo;</a></p> ↵   ↵ </fieldset> ↵</div> ↵</div> ↵</body> ↵</html> ↵"
headers: (c)
    arguments: (...)
    caller: (...)
    length: 1
    name: ""
    prototype: Object
    __proto__: ()
    <function scope>
status: 403
statusText: "Forbidden"

What does your web server return when you try to access a "folder"...? — deceze
– deceze ♦, Commented Mar 2, 2016 at 15:04
Well, if it's 403 for existing folders and 404 for non-existing folders, you could use that to figure it out. But really: you should have server-side code return the information clearly instead of poking around the HTTP server from the client. — deceze
– deceze ♦, Commented Mar 2, 2016 at 15:18

Michael Tot Korsgaard · Accepted Answer · 2016-03-02 16:03:28Z

People have told me it's not a good idea to look for server side folders from the client, however with the suggestion from @deceze I came up with this solution:

function initialize(){
        var functions = ['buttons', 'itemList', 'allowPrint', 'datePicker', 'pickWeek', 'calculate', 'summarize', 'dropdown', 'inputFields', 'onLoad', 'configurationManager'],
            visible = {};

        for(var i = 0; i < functions.length; i++){
            var fn = functions[i];
            checkForClientOverwride(fn);
        }

        $scope.isVisible = visible;
    };

    function checkForClientOverwride(fn){
        var baseUrl = 'app/modules/functions/' + fn,
            clientPath = 'app/modules/client code/' + fn;

        if(view.viewFunctions[fn] === undefined){
            return undefined;
        }

        $http.get(clientPath)
            .then(function(response){
                baseUrl = clientPath;
            })
            .catch(function(error){
                if(error.status === 403){ // Folder found but access is denied
                    baseUrl = clientPath;
                }
            })
            .finally(function(){
                var result = {
                    url: baseUrl + '/' + fn + '.html'
                };

                $scope.isVisible[fn] = result;
            });
    };

When looking for the folder we get a 403 - access forbidden error, telling us that the folder exists but we are not allowed to access it.

Collectives™ on Stack Overflow

AngularJS - check if folder exists

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related