초기 데이터 로드(angularjs)

초기 데이터 로드(angularjs)

모든 페이지가 많은 데이터 소스에 의존하는 웹 앱을 구축할 때 데이터의 초기 비트를 가져오는 가장 좋은 방법은 무엇입니까?twitter를 보면 페이지 로드에 보이는 트윗이 HTML 소스에 있고 스크롤을 내리면 AJAX를 사용하여 더 많은 트윗이 로드됩니다.하지만 이미 DOM에 있는 데이터를 모델에 삽입할 수 있는 편리한 방법이 없습니다.

초기 데이터를 요청하는 것은 페이지 로드 직후에 바보처럼 느껴집니다. 왜냐하면 당신은 방금 css, html 및 javascript를 가져오기 위해 서버로 많은 왕복을 했기 때문입니다.자바스크립트 기능이 초기 데이터를 추가할 수 있도록 페이지의 자바스크립트 태그에 데이터를 삽입하는 것이 좋지 않을까요?

구체적으로 angularjs를 요청하는 건데, 일반적인 기술이 있다면 저에게도 알려주세요.

페이지 로드 시에 컨트롤러를 참조하게 되므로 인라인 스크립트 태그를 사용할 필요가 없습니다.

기본 모델을 설정하고 초기 로드 시 ng-bind 속성을 사용하거나 함수를 호출하여 데이터를 전달할 수 있습니다.

angularjs로 로드된 데이터를 가져오는 것은 꽤 일반적입니다.

서버가 데이터를 가져올 수 있도록 Angularjs를 Zend_Http_Client 또는 Guzzle과 같은 백엔드의 HTTP Client와 커플링하는 것이 가장 좋을까요.그런 다음 렌더링 시 json으로 데이터를 javascript에 전달합니다.

Angularjs가 싱글 페이지 애플리케이션을 위해 설계된 것으로 알고 있습니다.그렇기 때문에 데이터를 게으르게 로드하는 것이 합리적입니다.

그러나 페이지를 동적으로 렌더링하고 콘텐츠를 구성하는 작업을 Angularjs에 위임하는 접근 방식으로 이동할 것입니다.Angular를 포함하기에 적합한 프레임워크는 무엇입니까?JS뷰.지금 당장은 각시드 같은 프로젝트 템플릿이 모두 정적입니다.

즉, 서버가 json 객체가 내장된 페이지를 서비스한다는 아이디어입니다.그런 다음, 필요한 경우 추가 콘텐츠를 가져오는 중에 클라이언트 측에서 각을 잡습니다.

그래서 단순히 연락처 한 페이지(예: index.html)가 아니라 profiles.html, products.html과 같은 여러 페이지가 있을 것입니다.페이지 오른쪽 상단에 사용자 이름처럼 자주 변경되지 않는 섹션이 있다고 하면 백엔드의 도움이 특히 도움이 될 것입니다.저는 페이지가 로드된 후 서버에 요청할 필요 없이 페이지에 이러한 데이터를 미리 로드하는 것이 좋다고 생각합니다.

큰 눈먼 사람들이 알아차렸듯이, 이것은 페이스북, 지메일, 트위터와 같은 사이트들이 그렇게 하는 방식인 것 같습니다.여기에는 페이지 로드에 내장된 데이터가 들어 있습니다.그런 다음 서비스를 통해 추가 콘텐츠를 로드합니다.

아이디어는 다음과 같습니다.

Webservice <---------- Backend------------> Frontend
     <------------------------------------------

백엔드는 렌더링된 페이지의 초기 데이터를 클라이언트에 제공하기 위해 웹 서비스를 쿼리하는 작업을 위임합니다.그러면 클라이언트는 웹 서비스에 직접 연결하여 추가 콘텐츠를 가져올 수 있습니다.

위의 설정을 사용하여..이상적인 개발 스택은 무엇입니까?

한 가지 방법은 바인딩이 발생하기 전에 초기화를 처리하는 지시문을 만드는 것입니다.예를 들어,

app.directive('initdata', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            if ( attrs.ngBind !== undefined)
            {
                $scope[attrs.ngBind] = attrs.initdata ? attrs.initdata : element.text();
            }
        }
    };
});

이 지시어는 바인딩된 $scope 속성의 초기 값으로 속성 값을 사용하거나 요소의 텍스트 값을 사용합니다.

사용 예시:

<div initdata="Foo Bar" ng-bind="test1"></div>
<div initdata ng-bind="test2">Lorem Ipsem</div>

http://jsfiddle.net/6PNG8/ 에서의 작업 예시

를 들어 initdata 를 json 으로하고, 와 같은 더등 이에 설명할 수 있는 $root.someprop 그 로 간단합니다 하지만 그 근거는 놀라울 정도로 간단합니다.

이 질문에 대한 답을 보면, 페이지의 스크립트 태그에 있는 JSON 객체가 가야 할 길인 것 같습니다.더 좋은 아이디어가 나오면 답변을 받아들이겠습니다.

언급URL : https://stackoverflow.com/questions/18086823/initial-data-loading-in-angularjs