2014-01-19 3 views
0

내 질문은 AngularJs를 사용할 때 템플릿 태그를 숨기는 방법입니다. 내가 브라우저에서 해당 페이지를 볼 때, 다음 마우스 오른쪽 버튼을 클릭페이지 소스의 AngularJs 템플릿을 컴파일하고 숨기기

<!doctype html> 
<html lang="en" data-ng-app="myApp"> 
    <head data-ng-controller="CtrlHead"> 
     <meta charset="utf-8"> 
     <title>{{title}}</title> 
    </head> 
    <body>    
     <div data-ng-view></div> 
     <script type="text/javascript" src="js/js.min.js"></script> 
    </body> 
</html> 

> 소스보기, 나는 그 모든 코드를 확인하고 페이지가 정확히 동일하게 볼 수 있습니다 : 내 말은 내가이있는 index.html을에 구성된.

AngularJs 템플릿을 컴파일하고 뷰 소스에서 완성 된 html ({{title}}이 (가) 추가되고 data-ng-view 대신 실제보기로) 표시하는 방법이 있습니까?

참고 : ngCloak은 템플릿을 컴파일하기 전에 {{tag}}이 플래시되지 않도록합니다.

감사합니다.

+0

왜이 작업을 수행 할 것은? 어떤 가치를 더합니까? – iamyojimbo

+0

주된 이유는 클라이언트가 요청한 것이 었습니다. 그의 추론은 우리가 가능한 한 많은 것을 숨기고 싶었고 우리는 "그들"을 "훔치기"를 원하지 않는 정교한 템플릿을 사용했다.) BTW 이것은 얼마 전이었고 나는 그를 확신하지 못했다. 걱정할 필요가 없습니다. – RachelC

답변

2

간단한 Angular 마법이 없습니다. 서버를 html 스냅 샷으로 제공해야합니다. 실제로 자바 스크립트가 포함되지 않으므로 실제 사용자에게 서비스하는 것은 효과가 없습니다. 그것은 자바 스크립트가 실행 된 후 페이지의 완성 된 출력을 덤프하는 것입니다.

서버에서 실행되는 PhantomJS과 같은 헤드리스 브라우저를 사용하여 일정에 따라 페이지를 "방문"하고, 컴파일 된 html을 캡처하고, html을 파일에 저장 한 다음 해당 파일을 SEO 크롤러에 제공 할 수 있습니다.

내가하는 일은 내 상황에 조금 낫다. 콘텐츠 관리 시스템을 구축했기 때문에 사이트의 모든 변경 사항이 관리됩니다. 언제든지 변경이 이루어지면 사이트가 관리자 패널 (iframe)에로드되고 거기에서 출력을 캡처하여 스냅 샷을 저장합니다.

는 페이지가 AJAX 기반 크롤러에게 및 스냅 샷을 위해 다른 곳에서보고, 문서의 머리에 넣고 : <meta name="fragment" content="!"> www.example.com?_escaped_fragment_=에서 www.example.com를 찾기 위해 구글 알려줍니다. 그런 다음 해당 요청에 대한 홈페이지의 스냅 샷을 제공하도록 서버를 설정합니다. 정보 여기에 구글에서 : https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

당신을 위해이 작업을 수행 할 수있는이 서비스도있다 : https://ajaxsnapshots.com

관련 문제