Как сделать запросы на сервер API без жесткого кодирования URL?

Question

Я пытаюсь реализовать приложение с угловым 2 и должен делать запросы к моему серверу API. Тем не менее, я думаю, что это плохая идея для жесткого кодирования полного URL-адреса в каждом запросе, потому что он очень сильно изменится. Я посмотрел на этот пост: Set base url for angular 2 http requests

но это работает для бета-версии. Я использую RC6 и не могу заставить его работать. Любая помощь будет оценена по достоинству.

Answer 1

Если вы запустите свой json-сервер на том же сервере, который предоставляет ваш клиентский код, вам не нужно указывать порт в URL-адресе. Для других настроек URL-адресов (например, у меня есть все мои службы в/api /), я использую отдельный класс-помощник, который имеет дело со всей конфигурацией, и такой, и у этого есть/api/hardcoded, но он находится только в одном месте. Легкость изменения вручную или во время процесса сборки.

Класс может быть что-то вроде этого:

export class Configuration { 
    private static _apiUrl = "/api"; 
    private static _childUrl = `${Configuration._apiUrl}/child`; 

    public static apiUrl(url: string): string { 
     return `${this._apiUrl}/${url}`; 
    } 

    public static getChildComponentUrl(url: string): string { 
     return `${this._childUrl}/${url}`; 
    } 
} 

Answer 2

Если вы строите свое угловое приложение с помощью инструмента построения, такого как Gulp, вы можете управлять базовым URL-адресом своего приложения во время сборки. Он не позволяет вам переключать базовые URL-адреса во время выполнения, но это позволит вам, например, создать приложение, указанное на вашем локальном компьютере или сервере с помощью одной команды.

gulpfile.js:

var gulpUtil = require('gulp-util'); 
var gulpData = require('gulp-data'); 
var gulpTemplate = require('gulp-template'); 

var sourceDir = 'path/to/src'; 
var buildDir = 'path/to/build/target'; 

gulp.task('default', [], 
     function() { 
      return gulp.src(sourceDir + 'index.html') 
       .pipe(gulpData(function() { 
         return { 
          baseUrl : gulpUtil.env.baseUrl 
         }; 
        })) 
       .pipe(gulpTemplate()) 
       .pipe(gulp.dest(buildDir)); 
     }); 

, а затем в вашем index.html:

<script> 
    angular.module('myApp', []) 
    .provider('appConfigProvider', function() { 
     return { 
     $get: function() { 
      return { 
       baseUrl: '<%= baseUrl %>' 
      }; 
     } 
     }; 
    }); 
</script> 

Тогда при запуске глотка, обеспечить BaseUrl в качестве аргумента командной строки:

gulp --baseUrl https://my.server.com 

Здесь задается переменная среды, доступная внутри gulpUtil.env; вы также можете предоставить конфигурацию через, скажем, файл реквизита и реквизит gulp (хотя я его не использовал). Настройка угловых приложений с помощью одной команды - одно из моих любимых применений для диспетчеров, таких как Gulp.

Удачи вам!