在AngularJS应用程序中存储URL或URL域的最佳方法是什么?

时间:2021-02-24 20:09:39

My AngularJS app makes calls to an API which is currently hosted at one service, but was previously hosted at a different one, and in the near future is likely to be hosted yet somewhere else.

我的AngularJS应用程序调用当前托管在一个服务上的API,但之前托管在另一个服务上,并且在不久的将来可能会在其他地方托管。

The URL is regularly changing. For example from

URL会定期更改。例如来自

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

to

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

etc.

等等

Instead of changing the URL in every location everytime, I want to just have to change the part before the /app....

我不想每次都改变每个位置的URL,我只想在/ app之前更改部分....

In an Angular App what is the best way to do this?

在Angular App中,最好的方法是什么?

NOTE: Many of the URLs I use throughout the app, are in modules that are added as dependencies to my main app. So Module1 and Module2 both use the URL in their controllers and resources and are then included in MainApp. So a good solution for me needs to be accessible to all dependee apps. Is that possible.

注意:我在整个应用程序中使用的许多URL都在模块中,这些模块作为依赖项添加到我的主应用程序中。因此,Module1和Module2都在其控制器和资源中使用URL,然后包含在MainApp中。因此,所有dependee应用程序都需要访问一个很好的解决方案。那可能吗。

3 个解决方案

#1


12  

I would like to suggest you that you must use angular constant, Its similar to a service but it creates a constant value which can be inject everywhere in our angular project.

我想建议你必须使用角度常数,它类似于服务,但它会创建一个常量值,可以在我们的角度项目中随处注入。

This is how we can create constant

这就是我们如何创造常数

Constant service:

持续服务:

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

Usages in controller:

控制器中的用法:

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

#2


0  

$location.host() is the client browser's 'prefix.domain.suffix' You can inject $location into whatever scope or service.

$ location.host()是客户端浏览器的'prefix.domain.suffix'您可以将$ location注入任何范围或服务。

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

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

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>

#3


0  

I do use request interceptor for this

我确实使用请求拦截器

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 this intercept in app.config like

在app.config中配置这个拦截就像

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

now all your api requests would be prefixed with api.example.com.

现在你所有的api请求都会以api.example.com为前缀。

#1


12  

I would like to suggest you that you must use angular constant, Its similar to a service but it creates a constant value which can be inject everywhere in our angular project.

我想建议你必须使用角度常数,它类似于服务,但它会创建一个常量值,可以在我们的角度项目中随处注入。

This is how we can create constant

这就是我们如何创造常数

Constant service:

持续服务:

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

Usages in controller:

控制器中的用法:

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

#2


0  

$location.host() is the client browser's 'prefix.domain.suffix' You can inject $location into whatever scope or service.

$ location.host()是客户端浏览器的'prefix.domain.suffix'您可以将$ location注入任何范围或服务。

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

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

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>

#3


0  

I do use request interceptor for this

我确实使用请求拦截器

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 this intercept in app.config like

在app.config中配置这个拦截就像

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

now all your api requests would be prefixed with api.example.com.

现在你所有的api请求都会以api.example.com为前缀。