2016-09-03 4 views
8

저는 Angularjs (1.x)에 익숙하며 지시어에 템플릿을 사용합니다.백엔드에 Jade 또는 EJS와 같은 템플릿 엔진이 필요한 이유는 무엇입니까?

현재 nodejs를 배우고 있으며 코스 템플릿 엔진의 일부로 언급됩니다. 백엔드에서 이들을 사용하면 어떤 이점이 있습니까?

현재 어떤 용도로도 사용되지 않습니다. 그냥 HTML은

app.get('/',function(req,res){ 
    res.sendFile(path.join(__dirname+'/index.html')); 
    //__dirname : It will resolve to your project folder. 
}); 

그러나 엔진이 코드를 사용하여 렌더링 할 수있는 예를 들어

답변

12

HTML로 렌더링해야하는 데이터가있는 경우 템플릿 엔진을 사용하여 데이터와 템플릿을 가져 와서 HTML로 렌더링 (이후 클라이언트에 제공) 할 수 있습니다.

프론트 엔드 응용 프로그램이 XHR 호출 또는 이와 유사한 기능을 사용하여 서버에서 데이터를 검색하는 경우 일반적으로 HTML 서버 측으로 렌더링하는 것이 좋지 않습니다. 대신 데이터가 JSON으로 클라이언트에 전송됩니다.

템플릿 엔진을 사용하는 것이 바람직하지 않거나 사용하지 않는 경우 앱이 프론트 엔드와 백엔드 모두 어떻게 구성되어 있는지에 따라 다릅니다.

초기 HTML을 서버 측으로 렌더링 한 다음 클라이언트 측에서 "인계"하는 하이브리드 솔루션도 있습니다. 이것은 React가 지원하는 것과 같은 것입니다. 큰 아이디어는 서버와 클라이언트 모두에서 동일한 구성 요소를 사용할 수 있으며 페이지가 열릴 때 클라이언트 측에서 페이지를 가져와야하는 대신 완전히 렌더링 된 첫 페이지를 보게된다는 것입니다. 데이터를 백엔드에서 먼저 가져온 다음 페이지 렌더링).

5

당신은 실제로 그들을 필요 없어요,하지만 그들은 당신의 페이지를보다 역동적하게 기능을 많이 가지고 ...

당신 데이터를 템플릿으로 보낼 수 있습니다. 프런트 엔드 템플릿에

// pass a variable to the view 
res.render('somePage', { 
    title: 'Awesome title', 
    userFriends: friendsList, 
    name: 'loggedUserName' 
}); 

http://expressjs.com/en/api.html#res.render 이제 (EJS이 경우)을 당신이 보내는 데이터를 HTML을 채 웁니다. HTML 동적되었고, 각 페이지는 사용자마다 다르게 표시 할 수 있습니다. 당신이 필요 AJAX를 많이 얻을하고 나쁜 생각 HTML로 데이터를 추가하기 위해 호출을 할 필요가 HTML을

<ul> 
    <% for(var i=0; i<userFriends.length; i++) {%> 
    <li><%= userFriends[i] %></li> 
    <% } %> 
</ul> 

.

희망이 도움이됩니다.

0

보기 엔진을 사용하면 옵션으로 HTML을 렌더링 할 수 있습니다. Express를 사용하여 동적 사용자 프로필의 URL에,

<!DOCTYPE html> 
<html> 
    <head> 
    <title>{{title}}</title> 
    </head> 
    <body> 
    {(userIsSignedIn){<!-- if the user is signed in, display username and description--> 
    <p>{{username}} is {{description}}</p> 
    }} 

    {(!userIsSignedIn){<!--if user isn't signed in, ask them to sign in--> 
    <p>Sign in to view this page</p> 
    }} 

    </body> 
</html> 

그래서 내가들을 수있는, 예를 들어 다음 동적 콘텐츠를 반환 예를 들어, squirrelly 사용하여,이처럼 보이는 파일을 만들 수 있습니다.