Programing

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

lottogame 2020. 3. 16. 08:15
반응형

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


여러 사용자 컨텍스트를 기반으로 전체 페이지를 렌더링하고 여러 $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())

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


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

$route.reload();

AngularJS 문서 에 따르면 :

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

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


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

$window.location.reload();

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

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

앵귤러 2

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


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

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

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

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

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

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

모든 것을 다시로드하려면 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/


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

  • $ 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라고도 합니다.


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();
}

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

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

예 :

다음 대신

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

사용하다,

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

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

전망

        <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 });
        };

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

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

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

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

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

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

참고 URL : https://stackoverflow.com/questions/16703215/how-to-reload-or-re-render-the-entire-page-using-angularjs

반응형