एंगुलरजेएस एक इतिहास स्थिति को दबाए बिना रीडायरेक्ट करें

Question

मैं एक एंगुलरजेएस ऐप पर काम कर रहा हूं जिसमें सभी मार्गों को पकड़ लिया गया है (उदाहरण के लिए, .when('/:slug', {...)) जो ऐप के पिछले (गैर-कोणीय) संस्करण से विरासत यूआरएल प्रारूपों का समर्थन करने के लिए आवश्यक है। नियंत्रक जो पकड़ने का जवाब देता है, सभी संबंधित वस्तु खींचने की कोशिश करता है, और यदि नहीं मिलता है, तो $location.path विधि का उपयोग करके 404 पृष्ठ पर रीडायरेक्ट करता है। यह उपयोगकर्ता को 404 पेज पर लाने पर काम करता है, लेकिन जब उपयोगकर्ता अपने ब्राउज़र में वापस हिट करता है तो यह उन्हें उस पृष्ठ पर वापस ले जाता है जिसने उन्हें पहले स्थान पर 404 पेज पर मजबूर कर दिया और वे चक्र से बचने में असमर्थ रहे।

मेरा प्रश्न यह है कि 1) इस स्थिति को संभालने के लिए एक बेहतर पैटर्न है, या 2) यदि उपयोगकर्ता को फिर से शुरू करने का कोई तरीका है जो ब्राउज़र में इतिहास पुश स्थिति को मजबूर नहीं करता है?

Answer 1

आप इतिहास स्थिति में जोड़े बिना यूआरएल बदल सकते हैं, here "बदलें विधि" के अंतर्गत मिला। यह प्रभावी रूप से एचटीएमएल 5 के इतिहास को कॉल करने जैसा ही है। रीप्लेसस्टेट()।

$location.path('/someNewPath').replace(); 

मुझे नहीं पता कि यूआरएल को बदलने के बिना दृश्य को बदलना संभव है। दृश्य को बदलने का एकमात्र तरीका, जो मैंने पाया है, स्थान पथ को बदलना है।

Answer 2

सेवा के लिए $locationChangeSuccess ईवेंट देखने के लिए रूट सिस्टम का सामान्य संचालन है और फिर एक मार्ग लोड करना शुरू करें। जब यह टेम्पलेट लोड हो रहा है, संकल्प चरणों का पालन कर रहा है और नियंत्रक को तुरंत चालू कर रहा है तो बदले में $routeChangeSuccess ईवेंट प्रसारित करता है। $routeChangeSuccess की निगरानी ng-view निर्देश द्वारा की जाती है, और इसी तरह यह नया मार्ग तैयार होने के बाद टेम्पलेट्स और स्कॉप्स को स्वैप करना जानता है।

ऊपर कहा के सभी के साथ

, इसे अद्यतन करने के दृश्य दिखाने के लिए वर्तमान मार्ग को अद्यतन करने और मार्ग परिवर्तन घटना उत्सर्जक द्वारा आवेदन कोड $route सेवा के व्यवहार का अनुकरण करने के लिए काम कर सकते हैं:

var errorRoute = $route.routes[null]; // assuming the "otherwise" route is the 404 
// a route instance is an object that inherits from the route and adds 
// new properties representing the routeParams and locals. 
var errorRouteInstance = angular.inherit(
    errorRoute, 
    { 
     params: {}, 
     pathParams: {}, 
    } 
); 
// The $route service depends on this being set so it can recover the route 
// for a given route instance. 
errorRouteInstance.$$route = errorRoute; 

var last = $route.current; 
$route.current = errorRouteInstance; 

// the ng-view code doesn't actually care about the parameters here, 
// since it goes straight to $route.current, but we should include 
// them anyway since other code might be listening for this event 
// and depending on these params to behave as documented. 
$rootScope.broadcast('$routeChangeSuccess', errorRoute, last); 

उपरोक्त मानते हैं कि आपके "अन्यथा" मार्ग में कोई "हल" चरण नहीं है। यह भी मानता है कि यह किसी भी $routeParams की अपेक्षा नहीं करता है, जो निश्चित रूप से "अन्यथा" मार्ग के लिए सच है लेकिन यदि आप एक अलग मार्ग का उपयोग करते हैं तो यह सच नहीं हो सकता है।

यह स्पष्ट नहीं है कि उपरोक्त का कार्यान्वयन विवरण बनाम इंटरफ़ेस के आधार पर क्या है। $routeChangeSuccess घटना निश्चित रूप से प्रलेखित है, लेकिन $$route मार्ग उदाहरण की संपत्ति मार्ग प्रणाली का एक कार्यान्वयन विस्तार प्रतीत होता है जो इसके डबल-डॉलर-चिह्न नाम दिया गया है। कुंजी null के साथ मार्ग तालिका में "अन्यथा" मार्ग रखा गया है, यह विवरण भी एक कार्यान्वयन विस्तार है। तो इन सभी के साथ, यह व्यवहार AngularJS के भविष्य के संस्करणों में कार्यात्मक नहीं रह सकता है।

अधिक जानकारी के लिए आप the ng-view code that handles this event का संदर्भ दे सकते हैं, जो अंत में उपर्युक्त कोड the event emitting code के साथ कृपया उपर्युक्त उदाहरण के आधार के रूप में उपयोग करने का प्रयास कर रहा है। जैसा कि आप इन लिंक से अनुमान लगा सकते हैं, इस पोस्ट की जानकारी AngularJS की नवीनतम मास्टर शाखा से ली गई है, जो लेखन के समय 1.2.0-स्नैपशॉट के रूप में लेबल किया गया है।