2013-10-24 38 views
0

我是AngularJs的初學者,我遇到了一個問題,我不明白爲什麼,我希望你們可以幫助或啓發我。我試圖用angularJS + expressJS構建一個單頁面應用程序,但一切正常,但直到我刷新我的頁面,例如我在localhost:3000(這是我的主頁),並且我訪問localhost:3000/login它工作完美的罰款,但如果我刷新頁面的CSS不包括在localhost:3000 /登錄,因爲我將login.ejs文件注入到「/」的ng-view(其中css文件位於「index.ejs」 ),但一旦我刷新頁面瀏覽器只加載login.ejs,我沒有包括CSS就可以了。你的幫助是非常感謝css和javascript沒有包含在刷新

在我發佈堆棧溢出問題之前,我已經發布它在谷歌+組尋求幫助,但我的問題仍未解決,我想我寫錯了代碼或東西。如果你有時間,請看看下面我的代碼:

這是我的快遞中間件 (對谷歌+用戶的人告訴我我的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只是一些數據I中的「/」路線注入)在這種情況下我注入數據index.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包含

中間件後的路由
<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); 
    }]); 

回答

1

此行是你的問題

$locationProvider.html5Mode(true); 

使用已HTML5的模式,您的服務器配置爲始終根據請求提供索引頁面。另一種選擇是使登錄頁面成爲索引的一部分(索引將成爲所有CSS和JavaScript的容器,「母版頁」)。看看ejs-locals。

所以它無需修改工作,你NEDD禁用HTML5模式

$locationProvider.html5Mode(false); 

這會#標籤添加到您的瀏覽器地址。因此,當您導航到localhost:3000 /並單擊登錄鏈接時,它會將您發送到#/ login,因爲您從未從索引頁移動過的服務器,但angular知道如何選擇它,並且會正確呈現您的頁面。

網上有很多例子,stackoverflow

希望它有幫助。

+0

非常感謝你! ,我可以知道如何配置一個html5模式服務器來服務索引頁面的請求? –

+0

@JohnLim我很樂意幫助你,但我不知道,我認爲它很複雜但並非不可能。在角度文檔中,他們寫了這個「服務器端使用這種模式需要在服務器端重寫URL,基本上你必須重寫你的應用程序入口點的所有鏈接(例如index.html)」在這裏看看http:// stackoverflow。 com/questions/17646843/angularjs-html5-mode-how-do-direct-links-work-without-server-specific-changes – hjgraca

+0

非常感謝 –