AngularJS में DRY रूटिंग

कोणीय जेएस में राउटिंग सेट करना सबसे मुश्किल काम नहीं है। इसलिए, मैं केवल उन संभावित समाधानों में से एक का प्रस्ताव करता हूं जो आपको मार्गों के साथ काम करते समय " अपने आप को दोहराएं नहीं " के सिद्धांत का पालन करने में मदद करेंगे।





सबसे पहले, मैं आपको एक ला रीस्ट की शैली में URL बनाने का आग्रह करना चाहता हूं। टीम के भीतर इस तरह का एक समझौता तब काम आएगा जब यह परियोजना काफी बढ़ जाएगी।

मान लीजिए कि हमारी साइट पशु आहार बेचती है।
तब URL इस तरह दिखाई देंगे:
फ़ीड सूची - / #! / डॉगफ़ूड
फ़ीड पृष्ठ - / #! / डॉगफ़ूड /: आईडी
कुछ अतिरिक्त फ़ीड जानकारी - / #! / डॉगफ़ूड /: आईडी / विवरण

यदि आप नहीं जानते कि आपको / # की आवश्यकता क्यों है - तो आप यहाँ हैं । संक्षेप में, इस तरह के लिंक को अजाक्स साइटों के लिए एसईओ-मित्र माना जाता है।

अब आइए इस बारे में बात करते हैं कि मैं "सूखी" रूटिंग को क्या मानता हूं। सब कुछ सरल है - यह तब होता है जब उरले लगातार होते हैं। वह पूरा विचार है।

ऐसा करने के लिए, बस यूआरएल की सूची को .constant में डालें । इसे रूट्स कहते हैं।

.constant('ROUTES', (function () { return { DOGFOODS: '/dogfoods', DOGFOOD: '/dogfood/:id', DOGFOOD_DETAILS: '/dogfood/:id/details' } })()) 

अब रूटिंग को कॉन्फ़िगर करें:

 .config(['$routeProvider', 'ROUTES', function ($routeProvider, ROUTES) { var pathToIncs = '/pages/'; //,     $routeProvider.when(ROUTES.DOGFOODS, {templateUrl: pathToIncs + 'dogfoods.html', controller: 'dogfoodsCtrl'}); $routeProvider.when(ROUTES.DOGFOOD, {templateUrl: pathToIncs + 'dogfood.html', controller: 'dogfoodCtrl'}); $routeProvider.when(ROUTES.DOGFOOD_DETAILS, {templateUrl: pathToIncs + 'dogfood_details.html', controller: 'dogfoodsDetailsCtrl'}); }]) 

ठीक है, कि काम करना चाहिए। शायद अब यह अनावश्यक लग रहा है, लेकिन अब हम अपने स्थिरांक का उपयोग बार-बार करेंगे।
उदाहरण के लिए, हमारी साइट का मुख्य मेनू। HTML टेम्पलेट में, हम बस लिखते हैं:

 <a href="ROUTES.DOGFOODS">Dogfoods list</a> 

अच्छा, यह समझ में आता है? अब सभी url एक ही स्थान पर हैं, अगर आपको कुछ नाम बदलने की आवश्यकता है तो हाथों से कम काम करें। हां, और आईडीई से समर्थन है।

अरे हाँ, एक छोटा सा क्षण। चूँकि हमें पता नहीं है कि हमें किस क्रम में url स्थिरांक की आवश्यकता है, इसलिए हमें उन्हें rootScope में रखना होगा । मेरे लिए, यह ospreys का संदूषण नहीं लगता है - यूआरएल वहाँ जगह हैं।

आप इसे इस तरह से उदाहरण के लिए कर सकते हैं:

 .run(['$rootScope', 'ROUTES', function ($rootScope, ROUTES) { $rootScope.ROUTES = ROUTES; }]) 

मैं खुद को इस तरह की सेवा करने का प्रस्ताव भी देता हूं:

 factory('redirectFactory', ['$location', 'ROUTES', function ($location, ROUTES) { return { goDogfoods: function () { $location.path(ROUTES.DOGFOODS); } }; }]) 

पुनर्निर्देशन सेवा का नाम स्वयं के लिए बोलता है - पुनर्निर्देशन करने के लिए, उदाहरण के लिए नियंत्रक या अन्य सेवाओं से, उदाहरण के लिए, प्राधिकरण, लॉगआउट आदि के दौरान।

इसलिए, मैं पहले से ही देख रहा हूं कि मेरे अंदर कौआ उड़ रहा है। वास्तव में, पैरामीटर के बारे में क्या है? यहां फिल्टर हमारी सहायता के लिए आएंगे।
मान लीजिए कि हमारे पास जो पैरामीटर है वह भाषा है। उदाहरण के लिए, मैं urls जैसे / #! / Eng / dogfoods प्राप्त करना चाहता हूं ।
हम अपने रूट कॉन्स्टेंट को संशोधित करते हैं:

 .constant('ROUTES', (function () { var langParam = '/:lang'; return { DOGFOODS: langParam + '/dogfoods', ... } })()) 

एक मार्ग फ़िल्टर बनाएँ:

 .filter('routeFilter', ['$filter', function ($filter) { return function (route) { var langParam = '/:lang'; var langVal = '/*   */'; return route.replace(langParam, langParam.replace(langParam, '/' + langVal)); }; }]) 

महान, अब हम इसे इस तरह से करते हैं:

 <a href="/#!{{ROUTES.DOGFOODS | routeFilter}}">Dogfoods list</a> 

सच है, इसके बाद फिल्टर को js में लगाना होगा।
उदाहरण के लिए, हमारी पुनर्निर्देशन सेवा इस तरह दिखाई देगी:

 .factory('redirectFactory', ['$location', 'ROUTES', '$filter', function ($location, ROUTES, $filter) { var 'routeFilter' = $filter('routeFilter'); return { goDogfoods: function () { $location.path(routeFilter(ROUTES.DOGFOODS)); }, ... }]) 

शायद यही सब है।

निष्कर्ष

कोणीय जेएस अभी गायब है, व्यंजनों और सर्वोत्तम अभ्यास का एक संग्रह है। मुझे यकीन है कि सब कुछ अधिक सुरुचिपूर्ण ढंग से पीटा जा सकता है, क्योंकि हमेशा प्रयास करने के लिए जगह है, है ना? लेकिन मैं सिर्फ गुल्लक में एक और नुस्खा जोड़ना चाहता था। मुझे आशा है कि मेरे द्वारा वर्णित आपके लिए उपयोगी है।