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(), तो उस पर कुछ $httpअनुरोधों की auth.impersonate(username)प्रतिक्रिया रद्द होने की प्रतीक्षा कर रहे हैं, इसलिए मैं उसका उपयोग नहीं कर सकता। इसके अलावा, हैक $location.path($location.path())भी काम नहीं करता है (कुछ भी नहीं होता है)।

क्या फिर से सभी अनुरोधों को मैन्युअल रूप से जारी किए बिना पृष्ठ को फिर से प्रस्तुत करने का एक और तरीका है?


जैसा कि अल्वारो जोआओ नीचे कहते हैं, आपको इसे काम करने के लिए कोणीय-मार्ग का उपयोग करने की आवश्यकता है। bennadel.com/blog/…
Yvonne Aburrow

जवाबों:


404

वर्तमान पृष्ठ को फिर से प्रस्तुत करने के लिए कोणीय को बाध्य करने के लिए रिकॉर्ड के लिए, आप उपयोग कर सकते हैं:

$route.reload();

AngularJS प्रलेखन के अनुसार :

वर्तमान मार्ग को फिर से लोड करने के लिए $ मार्ग सेवा का कारण बनता है, भले ही $ स्थान न बदला हो।

उसी के परिणामस्वरूप, ngView नया स्कोप बनाता है, कंट्रोलर को पुनः स्थापित करता है।


6
टिप्पणी के लिए धन्यवाद, किसी कारण से मुझे $route.reload()सामान्य रीफ्रेश की तुलना में थोड़ा अलग व्यवहार प्राप्त होता है । उदाहरण के लिए एक टैब को रिफ्रेश पर शुरू में दिखाने के लिए सेट किया गया है, लेकिन जब रीलोड विधि टैब को सेट किए बिना पेज को फिर से लोड करने के लिए लगता है, तो सुनिश्चित करें कि समस्या क्या है।
डग मोलिनक्स

2
क्या यह फिल्टर / सेवाएं भी चलाता है? अवांछित अवस्था में रहना। संपादित करें: फिर भी प्रश्न का सही उत्तर देने के लिए upvoted और यह सुपर सहायक है। धन्यवाद आप
अनुदान

10
$routeयह काम करने के लिए नियंत्रक को इंजेक्ट करना याद रखें ।
नील

6
@alphapilgrim ngRoute मॉड्यूल अब कोर का हिस्सा नहीं है angular.js file। यदि आप लगातार उपयोग कर रहे हैं $routeProviderतो आपको अब angular-route.jsअपने HTML में शामिल करने की आवश्यकता होगी :
अल्वारो जोआओ

3
$ State.reload () यदि आप StateProvider का उपयोग कर रहे हैं
ललित राव

314

$route.reload()नियंत्रकों को फिर से संगठित करेगा लेकिन सेवाओं को नहीं। यदि आप अपने एप्लिकेशन की संपूर्ण स्थिति को रीसेट करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं:

$window.location.reload();

यह एक मानक DOM विधि है जिसे आप $ विंडो सेवा को इंजेक्ट कर सकते हैं

यदि आप सर्वर से पृष्ठ को फिर से लोड करना सुनिश्चित करना चाहते हैं, उदाहरण के लिए जब आप Django या किसी अन्य वेब फ्रेमवर्क का उपयोग कर रहे हैं और आप एक नया सर्वर साइड रेंडर चाहते हैं, तो डॉक्स में बताए अनुसार trueपैरामीटर के reloadरूप में पास करें । चूँकि इसके लिए सर्वर के साथ सहभागिता की आवश्यकता होती है, यह धीमा होगा, इसलिए यदि आवश्यक हो तो ही करें

कोणीय 2

ऊपर मैं कोणीय 2 उपयोग नहीं कर रहा कोणीय 1. पर लागू होता है, सेवाओं की तरह दिखता है वहाँ अलग हैं, वहाँ है Router, Locationहै, और DOCUMENT। मैंने वहां विभिन्न व्यवहारों का परीक्षण नहीं किया


2
यह ध्यान देने योग्य है कि सेवाओं को "पुनरारंभ" करने के लिए किसी भी तरह से सेवाओं में राज्य को संग्रहीत नहीं किया जाना चाहिए।
एंडरसनॉम

19
कौन कहता है? कैश्ड डेटा को स्टोर करने के लिए किसी को कहाँ माना जाता है?
danza

5
मैं सेवाओं में संग्रहीत डेटा के कारण बहुत सारे और बहुत से कीड़े पर ठोकर खाई है, उन्हें स्टेटलेस के बजाय स्टेटफुल बना रहा हूं। जब तक हम एक कैशिंग सेवा के बारे में बात नहीं कर रहे हैं (जिस स्थिति में, इसे फ्लश करने के लिए एक इंटरफ़ेस होगा), मैं डेटा को सेवाओं से बाहर और नियंत्रकों में रखूंगा। उदाहरण के लिए, कोई लोकलस्टोरेज में डेटा रख सकता है, और इसे एक्सेस करने के लिए किसी सेवा का उपयोग कर सकता है। यह सेवा को सीधे इसमें डेटा रखने से मुक्त करेगा।
एंडरसनॉम

2
@danza कैश्ड डेटा को कहां स्टोर करना चाहिए? ... एक मॉडल वस्तु? हॉवर एंगुलर ने अपने MVCS घटकों के नामकरण का एक भयानक काम किया है। मैं मॉड्यूल के माध्यम से इंजेक्टेबल मॉडल ऑब्जेक्ट रखता हूं। एपीआई एपीआई। तब मैंने जिन विभिन्न APIs को एनजी सेवा पर परिभाषित किया था जो मॉडल ऑब्जेक्ट को कमांड की तरह अधिक काम करते हैं।
जुस्कोपी

2
ज़रूर, यह काम करेगा, लेकिन यह अच्छा अभ्यास नहीं है। $ विंडो के बारे में दस्तावेज़ीकरण देखें , इसका उपयोग करने का कारण शुरुआत में बताया गया है: जबकि विंडो विश्व स्तर पर जावास्क्रिप्ट में उपलब्ध है, यह परीक्षण क्षमता की समस्याओं का कारण बनता है, क्योंकि यह एक वैश्विक चर है। कोणीय में हम हमेशा $ विंडो सेवा के माध्यम से इसका उल्लेख करते हैं, इसलिए इसे परीक्षण के लिए ओवरराइड, हटाया या नकली किया जा सकता है
danza

38

दिए गए मार्ग पथ के लिए पृष्ठ पुनः लोड करने के लिए: -

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

6
पता नहीं क्यों लेकिन .reload () विधि यहाँ काम नहीं कर रही है। यह कुछ भी वास्तविक नहीं है।
मिरिकोबिनी १२'१४ को ११:०६

28

यदि आप कोणीय यूआई-राउटर का उपयोग कर रहे हैं तो यह सबसे अच्छा समाधान होगा।

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

साझा होस्टिंग पर परिनियोजन के बाद मेरी cli परियोजना में। जब मैं अपनी परियोजना को फिर से लोड कर रहा हूं तो इसका उपयोग करने के लिए 404 त्रुटि दे रहा है। यदि मैं 'हैश' का उपयोग करता हूं, तो यह '#' के साथ काम करता है, लेकिन मैं यह नहीं चाहता, इस तरह से इसे हल किया जा सकता है।
टी। शास्वत


9

बस सब कुछ पुनः लोड करने के लिए, window.location.reload () का उपयोग करें; कोणीयज के साथ

वर्किंग उदाहरण देखें

एचटीएमएल

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

AngularJS

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

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

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


7

यदि आप अपने द्वारा उपयोग की जा रही किसी भी सेवा को ताज़ा करते समय नियंत्रक को ताज़ा करना चाहते हैं, तो आप इस समाधान का उपयोग कर सकते हैं:

  • $ राज्य इंजेक्षन

अर्थात

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 को रिफ्रेश करेगा और साथ ही आप इसे रिफ्रेश या री-रेंडर कह सकते हैं ।


2
यह ui राउटर के लिए है कोणीय के लिए नहीं।
dgzornoza

6

कोणीय 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();
}

FYI करें - कोणीय 7: "संपत्ति 'पुनः लोड' प्रकार 'स्थान पर मौजूद नहीं है"।
ACEG

@ क्रिस्टिना आपकी जानकारी के लिए धन्यवाद। मैं इसे कोणीय 7 से पहले उपयोग करता हूं
थिलिना संपत

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
नहीं, बिलकुल नहीं, आपका जवाब बुरा नहीं है। अद्भुत मुझे अब नहीं क्यों वही मेरे लिए कोणीय 2 में काम नहीं कर रहा है।
परदीप जैन

2
सही समाधान। Thks!
सिमोन

यह तब भी काम करता है जब आपका मूल मार्ग एप्लिकेशन का मूल है - /: ओ माई रूट अब इस तरह दिखता है://
MadPhysicist

Angular 6 में यह काम करने के बाद # Angular2 के लिए भी उपयोग किया जा सकता है। ऐसा सोचें
टी। शशवत

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.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()जिसमें ओपी विशेष रूप से उल्लेख करता है कि उसके मामले में ठीक से काम नहीं करता है।
सभी कार्यकर्ता
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.