在angular应用中动态设置基URL

Set base URL dynamically in angular app

本文关键字：设置 URL 动态 angular 应用      更新时间：2023-09-26

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

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

js 

(function (window) {
  window.__env = window.__env || {};
  window.__env.baseUrl = '/';
  window.__env.enableDebug = true;
}(this));

我在app.js中使用了这个env文件，并在app.run()中更新了$rootScope。在env.js中将baseurl转换为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>

请帮帮我。由于

你不能使用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>
相关文章：