2015-05-03 58 views
3

我試圖重構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); 
}); 

而現在一切都按預期工作:)

+0

看看你的服務器日誌?聽起來像服務器端的錯誤,因爲Angular是客戶端庫 –

+0

我的服務器日誌中出現的所有內容是: 04:06:58 web.1 | GET /hi.html 500 18.697 ms - 1421 – FateNuller

+0

@FateNuller我的答案到底對你有幫助嗎? –

回答

1

這是因爲你的諧音不是由服務器提供。你需要建立一個快速路線。

這是更好地在這裏解釋http://fdietz.github.io/recipes-with-angular-js/backend-integration-with-node-express/implementing-client-side-routing.html

有效地你想要的東西像

app.get('/partials/:name', function (req, res) { 
    var name = req.params.name; 
    res.render('partials/' + name); 
}); 

和你hi.html既在角度和服務器的partials目錄中,在這種情況下,你也應該設置static option for express