CSS和JavaScript并不包括在刷新 [英] css and javascript didn't include on refresh

问题描述

我在AngularJs一个初学者，我也遇到过，我不明白为什么一个问题，我希望你们能帮助或开导我。我试图建立与angularJS + EX pressJS一切单页的应用程序正常工作，但直到我刷新我的网页，比如我在本地主机：3000（这是我的主页），我访问为localhost：3000 /登录它的工作完全正常，但如果我刷新页面的CSS不包括在localhost：3000 /登录，因为我注入login.ejs文件到NG-视图/（其中CSS文件位于 index.ejs），但一旦我刷新页面，浏览器只加载login.ejs我没有包括它的CSS。你的帮助是极大的AP preciated

在我张贴在堆栈溢出我已经张贴在谷歌+组寻求IT帮助的质询，但我的问题仍然没有解决，我认为我错了什么写的code。如果你有时间，请看看我的code如下：

这是我的前preSS中间件
（对谷歌+用户的人告诉我我的app.router移动到低于前press.static）

  app.set（'口'，process.env.PORT || 3000）;
app.set（'意见'，__dirname +'/公/视图'）;
app.set（视图引擎'，'EJS'）;
app.use（如press.cookieParser（））;
app.use（如press.favicon（））;
app.use（如press.logger（'开发'））;
app.use（如press.bodyParser（））;
app.use（如press.methodOverride（））;
app.use（如press.static（path.join（__目录名称，'公共'）））;
app.use（app.router）;
 

这是（主要是main.ejs只是一些数据我上/路线注入）

中间件后路线

  app.get（'/'，routes.index，功能（REQ，RES）{
res.render（'主'）
}）;
app.get（'/：路径，功能（REQ，RES）{
VAR路径= req.params.path;
res.render（路径）;
}）;
app.get（'*'，函数（REQ，RES）{
  res.redirect（'/'+ req.path）;
}）;
 

在这种情况下，我注入数据index.ejs
里面含有index.ejs

 ＆LT; D​​IV NG-观点=''＆GT;＆LT; / DIV＆GT;
 

使用JavaScript和CSS沿

在我angularjs文件

  VAR应用= angular.module（'对myApp'，[]）。
 配置（['$ routeProvider'，'$ locationProvider'，函数（$ routeProvider，$ locationProvider）{
    $ routeProvider。
      什么时候（'/'， {
        templateUrl：main.ejs'，
        控制器：'IndexCtrl
      }）。
      当（'/登录'，{
      templateUrl：login.ejs'，
        控制器：'IndexCtrl
      }）。
      除此以外（{
        redirectTo：'/'
      }）;
    $ locationProvider.html5Mode（真）;
  }]）;
 

解决方案

这行是你的问题。

  $ locationProvider.html5Mode（真）;
 

要使用您必须配置您的服务器始终服务于请求的索引页HTML5的模式。另一种选择是让登录页面的部分指数（指数将成为您的所有CSS和JavaScript，母版页的容器）。看看EJS本地人。

因此​​，对于它不需改动工作，你NEDD禁用HTML5模式

  $ locationProvider.html5Mode（假）;
 

这会＃标记添加到浏览器的地址。所以，当你浏览到本地主机：3000 /，点击登录链接它会送你到＃/登录，服务器，你永远不会从索引页移动，但棱角分明知道如何挑选并会正确地呈现你的页面。

有很多在网络上的例子，<一个href=\"http://stackoverflow.com/questions/16569841/angularjs-html5-mode-reloading-the-page-gives-wrong-get-request\">stackoverflow.

希望它帮助。

I'm a beginner on AngularJs and I have encountered a problem that I don't understand why and I hope you guys can help or enlighten me. I'm trying to build a single page application with angularJS + expressJS everything work fine but until I refresh my page, for example I'm at localhost:3000(which is my homepage) and I access to localhost:3000/login it work perfectly fine but if I refresh the page the css doesn't include on localhost:3000/login , because i'm injecting the login.ejs file into the ng-view on "/"(where css file located "index.ejs") but once i refresh the page the browser only load login.ejs which i didn't include css on it. your help is greatly appreciated

Before i post the question on stack overflow i have posted it on google+ group to seek help on it however my problem is still unsolved i think i have written the code wrongly or something. if you have the time please check out my code below :

this is my express middleware ( one of the user on google+ told me to move my app.router to below 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);

this is the routes after the middleware(the main is main.ejs just some data i inject on "/" route)

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);
});

in this case i inject data into index.ejs inside index.ejs contain

<div ng-view=''></div>

along with javascript and css

in my angularjs file

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);
  }]);

解决方案

This line is your problem

$locationProvider.html5Mode(true);

To use the Html5 mode you have to configure your server to always serve the index page on requests. Another alternative is to make the login page a partial of index (index will be a container for all your css and javascript, "master page"). Have a look at ejs-locals.

So for it to work without changes you nedd to disable html5 mode

$locationProvider.html5Mode(false);

This will add a # tag to your browser address. So when you navigate to localhost:3000/ and click the login link it will send you to #/login, for the server you never moved from index page but angular knows how to pick that up and will render your page correctly.

there are lots of examples on the web, and stackoverflow.

Hope it helps.

这篇关于CSS和JavaScript并不包括在刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！