2014-11-14 6 views
1

나는 내 자신의 건물을 만들기 시작했고, 나는 하루 종일 고치려고 노력하는 데 많은 시간을 보냈습니다.expressjs와 angularjs 라우팅 문제

기본적으로 각도 API를 사용하여 API와 통신합니다.

내 모든 경로 (비취 템플릿)가 제대로 작동하고 렌더링하고 있지만 여기에 문제가 있습니다.

저는 현재 간단한 CRUD를 만든 블로그 시스템을 현재 구축하고 있습니다. 양식을 통해 내 블로그에 게시물을 추가하고 있으며 ID별로 (mongodb 및 mongoose를 사용하여) 각 게시물에 액세스 할 수 있으므로 제목을 클릭하기 만하면 내 게시물에 대해 별도의 페이지가 열립니다.

내가 겪고있는 유일한 문제는 페이지/: ID를 새로 고치는 것입니다.

그러면 기본 스타일이 손실되고 객체를 얻게됩니다. (내 mongoDB 개체). 나를 위해 그래서 기본적으로

module.exports.getSinglePost = function(req,res) { 
    Posts.findById(req.params.id, function(err, data) { 
     if (err) { 
      res.send(err); } 
     else { 
      res.json(data) 
     } 
}) 

각도 JS 경로

.when('/bblog/posts/:id', { 
    templateUrl: 'views/post', 
    controller: 'singlePostController' 
}) 

익스프레스 JS 노선

router.route('/bblog/posts/:id') // get single id 
     .get(CRUD.getSinglePost) 
     .put(CRUD.updatePost) 
     .delete(CRUD.DeletePost) 

router.route('/views/*') 
    .get(function(req, res) { 
    res.render(req.params['0']); 
}); 

router.route('*') 
    .get(function(req, res) { 
     res.render('index'); 
}); 

:

ExpressJS 얻을 방법 : 여기

코드의 일부입니다 이자형 내가 페이지의 내용을 새로 고칠 때까지 지금까지는 정상적으로 작동합니다 : id (params), 빈 페이지에 전체 개체를 인쇄합니다 (예를 들어 localhost:3000/bblog/posts/54641972b7557ecb6e637aa6, 내가 가지고있는 게시물 중 하나임)

예 :

{ 
    "_id":"54641972b7557ecb6e637aa6", 
    "content":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishin\", 
    \n\"title\": \"orem Ipsum is simpl","title":"orem Ipsum is simpl", 
    "__v":0 
} 

힌트 그때 내가 페이지를 새로 고칠 수 있습니다 캐치 다음이 경로 모든 경로 (*)를 넣어하지만 문제는 내가 더 이상하지만, HTML 페이지 어떤 대가로 JSON 요소를하지 않는 경우 내 물건 등이 없다.

router.route('/bblog/posts/:id') // get single id 
    .get(CRUD.getSinglePost) 
    .put(CRUD.updatePost) 
    .delete(CRUD.DeletePost) 

평소와 같이, 미리 감사드립니다. 나는이 awesomeness가이 이상한 문제를 해결하는 데 도움이되기를 바랍니다. :) 건배

+0

이걸 바로 잡으십시오. 당신은 어떤 점에서 url 'localhost : 3000/bblog/posts/54641972b7557ecb6e637aa6'로 정확한 레이아웃을 가지고 있습니까? 그것은 나에게 이상하게 보일 것이다. –

+0

내 mongodb 게시물의 ID를 제공하여 내 게시물에 액세스합니다. 각 게시물에는 고유 ID가 있습니다.이 작업은 훌륭합니다. 문제는 zi가 모든 게시물을 새로 고칠 때 내 post.jade 템플릿이 렌더링되지 않는 것입니다. –

+0

각도 앱을 통해 블로그 게시물 페이지로 이동할 수 있지만 브라우저를 다시로드하면 서버가 대신 데이터 엔드 포인트를 보냅니 까?html5 모드를 true로 사용하고 있습니까, app.config()의 모든 hashPrefix 설정 또는 index의 기본 URL을 사용하고 있습니까? 귀하의 서버가 데이터베이스 페이지와 일치하는 각진 페이지로가는 길을 가로 채고있는 것처럼 보입니다. 아마도 db endpoint가 Angular의 라우팅과 비슷하지만 주소가 다를 수 있습니다. – irth

답변

0

사용자 : irth가 말한 것처럼, 내가해야 할 일은 리소스 경로를 변경하고 다른 경로를 변경하는 것입니다. 이것은 현재 작동하지만, 아무런 단서가 없습니다. 그것은 당신이 "오, 내 코드가 작동하지 않는 이유는 모르겠지만, 내 코드는 작동하지만 왜 그런지 모르겠습니다.

감사합니다. 귀하의 답변이 표시되지 않는 이유를 잘 모르겠습니다. 크레딧 등을 드릴 수 있습니다.