그래서 저는 제 인트로 웹 개발 수업을 위해했던 몇 가지 프로젝트를 통해 저 자신을위한 개인 포트폴리오를 작업하고 있습니다. 수업 시간에 데이터 기반 콘텐츠 웹 사이트와 웹앱을 연습 해 왔기 때문에 교수님은 데이터를 클라우드 기반 데이터 저장소 나 .csv 파일에 넣어 유사한 작업을 수행하기를 원했습니다. .csv 파일 경로로 가기로 결정했습니다.
.csv 파일을 만든 후 Papa Parse를 사용하여 .csv 파일 데이터를 내 웹 사이트에 사용할 수있는 형식으로 읽은 다음 angular를 사용하여 데이터를 반복하고 페이지에 관련 부분을 배치합니다. 이 데이터를 사용하는 내 웹 사이트의 유일한 섹션은 홈 페이지의 프로젝트 섹션입니다.
어쨌든 내 문제는 URL을 처음 열 때 또는 정보 또는 연락처 페이지에서 홈 페이지로 전환했을 때 페이지를로드 할 때 콘텐츠가 나타나지 않고 gif와 텍스트를 표시하려면 페이지를 새로 고침해야합니다. 다음은 몇 가지 스크린 샷이다 : 그것은 어떻게 보일지 과 가끔 보이는 무엇 . 또한 직접보고 싶다면 댓글에 내 사이트 링크를 포함 할 것입니다 (아직 평판이 10 개가 아니기 때문에 두 개 이상의 링크를 게시 할 수 없습니다). (아직 진행중인 작업이므로 게시하는 것이 조금 부끄럽지만 문제를 해결하고 싶습니다.)
또한이 데이터가 페이지에 사용되는 HTML은 다음과 같습니다.
<div class="projects">
<h1 class="projects-heading">Projects</h1>
<div class="container projectContainer" ng-repeat="project in projects">
<div class="row">
<div class="col-xs-12 col-md-6">
<img class="projectGif" ng-src="{{project.gifUrl}}" ng-hide="projects.length < 0">
</div>
<div class="col-xs-12 col-md-6">
<h4 class="project-info proj-title">{{project.title}}</h4>
<p class="project-info proj-body">{{project.description}}</p>
<a class="project-info" target="_blank" href="{{project.link}}">View the live site</a>
</div>
</div>
<!-- Creates divier line between each separate project -->
<hr class="project-split">
</div>
내 컨트롤러 :
app.controller('HomeController', function($scope){
Papa.parse("data/home.csv", {
download: true,
header: true,
complete: function(results) {
$scope.projects = results.data;
}
});
});
이 Papa를 모르지만 이것이 비동기 호출이라고 생각하므로 Angular 루프 외부에서 실행됩니다. 이 시도
complete: function(results) {
$scope.projects = results.data;
$scope.$apply();
}
Angular에는 Angular가 실행해야한다는 것을 알 때마다 실행되는 자체 이벤트 루프가 있습니다. 이는 상태를 수정하는 코드가 Angular 내에서 실행될 때 발생합니다. 루프가 실행되면 모든 변수, 바인딩 및 렌더링도 업데이트됩니다.
여기에서는 단순히 Ajax 요청을 실행하는 외부 라이브러리 Papa를 사용하고 있습니다. 요청은 Angular 내에서 전송되지만 결과 콜백은 비동기 성으로 인해 외부에서 처리됩니다. 따라서 Angular가 데이터를 업데이트하도록 강제해야합니다. $ scope. $ apply ()가하는 일은 이벤트 루프가이 컨트롤러에 대해서만 업데이트되도록하는 것입니다.
Angular 내부에는 없지만 Angular와 상호 작용하는 코드를 실행할 때마다이를 수행하는 것을 잊지 마십시오. 예를 들어 'onclick'또는 jQuery 이벤트 또는 Angular 범위 밖의 모든 코드에 유효합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다