AngularJS에서 페이지 새로고침

1. AngularJS에서 reload() 메서드를 사용하여 페이지 다시 로드
2. AngularJS에서 location.reload()를 사용하여 페이지 새로고침

이 기사에서는 몇 가지 사소한 오류로 인해 전체 페이지를 새로 고치는 것이 때때로 문제가 될 수 있으므로 전체 페이지나 애플리케이션이 아닌 경로를 다시 로드하는 방법을 다룹니다. 또한 서버에서 전체 페이지를 다시 로드하는 방법도 살펴보겠습니다.

AngularJS는 양방향 데이터 바인딩을 통해 데이터 바인딩을 구현합니다. 양방향 데이터 바인딩은 모델이 변경될 때마다 자동으로 뷰를 업데이트하고 그 반대도 마찬가지입니다. AngularJS 페이지를 다시 로드하는 방법에는 두 가지가 있습니다.

한 가지 방법은 $locationProvider 제공자를 통해 액세스할 수 있는 windows.location.reload()를 사용하는 것이고 다른 하나는 reload 메서드를 사용하는 것입니다.

주제를 자세히 살펴보고 이러한 방법에 대해 자세히 논의해 보겠습니다.

AngularJS에서 reload() 메서드를 사용하여 페이지 다시 로드

페이지를 새로고침하는 것은 콘텐츠를 새로 고치는 일반적인 방법입니다. AngularJS의 reload() 메서드는 이를 달성하는 가장 좋은 방법 중 하나입니다.

AngularJS는 전체 프로그램을 다시 시작하는 대신 reload() 메서드라는 경로 서비스를 제공하여 다시 로드/다시 렌더링할 기본 경로를 식별합니다.

라우트의 컨트롤러에는 컨트롤러가 구성될 때 이름이 지정된 서비스가 포함되며 조건이 발생하면 이러한 정확한 서비스를 호출하여 정보를 새로 고칠 수 있습니다.

reload() 메서드는 웹 페이지의 모든 콘텐츠를 새로 고치고 캐시된 데이터를 지웁니다. 업데이트된 새 데이터를 표시하거나 실수로 캐시되었을 수 있는 일부 콘텐츠를 새로 고치려는 경우에 유용합니다.

AngularJS의 reload() 메서드는 JavaScript setInterval 함수와 유사하게 수동으로 코드를 작성할 필요가 없기 때문에 페이지를 새로 고치는 효율적인 방법입니다.

다음은 AngularJS에서 reload() 메서드를 사용하여 페이지를 다시 로드하는 예입니다.

app.controller('myapp',
['$scope', '$route', function($scope, $route) {
function reload()
$scope.reloadRoute  = function(){
$route.reload();
}; }]);

AngularJS에서 location.reload()를 사용하여 페이지 새로고침

location.reload() 메소드는 사용자가 새로 고침 버튼을 클릭하거나 키보드에서 F5를 누를 때 사용됩니다.

현재 페이지를 다시 로드하고 이 서버에 대한 이전 요청에서 설정된 모든 쿠키를 지웁니다. 또한 모든 이미지, 스타일시트, 스크립트 및 기타 파일을 다시 로드합니다.

AngularJS 애플리케이션을 디버깅할 때 유용한 방법입니다.

다음은 location.reload() 메소드를 사용하여 페이지를 다시 로드하는 예입니다.

HTML 코드:

<h1 id="text">Open the Magic Box</h1>
<button onclick="start()">Click here</button>
<button onclick="reload()">Reload page</button>

자바스크립트 코드:

var log = msg => div.innerHTML += "<p>" + msg + "</p>";
function start() {
    document.getElementById("text").innerHTML = "Hello, How are you? Are you enjoying your day?";
}
function reload() {
    log("loading...");
    location.reload(true);
}

여기 JavaScript 코드에서 location.reload()를 true로 설정했습니다. 왜 우리가 이것을 했습니까? 이 방법은 기본적으로 캐시에서 페이지를 로드하기 때문입니다.

그러나 true로 변경하면 서버에서 페이지가 새로 고쳐집니다.

여기를 클릭하여 위에 제공된 코드의 작동을 확인하십시오.