如何使用 AngularJS 为 HTTP 调用和图像加载设置基本 URL答案

【问题标题】：How to set a base URL for HTTP calls and image loading with AngularJS如何使用 AngularJS 为 HTTP 调用和图像加载设置基本 URL
【发布时间】：2016-02-07 22:26:50
【问题描述】：

我一直在寻找，到目前为止我找不到处理以下情况的方法：

我想要一个代表我的域的变量，例如http://example.com/myserver/。我想要访问的任何内容都在该域中进行了子本地化。在所有Services 以及 HTML（用于图像加载目的）中，我都应该可以使用这样的变量。例如：

angular.module('App', ['App.providers', 'App.services', 'App.controllers', 'App.directives']).run('EndpointFactory', [function (EndpointFactory) {
    EndpointFactory.BASE = 'http://www.example.com/mydata';
}]);

angular.module('App.services', []).factory('PrizeService', ['$http', 'EndpointFactory', function ($http, EndpointFactory) {
    return {
        index: function () {
            return $http.post(EndpointFactory.BASE + '/prizes', {});
        }
    };
}]);

上面的这个例子是我失败的试验之一。虽然我不喜欢必须在每个 Service 中注入 Factory 的想法，但我愿意这样做，直到遇到 <img ng-src /> 标签。

<div>
   <img ng-src="{{EndpointFactory.BASE + prize.imagePath}}" />
</div>

我无法从此指令访问 EndpointFactory，我不想将数据从工厂复制到每个控制器中的 $scope。

【问题讨论】：

标签： javascript html angularjs angularjs-scope angularjs-factory

【解决方案1】：

这是一个

Angular 6 示例（我不确定它是否适用于 AngularJs）

与您想要的有关，我发现这是最干净的方式。我希望这对您有意义并节省您一些时间。祝你好运！

在共享文件夹中新建一个名为 baseurl.ts 的文件，并更新其内容如下：

export const baseURL = 'http://localhost:3000/';

打开 AppModule，导入 baseURL 并更新 @NgModule 装饰器的 AppModule 的 providers 属性如下：

. . .
import { baseURL } from './shared/baseurl';


. . .


providers: [

  . . .

  {provide: 'BaseURL', useValue: baseURL}
  ]

更新菜单组件打开 menu.component.ts 并更新如下：

import { Component, OnInit, Inject } from '@angular/core';

. . .

  constructor(private dishService: DishService,
    @Inject('BaseURL') private BaseURL) { }
    
. . .

打开 menu.component.html 并更新如下：

. . .
        <img height="200px" src="{{BaseURL + dish.image}}" alt={{dish.name}}>

. . .

[参考] 这个例子来自 Coursera.com https://www.coursera.org/learn/angular/lecture/Mgo5H/exercise-video-angular-http-client

【讨论】：

【解决方案2】：

您可以使用constants。请注意以下...

module.constant('BASE', 'http://example.com/myserver/');

然后可以将这个值注入到任何地方，例如

module.factory('PrizeService', ['$http', 'BASE', function ($http, BASE) {
    console.log(BASE) // -- http://example.com/myserver/
    /*...*/
}]);

对于模板，您可以随时将其放在 $rootScope 的 run 块中，以供在任何地方参考...

module.run(['$rootScope' , 'BASE', function($rootScope, BASE) {
    $rootScope.base = BASE;
}]);

<img ng-src="{{ base + prize.imagePath }}" />

或者，您当然可以注入此常量并将其分配给与 $rootScope 相对的各个范围，但这听起来像是一个全局值，可能是合适的。

JSFiddle Link - 演示 $rootScope 和工厂值注入

【讨论】：