एंगुलरजेएस/यूई-राउटर: संकल्प पर 404 को संभालें

Question

मैं अंगुलरजेएस और यूई-राउटर के साथ शुरुआत कर रहा हूं, और संसाधनों पर 404 को संभालने की कोशिश कर रहा हूं। मुझे एड्रेस बार में यूआरएल बदलने के बिना, एक त्रुटि प्रदर्शित करने की इच्छा है।

मैं जैसे मेरी राज्यों कॉन्फ़िगर किया है:

app.config([ 
    "$stateProvider", function($stateProvider) { 
     $stateProvider 
      .state("home", { 
       url: "/", 
       templateUrl: "app/views/home/home.html" 
      }) 
      .state("listings", { 
       abstract: true, 
       url: "/listings", 
       templateUrl: "app/views/listings/listings.html" 
      }) 
      .state("listings.list", { 
       url: "", 
       templateUrl: "app/views/listings/listings.list.html", 
      }) 
      .state("listings.details", { 
       url: "/{id:.{36}}", 
       templateUrl: "app/views/listings/listings.details.html", 
       resolve: { 
        listing: [ 
         "$stateParams", "listingRepository", 
         function($stateParams, repository) { 
          return repository.get({ id: $stateParams.id }).$promise; 
         } 
        ] 
       } 
      }) 
      .state("listings.notFound", { 
       url: "/404", 
       template: "Listing not found" 
      }); 
    } 
]); 

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

हैं, कहते हैं, मैं करने के लिए नेविगेट निम्नलिखित यूआरएल: http://localhost:12345/listings/bef8a5dc-0f9e-4541-8446-4ebb10882045 लिस्टिंग को खोलना चाहिए। विवरण राज्य। लेकिन अगर उस संसाधन मौजूद नहीं है, वादा संकल्प समारोह से लौटे एक 404 के साथ असफल हो जायेगी, जिसे मैंने यहां पकड़ने:

app.run([ 
    "$rootScope", "$state", 
    function($rootScope, $state) { 
     $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) { 
      event.preventDefault(); 
      if (error.status === 404) { 
       $state.go("^.notFound", null, { location: true, relative: toState }); 
      } 
     }); 
    } 
]); 

क्या मैं यहाँ करने के लिए कोशिश कर रहा हूँ listings.notFound पर जाने के लिए है पता बार में गंतव्य यूआरएल को बदले बिना राज्य। मैं एक सापेक्ष पथ का उपयोग करता हूं क्योंकि मैं अन्य संसाधनों के लिए इस तर्क का पुन: उपयोग करना चाहता हूं।

हालांकि, मैं एक अपवाद प्राप्त करें:

पथ '^ .notFound' मान्य नहीं के लिए राज्य 'listings.details'

यह त्रुटि इसलिए होता है क्योंकि toState तर्क $ stateChangeError द्वारा दिए गए घटना अपने माता-पिता को नहीं जानती है, यानी toState.parent अपरिभाषित है। संक्रमण में यूई-राउटर के कार्य के लिए, मैं देख सकता हूं कि तर्क के रूप में दिया गया ऑब्जेक्ट to.self है, जो केवल जानकारी का सबसेट प्रदान करता है। relative: $state.get(toState.name) का उपयोग करते हुए भी मैं पूर्ण पथ की एक सूची बनाए रखने से बचने के लिए चाहते हैं, और राज्य पदानुक्रम में नेविगेट करने के लिए तर्क को फिर से लिखने (भले ही कितना आसान यह मदद नहीं करता है, क्योंकि आंतरिक ui रूटर एक बार फिर से वापस आती है state.self

है, DRY और वह सब)।

क्या मैं इसके बारे में गलत हूं, क्या 404 को संभालने का एक और उचित तरीका है? यदि नहीं, तो सबसे अच्छा तरीका क्या है?

Answer 1

यह $urlRouterProvider उपयोग करने के लिए इस अपवाद

app.config([ 
    "$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/404'); 
     // define states   
}]);