如何在Angular模块配置阶段初始化$location以获取基础URL用于路由

首先，你当前的代码会遇到核心问题——在Angular的config阶段，不能直接注入并使用$location服务实例。这是因为config阶段是Angular用来配置服务提供者的阶段，此时所有业务服务还未完成实例化，只能注入对应的Provider对象（比如$locationProvider）或者少数允许在配置阶段使用的工具服务（比如$window）。

解决方法：用$window或$locationProvider获取基础URL #

下面是两种可行的修改方案，适配你的路由配置需求：

方案1：通过$window获取当前页面的完整基础URL

$window可以在config阶段直接注入，它对应浏览器原生的window对象，我们可以通过它拼接出完整的基础路径（域名+应用根路径）：

var templateApp = angular.module("tmpApp",["ngRoute"]);

templateApp.config(function($routeProvider, $window){
  // 拼接完整基础URL：域名 + 当前应用的根路径
  var baseUrl = $window.location.origin + $window.location.pathname;
  console.log('基础URL:', baseUrl);

  $routeProvider
    .when("/", {
      templateUrl: baseUrl + "/testajax"
    })
    .when("/register", {
      templateUrl: "ajax here",
      controller: "registerApp"
    });
});

方案2：使用$locationProvider获取预设的基础路径

如果你已经通过页面的<base>标签，或者代码里的$locationProvider.baseHref()方法设置了应用的基础路径，可以直接通过$locationProvider获取这个预设值：

var templateApp = angular.module("tmpApp",["ngRoute"]);

templateApp.config(function($routeProvider, $locationProvider, $window){
  // 获取已配置的基础路径，为空则 fallback 到当前页面的完整根路径
  var baseHref = $locationProvider.baseHref();
  var baseUrl = baseHref || $window.location.origin + $window.location.pathname;
  console.log('基础URL:', baseUrl);

  $routeProvider
    .when("/", {
      templateUrl: baseUrl + "/testajax"
    })
    .when("/register", {
      templateUrl: "ajax here",
      controller: "registerApp"
    });
});

额外提示 #

• 如果你不需要绝对URL，Angular路由的templateUrl本身支持相对路径，它会自动基于当前应用的基础路径（由<base>或$locationProvider配置）解析，比如直接写templateUrl: "./testajax"也能正常工作。
• 要是你想在服务实例化后使用$location，可以在run阶段注入，但run阶段已经过了路由配置的时机，所以不适合用来设置路由规则。

内容的提问来源于stack exchange，提问作者Enigma