我是AngularJs的初学者,我遇到了一个问题,我不明白为什么,我希望你们可以帮助或启发我。我正在尝试使用angularJS + expressJS构建单页应用程序一切正常但直到我刷新我的页面,例如我在localhost:3000(这是我的主页)并且我访问localhost:3000 / login它工作完全没问题,但如果我刷新页面,css不包含在localhost:3000 / login上,因为我将login.ejs文件注入到“/”的ng-view中(其中css文件位于“index.ejs”) )但是一旦我刷新页面,浏览器只加载login.ejs,我没有包含css。非常感谢您的帮助
在我发布关于堆栈溢出的问题之前,我已经在google + group上发布了它以寻求帮助但是我的问题仍未解决我认为我已经错误地编写了代码或其他东西。如果您有时间,请查看我的代码:
这是我的快速中间件 (谷歌+上的一个用户告诉我将app.router移动到express.static下面)
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'ejs');
app.use(express.cookieParser());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
这是中间件之后的路由(主要是main.ejs只是我注入“/”路由的一些数据)
app.get('/', routes.index,function(req, res){
res.render('main')
});
app.get('/:path',function(req, res){
var path = req.params.path;
res.render(path);
});
app.get('*', function(req, res) {
res.redirect('/' + req.path);
});
在这种情况下,我将数据注入index.ejs 里面的index.ejs包含
<div ng-view=''></div>
以及javascript和css
在我的angularjs文件中
var app = angular.module('myApp',[]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'main.ejs',
controller: 'IndexCtrl'
}).
when('/login',{
templateUrl: 'login.ejs',
controller: 'IndexCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
答案 0 :(得分:1)
此行是您的问题
$locationProvider.html5Mode(true);
要使用Html5模式,您必须将服务器配置为始终为请求提供索引页面。另一种方法是使登录页面成为索引的一部分(索引将是所有css和javascript的容器,“主页”)。看看ejs-locals。
因此,无需更改即可使用,您需要禁用html5模式
$locationProvider.html5Mode(false);
这会在您的浏览器地址中添加#标记。因此,当您导航到localhost:3000 /并单击登录链接时,它会将您发送到#/ login,对于您从未从索引页面移动的服务器,但angular知道如何选择它并将正确呈现您的页面。
网上有很多例子,stackoverflow。
希望它有所帮助。