在 AngularJS 应用中存储 URL 或 URL 域的最佳方式是什么?
What's the best way to store URLs, or URL domains, in AngularJS app?
我的 AngularJS 应用程序调用 API 当前托管在一项服务上,但之前托管在另一项服务上,并且在不久的将来可能会托管别处。
URL 正在定期更改。例如来自
myfirst.heroku.com/app/user/mike/profile
到
mysecond.bluemix.com/app/user/mike/profile
等等
我不想每次都更改每个位置的 URL,我只想更改 /app...
之前的部分。
在 Angular 应用程序中执行此操作的最佳方法是什么?
注意: 我在整个应用程序中使用的许多 URL 都位于作为依赖项添加到我的主应用程序的模块中。所以 Module1
和 Module2
都在它们的控制器和资源中使用 URL,然后包含在 MainApp
中。因此,对我来说,一个好的解决方案需要所有依赖应用程序都可以访问。可以吗
我想建议你必须使用 angular 常量,它类似于服务,但它创建一个常量值,可以在我们的 angular 项目中的任何地方注入。
这就是我们创建常量的方法
持续服务:
angular.module('AppName')
.constant('REST_END_POINT', 'https://rest.domain.com/');
控制器中的用法:
angular.module('AppName')
.controller('CTRL_NAME', ['REST_END_POINT', '$scope', function(REST_END_POINT, $scope){
//your business logic.
]);
我确实为此使用了请求拦截器
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;
}
}
}]);
在 app.config 中像
配置此拦截
csapp.config(["$httpProvider", function($httpProvider) {
$httpProvider.interceptors.push('MyHttpInterceptor');
});
现在您的所有 api 请求都将以 api.example.com
为前缀。
$location.host() 是客户端浏览器的 'prefix.domain.suffix'
您可以将 $location 注入任何范围或服务。
angular.module('app',[]).run(function($rootScope, $location){
$rootScope.host = $location.host();
})
笨蛋: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>
我的 AngularJS 应用程序调用 API 当前托管在一项服务上,但之前托管在另一项服务上,并且在不久的将来可能会托管别处。
URL 正在定期更改。例如来自
myfirst.heroku.com/app/user/mike/profile
到
mysecond.bluemix.com/app/user/mike/profile
等等
我不想每次都更改每个位置的 URL,我只想更改 /app...
之前的部分。
在 Angular 应用程序中执行此操作的最佳方法是什么?
注意: 我在整个应用程序中使用的许多 URL 都位于作为依赖项添加到我的主应用程序的模块中。所以 Module1
和 Module2
都在它们的控制器和资源中使用 URL,然后包含在 MainApp
中。因此,对我来说,一个好的解决方案需要所有依赖应用程序都可以访问。可以吗
我想建议你必须使用 angular 常量,它类似于服务,但它创建一个常量值,可以在我们的 angular 项目中的任何地方注入。
这就是我们创建常量的方法
持续服务:
angular.module('AppName')
.constant('REST_END_POINT', 'https://rest.domain.com/');
控制器中的用法:
angular.module('AppName')
.controller('CTRL_NAME', ['REST_END_POINT', '$scope', function(REST_END_POINT, $scope){
//your business logic.
]);
我确实为此使用了请求拦截器
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;
}
}
}]);
在 app.config 中像
配置此拦截csapp.config(["$httpProvider", function($httpProvider) {
$httpProvider.interceptors.push('MyHttpInterceptor');
});
现在您的所有 api 请求都将以 api.example.com
为前缀。
$location.host() 是客户端浏览器的 'prefix.domain.suffix' 您可以将 $location 注入任何范围或服务。
angular.module('app',[]).run(function($rootScope, $location){
$rootScope.host = $location.host();
})
笨蛋: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>