在 Angular 应用程序中动态设置基本 URL答案

【问题标题】：Set base URL dynamically in angular app在 Angular 应用程序中动态设置基本 URL
【发布时间】：2016-10-09 23:12:13
【问题描述】：

我正在开发一个 AngularJS 项目。我使用 $locationProvider.html5mode() 从 URL 中删除了 #。

根据环境，我希望从配置文件动态更新基本标记的 href 属性。我创建了一个包含简单配置的 env.js。

env.js

(function (window) {
  window.__env = window.__env || {};

  window.__env.baseUrl = '/';

  window.__env.enableDebug = true;
}(this));

我在 app.js 中使用了这个 env 文件，并且在 app.run() 中将 $rootScope.baseurl 更新为 env.js 中的 baseUrl。它在 console.log() 中运行良好，但在我的 index.html 中却没有。我得到了未编译的代码，即{{ $rootScope.baseurl }}

app.js

import controllers from './controllers';

        var env = {};

        if (window) {
            Object.assign(env, window.__env);
        }

        var app = angular.module('myapp', ['ui.router', controllers]);

        app.constant('__env', env);

        app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

            $urlRouterProvider.otherwise("/");

            $stateProvider.state("home", {
                url: "/",
                templateUrl: "app/components/home/home.view.html",
                controller: "HomeController"
            }).state("login", {
                url: "/login",
                templateUrl: "app/components/login/login.view.html",
                controller: "LoginController"
            });

            $locationProvider.html5Mode({
                enabled: true,
                requireBase: true
            });
        });

       app.run(function($rootScope, __env){
          $rootScope.baseurl = __env.baseUrl;
          console.log($rootScope.baseurl);
      });

Index.html

    <html ng-app="myapp">
        <head>
            <title>MYAPP</title>
            <base href="{{ baseurl }}">
        </head>

        <body>
            <div ui-view>
            </div>
        </body>

        <script type="text/javascript" src="public/lib/js/angular.min.js"></script>
        <script type="text/javascript" src="public/lib/js/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="env.js"></script>
        <script type="text/javascript" src="public/app.js"></script>

    </html>

请帮帮我。谢谢

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您不能使用 angular 来设置它，因为您使用的是相对路径，因此需要在对脚本、样式表、图像等页面资源发出任何请求之前对其进行设置

您可以尝试将<base> 替换为以下内容：

<script type="text/javascript" src="env.js"></script>
<script>
      document.write('<base href="' + window.__env.baseUrl + '" />');
</script>

或者

<script type="text/javascript" src="env.js"></script>
<base id="base">
<script>        
   document.getElementById('base').href = window.__env.baseUrl;
</script>

【讨论】：