在angularjs中使用不同的域进行开发和生产

我正在使用使用REST服务的AngularJS单页应用程序。前端应用程序是与后端分开开发的，因此在开发过程中，我们必须在AJAX调用的URL中对域名进行硬编码（我们启用了CORS）。但在生产的情况下，一切都在同一个域中运行，因此对域名进行硬编码看起来没有什么不好。有没有我们可以在开发过程中使用域名在url中进行ajax调用，并且在生产过程中不对域名进行硬编码？我正在使用gulp。在angularjs中使用不同的域进行开发和生产

来源

2016-06-16 VJAI

我已经在好几次使用过[gulp-ng-constant]（https://github.com/guzart/gulp-ng-constant）了。然后，我实现了一个'$ http' [拦截器]（https://docs.angularjs.org/api/ng/service/$http#interceptors），它预先设置了“API URL”（用gulp-ng-constant配置）到HTTP呼叫。 –

这听起来对我来说是个好主意。我会尝试的。 – VJAI

如果您张贴作为答案我可以upvote或接受为答案。 – VJAI

使用gulp-ng-constant与$http的例子：

在gulpfile.js以下任务将生成文件target/build/scripts/_config.js与内容angular.module('globals', []).constant('apiContextPath', '...');：

gulp.task('app.ngconstant', [], function() { 
    var ngConstant = require('gulp-ng-constant'), 
    var rename = require('gulp-rename'); 

    return 
     ngConstant({ 
      constants: { 
       apiContextPath: '.' // TODO Devise a way to set per environment; eg command line 
      }, 
      name: 'globals', 
      stream: true 
     }) 
     .pipe(rename('_config.js')) 
     .pipe(gulp.dest('target/build/scripts')); 
});

显然，你需要在你的（包装/缩小的）代码生成的文件。

东西沿着下面的代码将$httpProvider配置预先设置apiContextPath到以'/api/'开头的所有请求（即我们的REST端点）：

angular.module(...).config(['$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push(['globals', function(globals) { 
     return { 
      'request': function(config) { 
       if(config.url.indexOf('/api/') === 0) { 
        config.url = globals.apiContextPath + config.url; 
       } 
       return config; 
      } 
     }; 
    }]); 
}]);

（有相当多的其他配置选项，所以这只是我从事的一个较旧项目的一个例子。）

来源

2016-06-16 14:54:20

如果你还没有，你可以通过你的gulp构建一个参数来构建生产或开发模式。

根据该标志，你可以设置你的gulpfile一个baseUrl属性，用于包括（使用gulp-insert）到你的JavaScript建立之前，所有的角脚本的脚本：

'window.baseUrl = ' + baseUrl

然后你可以有在应用程序中的常数，你的服务使用来获得baseUrl：

angular.module('YourModule').constant('baseUrl', window.baseUrl);

来源

2016-06-16 13:51:15 DerekMT12

在这种情况下，在开发过程中，css/images也来自另一个域吗？我想要从本地机器加载css/images，只有AJAX调用必须打到不同的域。 – VJAI

您可以在应用程序中的任何位置使用'baseUrl'。除非您想要，否则不会影响图像的加载。因此，在你的服务中，你可以注入它，并建立像'$ http.get（baseUrl +'/ api/endpoint'）' – DerekMT12

这样的URL我在那里看到一个问题。目前在很多文件中有很多网址，并且很难去改变每个文件以预先设置baseurl。 – VJAI

在angularjs中使用不同的域进行开发和生产

回答

相关问题