在角度应用中动态设置基本URL

时间:2016-10-09 14:56:05

标签: javascript angularjs

我正在开发一个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>

请帮帮我。感谢

1 个答案:

答案 0 :(得分:2)

您不能使用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>
相关问题