2015-01-01 12 views
6

Meine AngularJS-App ruft Aufrufe an eine API ab, die derzeit bei einem Dienst gehostet wird, aber zuvor bei einem anderen gehostet wurde und in naher Zukunft wahrscheinlich noch irgendwo gehostet wird.Wie speichern Sie URLs oder URL-Domains am besten in der AngularJS App?

Die URL ändert sich regelmäßig. Zum Beispiel von

myfirst.heroku.com/app/user/mike/profile 

zu

mysecond.bluemix.com/app/user/mike/profile 

usw.

Anstatt die URL in jedem Ort jedes Mal ändern, möchte ich nur noch vor dem /app... den Teil ändern.

In einer Angular App, was ist der beste Weg, dies zu tun?

HINWEIS: Viele der URLs, die ich in der App verwende, sind in Modulen, die als Abhängigkeiten zu meiner Hauptanwendung hinzugefügt werden. So verwenden Module1 und Module2 beide die URL in ihren Controllern und Ressourcen und sind dann in MainApp enthalten. Also eine gute Lösung für mich muss für alle abhängigen Apps zugänglich sein. Ist das möglich.

+0

Verwendung .value() oder .contant() und injizieren sie in – Martin

Antwort

12

Ich möchte Ihnen vorschlagen, dass Sie Winkelkonstante verwenden müssen, es ähnelt einem Service, aber es schafft einen konstanten Wert, der überall in unserem eckigen Projekt injiziert werden kann.

Dies ist, wie wir konstant

Constant Dienst erstellen:

angular.module('AppName') 
.constant('REST_END_POINT', 'https://rest.domain.com/'); 

Nutzungen in der Steuerung:

angular.module('AppName') 
.controller('CTRL_NAME', ['REST_END_POINT', '$scope', function(REST_END_POINT, $scope){ 
     //your business logic. 
]); 
+0

Wenn 'AppName' anderen Modulen in sie injiziert ist, kann Ich verwende die Konstante 'REST_END_POINT' auch in diesen Modulen? – CodyBugstein

+1

Wenn Sie mit dem AppName-Modul als Projekt arbeiten und unterschiedliche Module mit eingefügten Modulen verwenden, kann dieser REST_END_POINT-Dienst nur innerhalb des AppName verwendet werden, da der REST_END_POINT-Dienst unter AppName-Modul erstellt wird und daher nicht zugänglich ist. Wenn Sie dies wirklich in verschiedenen Modulen verwenden möchten, sollten Sie ein anderes Modul mit dem Namen RestApp erstellen, das den REST_END_POINT-Dienst haben wird. Damit können Sie das RestApp-Modul schließlich genau so wie andere Module einfügen. – CrazyGeek

+0

Was ich getan habe, war, wie CrazyGeek beschrieben hat, ein neues Modul, das alle verschiedenen Arten von Konstanten enthielt, und es in jedes Modul zu injizieren, das es benötigt. – CodyBugstein

0

I Anfrage Interceptor für dieses

tun verwenden
csapp.factory('MyHttpInterceptor', [function() { 

     var requestInterceptor = function (config) { 

      var prefix = "http://api.example.com"; 

      if (config.url.indexOf("/api/") !== -1) { 
       config.url = prefix + config.url; 
      } 
     } 
}]); 

configure diese abfangen in app.config wie

csapp.config(["$httpProvider", function($httpProvider) { 
     $httpProvider.interceptors.push('MyHttpInterceptor'); 
}); 

jetzt alle Ihre api Anfragen würden mit api.example.com vorangestellt werden.

+0

wo wird dieser Interceptor zum '$ httpProvider' hinzugefügt? – CodyBugstein

+1

aktualisiert gemäß den Kommentaren – harishr

0

$ location.host() ist der 'prefix.domain.suffix' des Client-Browsers Sie können $ location in jeden Bereich oder Dienst injizieren.

angular.module('app',[]).run(function($rootScope, $location){ 
    $rootScope.host = $location.host(); 
}) 

Plunk. http://plnkr.co/edit/gDgrlwZFyWNKUJgbHHKj?p=preview

<!DOCTYPE html> 
 
<html ng-app="app"> 
 
    <head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script> 
 
    </head> 
 
    <body> 
 
    <i>Host:</i> 
 
    <h1>{{host}}</h1> 
 
    <script> 
 
     angular.module('app',[]).run(function($rootScope, $location){ 
 
     $rootScope.host = $location.host(); 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

+1

CrazyGeek beantwortet Ihre Frage genauer, ich erhalte nur den Schritt der Notwendigkeit, den Host manuell zu ändern. – irth

+0

THanks für die coole Spitze. Ich werde diese Lösung nicht genau verwenden, aber gut zu wissen – CodyBugstein