我正在开发一个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>
请帮帮我。感谢
答案 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>