AngularJS를 사용하여 전체 페이지를 다시로드하거나 다시 렌더링하는 방법


299

여러 사용자 컨텍스트를 기반으로 전체 페이지를 렌더링하고 여러 $http요청을 한 후 사용자가 컨텍스트를 전환하고 모든 것을 다시 렌더링 할 수 있기를 원합니다 (모든 $http요청을 다시 보내는 등). 다른 곳으로 사용자를 리디렉션하면 제대로 작동합니다.

$scope.on_impersonate_success = function(response) {
  //$window.location.reload(); // This cancels any current request
  $location.path('/'); // This works as expected, if path != current_path
};

$scope.impersonate = function(username) {
  return auth.impersonate(username)
    .then($scope.on_impersonate_success, $scope.on_auth_failed);
};

를 사용 하면 응답을 기다리는 요청 $window.location.reload()중 일부가 취소되어 사용할 수 없습니다. 또한 해킹 이 작동하지 않습니다 (아무것도 일어나지 않습니다).$httpauth.impersonate(username)$location.path($location.path())

모든 요청을 수동으로 다시 발행하지 않고 페이지를 다시 렌더링하는 다른 방법이 있습니까?


Alvaro Joao가 아래에 언급했듯이, 이것을 작동 시키려면 angular-route.js를 사용해야합니다. bennadel.com/blog/…
Yvonne Aburrow

답변:


404

레코드의 경우 각도가 현재 페이지를 다시 렌더링하도록하려면 다음을 사용할 수 있습니다.

$route.reload();

AngularJS 문서 에 따르면 :

$ location이 변경되지 않은 경우에도 $ route 서비스가 현재 경로를 다시로드합니다.

그 결과 ngView는 새로운 범위를 생성하고 컨트롤러를 다시 인스턴스화합니다.


6
의견에 감사드립니다. 어떤 이유로 $route.reload()정상적인 새로 고침과 비교할 때 약간 다른 동작을하는 것처럼 보입니다 . 예를 들어 새로 고침시 탭이 처음에 표시되도록 설정되어 있지만 다시로드 방법이 탭을 설정하지 않고 페이지를 다시로드하는 것처럼 보이는 경우 문제가 무엇인지 확실하지 않습니다.
Doug Molineux

2
이것도 필터 / 서비스를 실행합니까? 원하지 않는 지속적 상태를 얻는 중입니다. 편집 : 여전히 질문에 대한 정답에 올랐으며 이것은 매우 유용합니다. 감사합니다
부여

10
$route이것이 작동하려면 컨트롤러에 주입하십시오 .
Neel

6
@alphapilgrim ngRoute 모듈은 더 이상 코어의 일부가 아닙니다 angular.js file. 계속 사용 $routeProvider한다면 이제 angular-route.jsHTML 에 포함시켜야 합니다.
Alvaro Joao

3
stateProvider를 사용하는 경우 $ state.reload ()
Lalit Rao

314

$route.reload()컨트롤러를 다시 초기화하지만 서비스는 초기화하지 않습니다. 응용 프로그램의 전체 상태를 재설정하려면 다음을 사용할 수 있습니다.

$window.location.reload();

이것은 $ window 서비스 주입에 액세스 할 수 있는 표준 DOM 메소드 입니다 .

예를 들어 Django 또는 다른 웹 프레임 워크를 사용하고 새로운 서버 측 렌더링을 원할 때와 같이 서버에서 페이지를 다시로드하려면 문서에서 설명한대로 true매개 변수 로을 전달하십시오 . 서버와의 상호 작용이 필요하기 때문에 속도가 느려질 수 있습니다.reload

앵귤러 2

위에서 내가 각도 2를 사용하고 있지 않다 각도 1. 적용, 서비스와 같은 모습이있다, 거기에 다른 Router, Location하고 DOCUMENT. 나는 거기에서 다른 행동을 테스트하지 않았다


2
어쨌든 서비스를 "다시 시작"하기 위해 서비스에 상태를 저장해서는 안된다는 점은 주목할 가치가 있습니다.
andersonvom

19
누가 그렇게 말합니까? 캐시 된 데이터를 어디에 저장해야합니까?
danza

5
서비스에 저장된 데이터로 인해 많은 버그가 발생하여 상태 비 저장 상태가 아니라 상태 저장 상태가되었습니다. 캐싱 서비스에 대해 이야기하지 않는 한 (이 경우 플러시 인터페이스가 있음) 서비스 및 컨트롤러에서 데이터를 유지합니다. 예를 들어, 데이터를 localStorage에 보관하고 서비스를 사용하여 액세스 할 수 있습니다. 이로 인해 서비스가 데이터를 직접 보관하지 않아도됩니다.
andersonvom

2
@danza 캐시 된 데이터를 어디에 저장해야합니까? ... 모델 객체? 그러나 Angular는 MVCS 구성 요소를 명명하는 데 끔찍한 일을 해왔습니다. module.value API를 통해 주사 가능한 모델 객체를 유지합니다. 그런 다음 모델 객체를 변경하는 ng 서비스에서 정의한 다양한 API가 명령과 비슷하게 작동합니다.
jusopi

2
물론, 그것은 효과가 있지만 그것은 좋은 습관이 아닙니다. $ window에 대한 문서를 참조하십시오 . 창 을 사용하는 이유는 처음에 설명되어 있습니다. JavaScript는 전역 적으로 사용할 수 있지만 전역 변수이므로 테스트 가능성 문제가 발생합니다. 각도에서 우리는 항상 $ window 서비스를 통해 참조하므로 테스트를 위해 재정의, 제거 또는 조롱 할 수 있습니다
danza

38

주어진 경로 경로에 대한 페이지를 다시로드하려면 :-

$location.path('/path1/path2');
$route.reload();

6
이유를 모르지만 .reload () 메소드가 작동하지 않는 것 같습니다. 아무것도 할당하지 않습니다.
mircobabini

28

각도 UI 라우터를 사용하는 경우 이것이 가장 좋은 솔루션입니다.

$scope.myLoadingFunction = function() {
    $state.reload();
};

공유 호스팅에 배포 한 후 내 cli 프로젝트에서. 내 프로젝트를 다시로드 할 때이 문제를 해결하는 404 오류가 발생했습니다. 'use hash'를 추가하면 '#'과 함께 작동하지만 이것을 원하지 않습니다. 해결 방법이 있습니까?
T. Shashwat

24

컨트롤러의 종속성을 선언 할 때 "$ route"를 추가하는 것을 잊었을 수 있습니다.

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.
}]);

9

모든 것을 다시로드하려면 window.location.reload (); angularjs로

작업 예 확인

HTML

<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>
</div>

앵귤러 JS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.reloadPage = function(){window.location.reload();}
}

http://jsfiddle.net/HB7LU/22324/


7

사용중인 서비스를 새로 고치는 동안 컨트롤러를 새로 고치려면이 솔루션을 사용할 수 있습니다.

  • $ state 주입

app.controller('myCtrl',['$scope','MyService','$state', function($scope,MyService,$state) {

    //At the point where you want to refresh the controller including MyServices

    $state.reload();

    //OR:

    $state.go($state.current, {}, {reload: true});
}

그러면 컨트롤러와 HTML을 새로 고치며 Refresh 또는 Re-Render라고도 합니다.


2
이것은 각도가 아닌 UI 라우터 용입니다.
dgzornoza

6

Angular 2 이전 (AngularJs)

경로를 통해

$route.reload();

전체 응용 프로그램을 다시로드하려는 경우

$window.location.reload();

앵귤러 2+

import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {  }

load() {
    this.location.reload()
}

또는

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

참고-각도 7 : " '재로드'속성이 '위치'유형에 없습니다."
ACEG

@Cristina 귀하의 정보에 감사드립니다. 나는 이것을 각도 7 이전에 사용합니다
Thilina Sampath

5

내가 생각한 가장 쉬운 해결책은

다시 올 때마다 다시로드 할 경로에 '/'를 추가하십시오.

예 :

다음 대신

$routeProvider
  .when('/About', {
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

사용하다,

$routeProvider
  .when('/About/', { //notice the '/' at the end 
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

2
@PardeepJain 이것은 나를 위해 일했습니다. 이것이 바로 답입니다. 내 대답을 공감 했어?
diyoda_

1
전혀, 당신의 대답은 공감하기에 나쁘지 않습니다. 놀랍습니다. 왜 angular2에서 같은 것이 작동하지 않는지 모르겠습니다.
Pardeep Jain

2
완벽한 솔루션. 고마워!
simon

원래 경로가 응용 프로그램의 루트 인 경우에도 작동 /합니다. -O 이제 내 경로는 다음과 같습니다.//
MadPhysicist

Angular 6에서는 #을 사용한 후에 작동합니다. Angular2에도 사용할 수 있습니다. 그렇게 생각해
T. Shashwat

5

다음 중 하나를 시도하십시오.

$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();

4

캐시를 제거하고 페이지를 다시로드하는 데 필요한 작업 코드가 있습니다.

전망

        <a class="btn" ng-click="reload()">
            <i class="icon-reload"></i> 
        </a>

제어 장치

인젝터 : $ scope, $ state, $ stateParams, $ templateCache

       $scope.reload = function() { // To Reload anypage
            $templateCache.removeAll();     
            $state.transitionTo($state.current, $stateParams, { reload: true, inherit: true, notify: true });
        };

3

사용자에게 다시로드 알림없이 다음 코드를 사용하십시오. 페이지를 렌더링합니다

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();

-8

나는이 문제와 몇 달 동안 열심히 싸웠으며, 나를 위해 일한 유일한 해결책은 다음과 같습니다.

var landingUrl = "http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;

4
이것은 $window.location.reload()OP가 구체적으로 언급 한 것과 그의 경우에는 제대로 작동하지 않는 것과 거의 다릅니다 .
모든 노동자는 필수적입니다
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.