Блог

Главная - Вопросы по программированию - Динамическая настройка базового URL-адреса в приложении angular

Динамическая настройка базового URL-адреса в приложении angular

#javascript #angularjs

#javascript #angularjs

Вопрос:

Я работаю над проектом AngularJS. Я удалил # из URL-адреса, используя и $LocationProvider.html5mode().

В зависимости от среды я хочу, чтобы атрибут href для базового тега динамически обновлялся из файла конфигурации. Я создал env.js который содержит простые конфигурации.

env.js

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

  window.__env.baseUrl = '/';

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

Я использовал этот env-файл в своем app.js и внутри app.run() обновил $rootScope.baseurl до baseUrl в env.js . Он отлично работает внутри 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>

Пожалуйста, помогите мне. Спасибо

Ответ №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>