0

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

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

这是我的 express 中间件（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 内的 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);
  }]);
4

1 回答 1

1

这条线是你的问题

$locationProvider.html5Mode(true);

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

因此，要让它在不进行更改的情况下工作，您需要禁用 html5 模式

$locationProvider.html5Mode(false);

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

网上有很多例子，还有stackoverflow。

希望能帮助到你。

于 2013-10-24T09:09:04.347 回答