CSS和JavaScript不包括在刷新中

css and javascript didn't include on refresh

本文关键字：刷新 不包括 JavaScript CSS      更新时间：2023-09-26

我是AngularJs的初学者，我遇到了一个我不明白为什么的问题，我希望你们可以帮助或启发我。我正在尝试使用 angularJS + expressJS 构建一个单页应用程序，一切正常，但在我刷新页面之前，例如我在 localhost：3000（这是我的主页）并且我访问 localhost：3000/login 它工作得很好，但是如果我刷新页面，css 不包括在 localhost：3000/login 上，因为我将 login.ejs 文件注入到"/"（css 文件位于"index.ejs"）上的 ng-view 中，但是一旦我刷新页面浏览器只加载login.ejs，我没有在上面包含CSS。非常感谢您的帮助

在我发布有关堆栈溢出的问题之前，我已经将其发布在google+组上以寻求帮助，但是我的问题仍未解决，我认为我写错了代码或其他东西。 如果您有时间，请查看下面的代码：

这是我的快速中间件（Google+上的一位用户告诉我将我的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内部索引.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);
  }]);

这一行是你的问题

$locationProvider.html5Mode(true);

要使用 Html5 模式，您必须将服务器配置为始终在请求时提供索引页。另一种选择是使登录页面成为索引的一部分（索引将是所有css和javascript的容器，"母版页"）。看看ejs-locals。

因此，为了使它无需更改即可工作，您可以禁用html5模式

$locationProvider.html5Mode(false);

这会在您的浏览器地址中添加一个 # 标记。因此，当您导航到localhost：3000/并单击登录链接时，它将带您进入#/login，对于您从未从索引页面移动的服务器，但angular知道如何拾取它并正确呈现您的页面。

网络上有很多例子，还有StackOverflow。

希望对您有所帮助。

相关文章：