2016-10-09 2 views
0

Ich arbeite an einem AngularJS-Projekt. Ich entfernte # von der URL mit und $ locationProvider.html5mode().Basis-URL dynamisch in eckige App setzen

Abhängig von der Umgebung möchte ich das href-Attribut für Basis-Tag dynamisch aus einer Konfigurationsdatei aktualisiert werden. Ich habe eine env.js erstellt, die einfache Konfigurationen enthält.

env.js

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

    window.__env.baseUrl = '/'; 

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

habe ich diese env Datei in meinem app.js und innerhalb app.run() in env.js. $ rootScope.baseurl zu baseUrl aktualisiert Es funktioniert gut in console.log(), aber nicht in meiner index.html. Ich erhalte die kompilierten Code d.h {{ $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> 

Bitte helfen Sie mir. Dank

Antwort

2

Sie können nicht verwenden Winkel es zu setzen, da es festgelegt werden muss, bevor alle Anträge auf Seite Ressourcen wie Skripte, Stylesheets erstellt, Bilder usw., da Sie relative Pfade verwenden

Sie versuchen, das zu ersetzen könnte <base> mit so etwas wie:

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

Oder

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