पुन: प्रतिपादन दृश्य के बिना कोणीय जेएस में यूआरएल अद्यतन करना

Question 1

मैं AngularJS में डैशबोर्ड सिस्टम बना रहा हूं और url को सेट करने के साथ एक समस्या में चल रहा हूं $location.path

हमारे डैशबोर्ड में, हमारे पास विजेट्स का एक गुच्छा है। जब आप उस पर क्लिक करते हैं तो प्रत्येक बड़ा दृश्य दिखाता है। हम उपयोगकर्ताओं को एक अधिकतम विजेट वाले डैशबोर्ड से लिंक करने की अनुमति देने के लिए डीप लिंकिंग सेटअप करने का प्रयास कर रहे हैं।

वर्तमान में, हमारे पास 2 मार्ग हैं जो दिखते हैं /dashboard/:dashboardIdऔर/dashboard/:dashboardId/:maximizedWidgetId

जब कोई उपयोगकर्ता किसी विजेट को अधिकतम करता है, तो हम उपयोग करते हुए url को अपडेट करते हैं $location.path, लेकिन यह दृश्य को फिर से प्रस्तुत करने का कारण बनता है। चूंकि हमारे पास सभी डेटा हैं, हम संपूर्ण दृश्य को फिर से लोड नहीं करना चाहते हैं, हम केवल URL को अपडेट करना चाहते हैं। वहाँ फिर से प्रस्तुत करने के लिए दृश्य के कारण यूआरएल सेट करने के लिए एक रास्ता है?

HTML5Modeपर सेट है true।

Question 2

वास्तव में, एक दृश्य हर बार प्रदान किया जाएगा जब आप एक यूआरएल बदलते हैं। Thats कैसे $ मार्गप्रोपाइडर कोणीय में काम करता है, लेकिन आप maximizeWidgetIdएक querystring के रूप में पारित कर सकते हैं जो एक दृश्य को फिर से प्रस्तुत नहीं करता है।

App.config(function($routeProvider) {
  $routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false});
});

जब आप अधिकतम करने के लिए एक विजेट पर क्लिक करते हैं:

<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a>
or
$location.search('maximizeWidgetId', 1);

एड्रेसबार में URL बदल जाएगा http://app.com/dashboard/1?maximizeWidgetId=1

आप तब भी देख सकते हैं जब खोज URL में बदल जाती है (एक विजेट से दूसरे में)

$scope.$on('$routeUpdate', function(scope, next, current) {
   // Minimize the current widget and maximize the new one
});

Question 3

आप $ मार्गप्रॉपिडर की रीलोडऑन खोज प्रॉपर्टी को गलत पर सेट कर सकते हैं।

संभव डुप्लिकेट प्रश्न: क्या आप AngularJS में नियंत्रक को पुनः लोड किए बिना एक पथ बदल सकते हैं?

सादर

Question 4

उन लोगों के लिए जिन्हें कंट्रोलर लोड के बिना पूर्ण पथ () बदलने की आवश्यकता है

यहाँ प्लगइन है: https://github.com/anglibs/angular-location-update

उपयोग:

$location.update_path('/notes/1');

Question 5

हम समान परिदृश्य के लिए अंतर्निहित मार्गों के बजाय कोणीय UI राउटर का उपयोग कर रहे हैं। यह नियंत्रक को फिर से त्वरित करने और पूरे दृश्य को फिर से प्रस्तुत करने के लिए प्रतीत नहीं होता है।

Question 6

मुझे लगता है कि यह एक पुराना सवाल है, लेकिन जब से मुझे उत्तर खोजने में एक अच्छा दिन और लग गया है, तो यहाँ जाता है।

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

वर्तमान में, जिसे बग के रूप में माना जा सकता है , reloadOnSearch: falseराज्य की स्थापना के कारण दृश्य को फिर से लोड किए बिना मार्ग बदलने में सक्षम हो जाएगा। GitHub उपयोगकर्ता lmessinger भी इसका एक प्रकार प्रदान करने के लिए पर्याप्त था। आप ऊपर दिए गए टिप्पणी से लिंक पा सकते हैं।

मूल रूप से आपको केवल इतना करना है:

के ui-routerबजाय का उपयोग करेंngRoute
अपने राज्यों में, उन लोगों को घोषित करें जिनके साथ आप चाहते हैं reloadOnSearch: false

मेरे एप्लिकेशन में, मेरे पास एक श्रेणी सूची दृश्य है, जिसमें से आप इस तरह के एक राज्य का उपयोग करके दूसरी श्रेणी प्राप्त कर सकते हैं:

$stateProvider.state('articles.list', {
  url: '{categorySlug}',
    templateUrl: 'partials/article-list.html',
    controller: 'ArticleListCtrl',
    reloadOnSearch: false
  });

बस। उम्मीद है की यह मदद करेगा!

Question 7

मैंने इसे कैसे लागू किया है:
(मेरा समाधान ज्यादातर मामलों के लिए जब आपको पूरे मार्ग को बदलने की आवश्यकता होती है, उप-भाग नहीं)

मेरे पास मेनू (मेनूपेज) के साथ पृष्ठ है और नेविगेशन पर डेटा को साफ नहीं किया जाना चाहिए (प्रत्येक पृष्ठ पर बहुत सारे इनपुट हैं और उपयोगकर्ता बहुत दुखी होगा यदि डेटा गलती से गायब हो जाएगा)।

$ मार्गप्रोपिडर बंद करें
mainPage नियंत्रक में कस्टम निर्देश विशेषता के साथ दो divs जोड़ें - प्रत्येक निर्देश में केवल 'टेम्पलेटउल' और 'स्कोप: सत्य' शामिल हैं।
```
 <div ng-show="tab=='tab_name'" data-tab_name-page></div>
```

mainPage नियंत्रक में रूटिंग अनुकरण करने के लिए लाइनें हैं:

if (!$scope.tab && $location.path()) {
    $scope.tab = $location.path().substr(1);
}
$scope.setTab = function(tab) {
    $scope.tab = tab;
    $location.path('/'+tab);
};

बस इतना ही। प्रत्येक पृष्ठ के लिए अलग-अलग निर्देश होने के लिए थोड़ा सा बदसूरत, लेकिन डायनामिक टेम्पलेट यूआरएल (फ़ंक्शन के रूप में) के उपयोग से पृष्ठ के पुन: प्रतिपादन (और इनपुट के डेटा को खोना) के लिए उकसाया जाता है।

Question 8

अगर मुझे आपका प्रश्न सही समझ में आया, तो आप चाहते हैं,

जब उपयोगकर्ता / डैशबोर्ड /: डैशबोर्डआईड पर हो तो विजेट को अधिकतम करें और वह विजेट को अधिकतम करता है।
आप चाहते हैं कि उपयोगकर्ता के पास / डैशबोर्ड /: डैशबोर्डआईड /: मैक्सिमाइज़्डविडगेट पर वापस आने की क्षमता हो और फिर भी विजेट को अधिकतम देखें।

आप routerConfig और उपयोग में केवल पहला मार्ग कॉन्फ़िगर कर सकते हैं RouteParams यदि अधिकतम विजेट इस कॉन्फ़िगर किया गया मार्ग के नियंत्रक में पैरामीटर में पारित हो जाता है की पहचान करने और परम के रूप में पारित एक अधिकतम करने के लिए। अगर उपयोगकर्ता इसे पहली बार अधिकतम कर रहा है, तो इस अधिकतम दृश्य के लिए url को UI पर maximizedWidgetId के साथ साझा करें।

जब तक आप पथ को अद्यतन करने के लिए $ $ स्थान का उपयोग करते हैं (जो कि मूल स्थान ऑब्जेक्ट पर केवल एक आवरण है) दृश्य को ताज़ा करेगा।

Question 9

मेरे पास उपयोग करने के लिए एक विचार है

window.history.replaceState ('ऑब्जेक्ट', 'शीर्षक', '/ new-url');

यदि आप ऐसा करते हैं और एक पाचन चक्र होता है तो यह पूरी तरह से चीजों को खत्म कर देगा। हालाँकि अगर आप इसे वापस सही url पर सेट करते हैं जो कोणीय अपेक्षा करता है कि यह ठीक है। तो सिद्धांत रूप में आप सही url को संग्रहीत कर सकते हैं जो कोणीय अपेक्षा करता है और इसे रीसेट कर देता है इससे पहले कि आप एक पाचन आग जानते हैं।

मैंने हालांकि इसका परीक्षण नहीं किया है।

Question 10

नीचे दिए गए कोड से आप यूआरएल को बिना रीडायरेक्शन के बदल सकते हैं जैसे: http: // localhost / # / 691? फू? बार? ब्लाबला

for(var i=0;i<=1000;i++) $routeProvider.when('/'+i, {templateUrl: "tabPages/"+i+".html",reloadOnSearch: false});

लेकिन जब आप http: // localhost / # / 692 में बदलते हैं , तो आपको रीडायरेक्ट किया जाएगा।