我試圖重構MEAN堆棧應用程序中的一些視圖邏輯,並運行到UI路由器的一些問題。對Angular來說,我還是一個新手,所以我認爲我的問題可能非常簡單,我錯過了。角度UI路由器投擲500錯誤
我想通過一些我在堆棧溢出這裏找到的東西,但由於某種原因,我不斷收到內部服務器錯誤(500)。任何人都可以看看?
我在下面的代碼試圖模仿this。在我的index.js
指數路線:
router.get('/', function (req, res, next) res.render('index.html'); });
查看發動機設置在app.js:在我的角度應用js腳本
app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.engine('html', require('ejs').renderFile);
的app.config方法:
app.config ([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('common', {
templateUrl: 'common.html', // exists in views folder
abstract: true
})
.state('hi', {
url:'/',
templateUrl:'/hi.html' // also in views folder
});
$locationProvider.html5Mode(true);
}]);
我的index.html:
<!DOCTYPE html>
<html data-ng-app="djq">
<head>
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/youtube.js"></script>
<base href="/">
</head>
<body>
<div data-ui-view="">
</div>
</body>
</html>
我common.html
<section class="content-wrapper">
<div class="main-content" data-ui-view></div>
</section>
我hi.html
<div>Hi there!</div>
當我開始我的應用程序,並導航到本地主機:5000 /,我收到以下錯誤:
GET http://localhost:5000/hi.html 500 (Internal Server Error)
讓我知道如果我應該p提供更多信息。
更新(已解決):所以我終於在Edward答案的下面得到了這一切,但這並不是完全正確的解決方案,因爲我的文件位於不同的位置。
他提到使用「partials」文件夾。我已經有一個「views」文件夾,它的行爲相同。在我的節點app.js我:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
/* ... */
app.use(express.static(path.join(__dirname, 'public')));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
所以,我有兩個視圖/和bower_components /有靜態目錄。 views /是我所有的html文件所在的地方。
「angularApp.js」是我在客戶端使用的角度文件。我編輯它有以下幾點:
app.config ([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('common', {
templateUrl: 'views/common.html',
abstract: true
})
.state('hi', {
url: '/',
parent: 'common',
templateUrl: 'views/hi.html'
});
/* ... */
$locationProvider.html5Mode(true);
}]);
所以,如果我們導航到'/',角將向節點發出請求,以獲取文件在views/hi.html。我的問題是我沒有處理這個請求。
在我的索引中。JS,這是我對這些類型的請求路由器,我說:
router.get('/views/:name', function(req, res) {
var name = req.params.name;
res.render(name);
});
而現在一切都按預期工作:)
看看你的服務器日誌?聽起來像服務器端的錯誤,因爲Angular是客戶端庫 –
我的服務器日誌中出現的所有內容是: 04:06:58 web.1 | GET /hi.html 500 18.697 ms - 1421 – FateNuller
@FateNuller我的答案到底對你有幫助嗎? –