2016-10-26 5 views
0

config.jsAngularJS - Dynamische URL mit ID

angular.module('config', []).constant('ENV', 
    { 
     name: 'My Angular Project', 
     apiEndPoint: 'http://SOMEIP/myServer', //API host, 
     adminUrl:'/admin/regionid/site/siteid/admin/regionid', //endpoint 
     loginUrl:'/login/regionid/site/siteid/device' 

    }); 

controller.js

this.userLogin = function(username, password) { 

var adminServicePath = ENV.apiEndPoint + ENV.adminUrl 
//final url = http://SOMEIP/myServer/admin/1/site/1/admin/1 

var loginServicePath = ENV.apiEndPoint + ENV.loginUrl 
//final url = http://SOMEIP/myServer/login/2/site/2/device 


return $http({ 
      method: 'POST', 
      url: adminServicePath, 
      headers: {      
       "Authorization": "Basic ", 
       "Content-Type": "application/x-www-form-urlencoded" 
       } 
     }) 

}; 

Hier bin ich Anfügen API mit Endpunkt eine vollständige URL zu bilden. Mein Problem ist regiondid und siteid sind dynamisch. Nachdem sich der Benutzer angemeldet hat, ruft eine REST-API-Anforderung als Antwort siteid und regionid ab.

  • Wie ersetze ich dynamisch siteid und regionid in URL mit IDs in API Antwort erhalten? Rufen Sie nach dem Empfangen von IDs als Antwort eine Funktion auf, die den Wert ersetzt.

Antwort

0

können Sie die Verwendung String.prototype.replace(substr, newsubstr)

Sie regionID halten können statt ?

var ENV = { 
 
    name: 'My Angular Project', 
 
    apiEndPoint: 'http://SOMEIP/myServer', //API host, 
 
    adminUrl: '/admin/?/site/?/admin/?', //endpoint 
 
    loginUrl: '/login/?/site/?/device' 
 

 
}; 
 

 

 
var adminServicePath = ENV.apiEndPoint + ENV.adminUrl.replace("?", 1).replace("?", 1).replace("?", 1); 
 
console.log("Final url admin : " + adminServicePath); 
 

 
var loginServicePath = ENV.apiEndPoint + ENV.loginUrl.replace("?", 2).replace("?", 2); 
 
console.log("Final url login : " + loginServicePath);

0

Ich gehe davon aus, dass das werde siteid und die regionid kann nur erteilen die Antwort auf den Anmeldeendpunkt.

Die Verwendung einer Konstanten ist aus naheliegenden Gründen nicht die beste Idee (d. H. Sie sind konstant und können nicht zu der Zeit erstellt werden, zu der sie erstellt werden sollen).

Stattdessen können Sie eines der folgenden Dinge tun - eine einfache Lösung, die wahrscheinlich für viele Anwendungsfälle funktioniert, wäre das Erstellen eines Anmeldedienstes, der Ihren API-Aufruf umschließt und dann einen Wert entweder im Dienst oder einem anderen Dienst festlegt Service, der überall dort eingesetzt werden kann, wo Sie ihn brauchen.

Es könnte wie folgt aussehen:.

angular.module('app') 
    .service('loginService', function($http) { 
    var siteId, 
     regionId; 

    function login(username, password) { 
     return $http({ 
     method: 'POST', 
     url: '<login endpoint here>', 
     headers: {      
      "Authorization": "Basic ", 
      "Content-Type": "application/x-www-form-urlencoded" 
     } 
     }) 
     .then(function(result) { 
     siteId = result.siteId; 
     regionId = result.regionId; 
     }); 
    } 
); 

Dies macht die Werte zur Verfügung, wann immer Sie brauchen in einen API-Aufruf zu machen, nach der Anmeldung Dies ist jedoch nicht groß ist, da Sie injizieren müssen die loginService in jedem Controller/Service, der es benötigt, und dieser Controller/Service möglicherweise nicht wirklich kümmern sich um den Login-Service überhaupt.

Ein verbesserter Ansatz könnte darin bestehen, einen API-Dienst zu haben, der die http gets/sets/puts/posts/was auch immer ausführt und auf den Ihre Datenzugriffsebene zugreift. Innerhalb dieses Service können Sie die siteid und regionid einstellen/erhalten.

Es könnte wie folgt aussehen:

angular.module('app') 
    .service('api', function($http) { 
    var siteId, 
     regionId; 

    var defaultHeaders = { 
     "Authorization": "Basic ", 
     "Content-Type": "application/x-www-form-urlencoded" 
    }; 

    function post(url, options) { 
     return $http({ 
     method: 'POST', 
     url: url, 
     headers: options.headers ? options.headers : defaultHeaders 
     }); 
    } 

    // Other functions to perform HTTP verbs... 
    }); 

angular.module('app') 
    .service('loginService', function(api) { 
    function login(username, password) { 

     api.post('urlHere', options) 
     .then(function(result) { 
      api.siteId = result.siteId; 
      api.regionId = result.siteId; 
     }); 
    } 
    }); 

Sie dann die siteid zugreifen und regionid wo Sie möchten.

Zum Beispiel:

angular.module('app') 
    .controller('someService', function(api) { 
    function doSomethingWithTheApi() { 
     var url = 'www.google.com/' + api.siteId + '/' + api.regionId + 'whatever-else'; 
     return api.post(url, {}); 
    } 
); 

Hinweis: Der obige Code ist nicht vollständig, aber es gibt Ihnen eine sehr gute Idee von dem Ansatz, dass ist recht sauber nehmen könnte, nicht zu hacky und leicht überprüfbar ist :)

Hoffe, dass hilft!

+0

'Funktion Post (URL, Parameter, Optionen) { // Code, um Ihre Post hier zu machen - denken Sie daran, ein Versprechen zurückzugeben. } bedeutet API-Aufruf zum Abrufen von Site-ID und Region-ID als Antwort? Was könnten Parameter in 'api.post ('urlHere', params, options)' sein? URL wird mehrere sein – Slimshadddyyy

+0

Oh richtig - ich meinte, dass es ein Objekt sein könnte, das die Header für Ihre Anfrage enthält (zB 'headers: {" Authorization ":" Basic "," Content-Type ":" application/x-www- form-urlencoded "}'. Sie können es so anpassen, wie Sie möchten :) Ich werde den Code aktualisieren, um Ihnen zu zeigen, was ich meine. –

+0

Wie ich bereits erwähnt habe, muss der Code, den ich Ihnen gegeben habe, an Ihre Bedürfnisse angepasst werden, aber er beschreibt auf jeden Fall den Gesamtansatz für die Lösung des Problems: –

0

statt Konstante, können Sie Wert verwenden.

angular.module('config', []).value('ENV', 
    { 
     name: 'My Angular Project', 
     apiEndPoint: '', //API host, 
     adminUrl:'', //endpoint 
     loginUrl:'' 

    }); 

Inject ENV und alle Werte nach API-Aufruf setzen.

Die Werte werden jedoch möglicherweise auf den Standardwert zurückgesetzt, sobald Sie den Browser aktualisieren.