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

Question

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

我想要一个代表我的域的变量，例如 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', {});
        }
    };
}]);

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

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

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

Answer 1

您可以使用 constants。观察以下...

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

然后可以将此值注入任何地方，例如

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

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

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

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

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

JSFiddle Link - 展示 $rootScope 和出厂值注入的演示

Answer 2

这是一个

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

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

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

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

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

. . .
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

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

How to set a base URL for HTTP calls and image loading with AngularJS

javascript

html

angularjs

angularjs-scope

angularjs-factory

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